What Are Claude Artifacts? The Complete Guide (2026)

Claude artifacts are standalone, interactive outputs that Claude generates and renders in a live preview pane beside the chat. You can build web apps, charts, games, diagrams, and documents without any local setup, then share them via a public link, embed them on a site, or download the source file. No deployment, no configuration.

Last updated: October 2026

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 is an artifact in Claude?

Claude artifacts are self-contained, interactive outputs — HTML pages, React components, SVG graphics, Mermaid diagrams, code files, and formatted documents — that Claude generates and renders in a live preview pane alongside the chat. You can interact with them, share them via link, embed them on any website, or download the source file. 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 can you build with Claude 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 are Claude artifacts used for?

The most common use cases, each with a dedicated guide:

Interactive prototypes and tools — calculators, forms, games, and dashboards built and shared without deployment. See Claude artifact examples.
Reports and documents — styled one-pagers, résumés, proposals, and reports with custom CSS. Download and export a Claude artifact.
Data visualizations — charts, graphs, and Mermaid diagrams from raw data, rendered interactively. Save a Claude artifact as a PDF.
Shareable demos — anything you want to send to someone who doesn't have a Claude account. All sharing methods compared.
Password-protected content — artifacts locked behind a password or expiry date for client work. Password-protect a Claude artifact.
Embedded content — artifacts rendered inside your own website via iframe. Embed a Claude artifact on any website.

How do I use Claude artifacts?

Four steps from prompt to shared link:

Enable artifacts — go to Settings → Feature Preview and toggle Artifacts on. On most accounts created after February 2026, this is already enabled by default.
Describe what you want — type your request in the chat: "Build a calculator with a dark theme" or "Create a bar chart showing this data." Claude generates the artifact and renders it live in the preview pane.
Edit and iterate — describe the changes you want in the chat. Claude updates the artifact live. You can also click directly into the artifact panel to edit the code.
Share or download — click Publish for a shareable link, or the download icon to save the HTML. For expiry control, password protection, and view analytics, upload to ShareDuo instead.

What's new with Claude artifacts in 2026 (as of October)

Live artifacts in Claude Cowork (April 2026, updated August 2026). Live artifacts connect to MCP servers and refresh with real data when you open them — an artifact can pull from a spreadsheet, a database, or a live API instead of using a static snapshot. Note: Anthropic changed the sharing model in August 2026 — external public links for legacy live artifacts moved to internal-only. The current path for publicly sharing a real-time artifact is ShareDuo's MCP server. See the full guide to Claude live artifacts for what changed and how to share one today.

Cowork is now just Claude (October 2026). Anthropic merged Chat and Cowork into a single interface — on Pro and Max plans, you no longer choose between them. Claude decides whether your request calls for a quick reply or a multi-step task. Sessions now run in the cloud, so work continues after you close your laptop. See what Claude Cowork is and what changed for the full breakdown.

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 (Pro and Max; new artifacts). Generates a claude.ai link. Viewers need a Claude account to open it. On Team and Enterprise, sharing stays within your organization by default. No expiry control.

Legacy Publish (Free, Pro, and Max; chat artifacts only). Creates a public URL that anyone can open without a Claude account. AI-powered artifacts (ones calling Claude's API at runtime) still require sign-in. Published artifacts may be indexed by search engines. As of September 2026, the Publish button only appears on legacy artifacts made in a chat — new artifacts use Share instead.

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, whether you can share a Claude artifact in the first place, and how to save a Claude artifact as a PDF.

Method	Who can view	Requires account	Expiry option	Setup time
Share button (Pro/Max)	Anyone signed into Claude	Yes	No	Instant
Legacy Publish (Free/Pro/Max, chat only)	Anyone	No	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.

How to export, share, and protect artifacts

Deep guides for each step after you've built an artifact:

Share: every way to share a Claude artifact compared · share without a Claude account · get a shareable link · can you share a Claude artifact?
Export: download and export a Claude artifact · export and share the HTML
PDF: save a Claude artifact as a PDF
Protect: password-protect a Claude artifact · invite-only access (specific people only)
Privacy & expiry: are Claude artifacts public? expiry, privacy and access
Embed: embed a Claude artifact on any website

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>

What are the limits of Claude artifacts?

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.

For the privacy angle — whether published artifacts expire, whether Google can index them, and how to get access control — see are Claude artifacts public? If you run into a specific error, the troubleshooting guide covers the five most common problems and how to fix them.

Claude artifacts vs. other AI tools

Several other AI tools have similar features. Brief comparisons, each linking to a full breakdown:

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 and does Grok have 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.

Claude projects. Projects are persistent context containers — uploaded files, custom instructions, chat history across sessions. Artifacts are outputs generated inside a conversation. See Claude projects vs artifacts for the full breakdown.

Frequently asked questions

What are Claude artifacts?

Claude artifacts are standalone interactive outputs — web apps, charts, games, diagrams, and documents — that Claude generates in a live preview pane beside the chat. Iterate by describing changes, then share via link, embed, or download. No setup required.

What is an artifact in Claude?

An artifact in Claude is a self-contained rendered output — HTML, React, SVG, Mermaid diagram, code file, or formatted document — in a split-pane preview alongside the chat. You see and interact with the live result, not just the code.

What are artifacts in Claude used for?

Common uses: interactive prototypes, calculators, dashboards, games, data visualizations, styled reports, and client demos. Anything you want to share via a link without deploying an app.

How do I use Claude artifacts?

Enable artifacts in Settings → Feature Preview, describe what you want to build, and Claude renders it live. Edit by describing changes. Publish for a shareable link, or download the HTML. For expiry and passwords, upload to ShareDuo.

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?

Yes — Claude's Publish creates a public link that standard HTML artifacts load at for anyone, no account required. For expiry control, password protection, and view analytics, use ShareDuo to host the HTML on a public URL with full access control. AI-powered artifacts (ones calling Claude's API at runtime) do require sign-in regardless of hosting.

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.