Claude Artifacts: make and share small tools without code

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.

How Claude Artifacts work in a chat

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. Publishing an artifact adds it to the Artifacts section in the sidebar, where you can find it outside 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 Claude 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. For work that also needs saved instructions and reference files, Claude Projects is the better fit.

Useful first projects for Claude Artifacts

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 Claude Artifacts cannot 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 arbitrary server backend. You cannot deploy your own server process or database inside an artifact. AI-powered artifacts can call Claude, and on Pro, Max, Team, and Enterprise an artifact can use approved MCP connectors to read from or act in external services.
• Persistence is opt-in and paid-plan only. Published artifacts on Pro, Max, Team, and Enterprise can use personal or shared persistent storage across sessions. The current Artifacts guide sets a 20 MB text-only limit per artifact; personal and shared stores are isolated. Unpublishing permanently deletes that storage.
• 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 is not custom production hosting. You get a public claude.site URL and can generate embed code for approved domains. You do not get a custom domain or arbitrary server backend; move the code to your own project for those. The separate 20 MB figure applies only to persistent artifact storage.

How to publish and share an Artifact

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, a signed-in Claude user can click "Customize" to fork it into a new conversation without touching your original. Someone without an account can view and use basic functionality of a public artifact, but must sign up to customize it or use AI-powered capabilities.

Published artifacts can also be embedded on another website. The Publish dialog provides embed code and an allowed-domains field so you control where that embed can load.

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

What is a Claude Artifact in simple terms?

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. Signed-in 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.