Claude Artifacts: the beginner's guide

A Claude Artifact is a separate window that opens next to your chat whenever Claude produces something substantial you're likely to modify or reuse, roughly the point past 15 lines of code, a document, or a page. Instead of that output scrolling away in the transcript, it sits in its own panel with a Preview/Code toggle, version history, and a way to keep iterating without losing the thread.

What actually happens when Claude opens one

You don't ask for an "artifact" by name most of the time. You ask for a thing (a landing page, a chart, a one-page tool) and Claude decides on its own that the output belongs in its own window rather than inline. Every artifact you've created gets collected in an Artifacts section in the sidebar, so you can find an old one without scrolling back through the conversation that made it.

That's the whole loop: ask, get a working panel, refine it by talking, publish when it's ready.

What Artifacts can render

Six content types, confirmed by Anthropic's own help docs:

• Documents (Markdown or plain text)
• Code snippets in any major language
• HTML web pages, live-rendered with working CSS and JS
• SVG images, vector graphics drawn in code
• React components, interactive and live-rendered
• Diagrams and flowcharts via Mermaid

If you've read how to use Claude already, this is the same conversational style, just pointed at a persistent workspace instead of a one-off answer.

Beginner use cases that actually work

A one-page site. A portfolio page, an event invite, a small landing page. Claude renders it live in the preview pane, and you can publish it to a real link when it's done.

A checklist or template generator. A reusable project checklist, or a template you fill in differently each time for client emails.

A calculator or estimator. Anything with a formula behind it: a project-cost estimator, a tip splitter, or a genuinely specific example Anthropic's own users have built, a plywood cutting visualizer that tells you how many pieces you'll get out of a sheet and how much gets wasted.

A chart or small dashboard. Describe your data and what you want to see, and Claude writes the code that draws a bar, line, or pie chart in the preview. You don't need to know the charting library it's using.

A formatted document. A report, a resume, a proposal in Markdown. Highlight any part of it, click "Edit with Claude," and describe the change instead of rewriting it yourself.

A small interactive tool. A quiz, a flashcard set, a simple game built as a React component. Some of these can even call Claude's own API live once published, so the tool "thinks" for whoever opens it rather than just running static logic.

What it can't do

• It draws, it doesn't photograph. Artifacts can produce SVG vector graphics, Mermaid diagrams, and charts built from code, but Claude has no built-in photo or illustration model behind Artifacts. If you're picturing a realistic image or a piece of raster art, that's a different capability, and it's the single most common thing beginners expect Artifacts to do that it doesn't. See can Claude generate images for what actually produces pictures.
• No backend. Artifacts run entirely in a browser sandbox: no server code, no database, no calling outside APIs, aside from the optional built-in feature that lets an artifact call Claude's own API after you publish it.
• Nothing persists between sessions. Close the chat and a standard artifact resets. There's no built-in way to save a user's data across visits.
• One file, one component. There's no multi-file project structure. A genuinely complex app needs to be split up or built somewhere else.
• Publish gives you a preview link, not production hosting. You get a real public URL at claude.site, up to 20 MB of storage, and anyone can view or fork it. What you don't get is a custom domain, a backend, or auth, if you need those, you copy the code out and host it yourself.

Publishing and sharing

Two different buttons do two different things, and mixing them up is an easy mistake:

• Publish (Free, Pro, Max) makes the artifact public at a claude.site link. Anyone with the link can view and interact with it, no account required on their end.
• Share (Team, Enterprise) restricts the link to signed-in members of your organization instead of the public.

Either way, anyone viewing a published or shared artifact can click "Customize" to fork it into their own conversation without touching your original.

“Publishing an artifact gives you a real link, not a mockup.”

Tested on Claude Sonnet 5, July 2026: asking for a small HTML calculator opened a working artifact on the first try, and "make it look better" produced a visibly improved layout without breaking the calculation.

What is a Claude Artifact?

It's a side panel Claude opens for substantial content you're likely to reuse or edit, separate from the scrolling chat. It supports documents, code, HTML pages, SVG, React components, and Mermaid diagrams, and it comes with a Preview/Code toggle and version history.

Can I share a Claude Artifact?

Yes. Click Publish on Free, Pro, or Max plans to get a public claude.site link anyone can open, or Share on Team and Enterprise to restrict it to your organization. Viewers can fork it with "Customize" without changing your version.

Can Artifacts make images?

Not photos or illustrations. Artifacts can draw SVG vector graphics, Mermaid diagrams, and code-generated charts, but there's no built-in photo-generation model behind the feature. See can Claude generate images for what does.

Do I need a paid plan to use Artifacts?

No. Artifacts work on the Free plan once "Code execution and file creation" is enabled in Settings → Capabilities. Paid plans add org-level Share links and, on Team and Enterprise, Artifacts published directly from a Claude Code session.

This site isn't run by Anthropic. For the wider path from a first chat to using Claude day to day, start with how to use Claude, or browse more reviews.