Claude artifacts: the complete guide (April 2026)

Claude artifacts are the feature that turns a Claude conversation into a working, shareable product. In a few seconds, Claude can build a dashboard, a game, a data visualization, or a styled document — and render it live in a preview pane right inside the chat.

This guide covers everything: what artifacts are, what you can build with them, the 2026 updates, how to share and embed them, and the limits you'll run into. Internal links throughout point to deeper guides on specific topics.

What are Claude artifacts?

Claude artifacts are interactive outputs — code, HTML, React components, SVG graphics, Mermaid diagrams, or formatted documents — that Claude renders in a split-pane preview panel alongside the chat. You don't have to open a new tab or copy the code to see the result. The preview updates as Claude revises, so you can iterate quickly without leaving the conversation.

Artifacts appear automatically when Claude determines the output benefits from a rendered preview. You can also request one explicitly: "Build this as an artifact" or "Show it in the preview pane."

Supported types include:

HTML/CSS/JavaScript — full web pages with scripts, styles, and external CDN resources
React — components rendered with Babel in the browser
SVG — vector graphics rendered inline
Mermaid — flowcharts, sequence diagrams, ER diagrams, Gantt charts
Code files — syntax-highlighted, copyable source in any language
Markdown documents — formatted documents with headers, tables, and lists

What you can build with artifacts

Here are six representative examples of what Claude can build in a single conversation:

A working calculator. Ask Claude to build a calculator with a specific layout — scientific, financial, unit converter — and it produces a complete HTML/JS page that runs immediately. No setup, no deployment.

A data dashboard. Paste a CSV or describe your data structure and ask for a Chart.js dashboard. Claude produces an interactive chart with real axis labels and data points, rendered live in the artifact pane.

A Mermaid flowchart. Describe a process in plain English and ask for a Mermaid diagram. Claude generates the diagram code and renders it as a visual in the preview. Copy the source or export the image.

A React form. Ask Claude to build a multi-step form, a settings panel, or a data entry interface in React. The component renders in the preview, and you can iterate on the behavior by describing what you want to change.

A single-file game. Simple games — Tetris, Snake, a quiz, a word puzzle — work surprisingly well as single-file HTML artifacts. Claude handles the game logic, the canvas rendering, and the keyboard controls in one file.

A styled document or report. Instead of a plain markdown block, ask Claude to format a document with custom CSS — a résumé, a proposal, a one-pager. The artifact preview shows the final printed layout.

For more examples, see Claude artifact examples and use cases.

What's new in 2026

Live artifacts in Claude Cowork (April 2026). The biggest update yet: live artifacts can connect to MCP servers and refresh with real data when you open them. This means an artifact can pull from a spreadsheet, a database, or a live API — turning it from a static snapshot into a dynamic tool. See Anthropic's documentation on live artifacts for setup details.

Free tier (February 2026). Claude opened artifacts to free-tier users. Code, document, and basic web artifacts are now available without a subscription. Higher-complexity artifact types and live artifact connections still require a paid plan.

Embed code button. Claude added a dedicated embed button that generates an iframe snippet with the correct sandbox attributes. You configure the allowed domains, copy the code, and paste it into your site. It's a cleaner flow than manually constructing the iframe.

How to enable artifacts

On most accounts, artifacts are on by default. If they're not showing up: go to Settings → Feature Preview and enable Artifacts. Free-tier accounts created after February 2026 have this on automatically.

On mobile (iOS and Android), the Claude app supports viewing artifacts but the editing and iteration experience is better on desktop. If you're doing serious artifact work, stick to the web or desktop app.

How to share a Claude artifact

Three paths, with honest trade-offs:

The Share button. Generates a claude.ai link. Viewers must be logged into Claude to see anything — free accounts work, but the recipient needs one. No expiry. Easy to use.

Publish. Makes the artifact publicly listed (on some artifact types). Still hosted on claude.ai, still requires authentication for some types. The distinction between Share and Publish has changed across Claude versions — test which one your artifact type needs.

ShareDuo. Download the artifact HTML, upload it to ShareDuo, and get a link that works for anyone in any browser — no Claude account required. Free, takes about 30 seconds. Optional expiry and password protection. This is the only option that works for recipients who don't use Claude at all.

For deeper how-to guides, see compare every way to share a Claude artifact, the step-by-step walkthrough on how to share a Claude artifact without an account, how to get a shareable link for any artifact, and whether you can share a Claude artifact in the first place.

Method	Who can view	Requires account	Expiry option	Setup time
Share button	Claude users	Yes	No	Instant
Publish	Claude users	Yes (most types)	No	Instant
ShareDuo	Anyone	No	Yes (1h–30d)	~30 seconds

For a full explanation of why Claude's native links don't work for everyone, see how to share a Claude artifact so it actually works.

If your artifact is just a standalone HTML file, see the fastest way to share an HTML file online.

Share your artifact with anyone — no Claude account needed

Free · No signup · Works in any browser

Upload & share →

How to embed a Claude artifact

To embed an artifact on your own site using Claude's native flow:

Open the artifact and click Publish.
Go to Embed settings and add your site's domain to the allowed-domains list.
Copy the iframe code and paste it into your HTML.

Make sure your site and the iframe URL both use HTTPS — mixed content (one HTTP, one HTTPS) causes browsers to block the iframe silently.

If you just want the artifact to be viewable in an iframe without the allowed-domains configuration, upload it to ShareDuo first and use the ShareDuo URL in your iframe. No domain setup required, and the link works as a standalone URL too. The full workflow is covered in export and share a Claude HTML artifact and the step-by-step on how to download and export a Claude artifact.

Copy-pasteable iframe template:

<iframe
  src="YOUR_SHAREDUO_OR_CLAUDE_URL"
  width="100%"
  height="600"
  frameborder="0"
  sandbox="allow-scripts allow-same-origin allow-forms"
  loading="lazy"
></iframe>

Limits and gotchas

localStorage doesn't work. Artifacts run in a sandboxed iframe. Any code that reads or writes localStorage or sessionStorage will fail silently or throw an error. Rewrite persistent state using in-memory variables, URL parameters, or — if you need real persistence — a hosted backend.

CDN allowlist. Claude's sandbox allows most popular CDN scripts (Chart.js, D3, Tailwind CDN, Google Fonts), but corporate firewalls and strict browser security settings can block them. If an artifact works in Claude but breaks when hosted elsewhere, check the browser console for blocked-resource errors.

Single file only. An artifact is one file. Multi-file projects — a React app with separate components, a site with multiple HTML pages — aren't supported. For those, you need to either inline everything into one file or use Claude Code to work in a real local environment.

AI-powered artifacts always require login. Any artifact that makes API calls back to Claude (as opposed to using static JS) requires the viewer to have an active Claude session. These can't be made fully public regardless of the hosting method. For the full breakdown of what publishing an artifact actually means, see the dedicated explainer.

Mobile rendering quirks. CSS that looks correct in a desktop browser can overflow or wrap unexpectedly in the artifact's mobile preview. Ask Claude to test responsive behavior explicitly if the artifact will be shared on mobile.

If you run into a specific error, the troubleshooting guide covers the five most common problems and how to fix them.

Artifacts vs other AI canvases

Several other AI tools have similar features. The brief comparisons below each link to a full comparison page:

ChatGPT Canvas. Canvas is better for collaborative document editing; Claude artifacts are better for interactive output (React, SVG, Mermaid, HTML apps). See Claude artifacts vs ChatGPT Canvas.

Grok Studio. Grok Studio integrates X/Twitter data tightly and suits real-time social content. Claude artifacts have broader content-type support and better embedding options. See Grok Studio vs Claude artifacts.

Claude Code. Claude Code is a CLI/agentic tool for modifying real codebases on your machine. Artifacts are browser-based, self-contained previews you can share. Different tools for different jobs. See Claude artifacts vs Claude Code.

Cursor Composer. Cursor Composer edits your actual local codebase with full context. Claude artifacts are better for standalone shareable prototypes. See Cursor Composer vs Claude artifacts.

Artifacts vs Claude projects

A common point of confusion: projects are persistent containers for context — uploaded files, custom instructions, conversation history — that carry across multiple chats. Artifacts are the outputs those conversations produce. Projects store your inputs; artifacts are things you can preview and share. You can use artifacts without projects, and projects don't require artifacts. For a full breakdown, see Claude projects vs artifacts.

Frequently asked questions

What can Claude artifacts do?

Claude artifacts render HTML, React, SVG, Mermaid diagrams, code files, and formatted documents in a live preview pane. You can interact with them, share them via link, embed them on a site, or download the source. Since April 2026, live artifacts in Claude Cowork can connect to MCP servers and pull real-time data.

Are Claude artifacts free?

Yes. Claude added a free tier in February 2026 that covers code, document, and basic web artifacts. Advanced features and live artifact connections require a paid plan.

How do I turn on Claude artifacts?

Go to Settings → Feature Preview and enable Artifacts. On most accounts created after February 2026, this is already on by default.

Can I share a Claude artifact with someone who doesn't have Claude?

Not via the native Share or Publish buttons — those require the viewer to be logged in. Use ShareDuo to host the HTML on a public URL anyone can open without an account.

What's the difference between Claude artifacts and Claude projects?

Projects store persistent context (files, instructions, history) across chats. Artifacts are interactive outputs generated inside a conversation. See Claude projects vs artifacts for the full explanation.

Can Claude artifacts replace a real app?

For simple self-contained tools — calculators, dashboards, games, form prototypes — artifacts often work well enough. Anything requiring a backend, authentication, or a database needs to be built as a proper app using the artifact as a starting point.

Can you embed Claude artifacts on a website?

Yes. Use Claude's embed code button (requires allowed-domains configuration) or upload the artifact to ShareDuo and use that URL in an iframe. The ShareDuo approach skips the domain config step.

How do I download a Claude artifact?

Click the download icon in the artifact panel header. Or ask Claude: "Show me the full source." Claude outputs the complete file, which you can copy and save manually.