Skip to main content
Using Claude

Claude Artifacts: How to Create, Edit, Publish & Share (2026)

How to use Claude Artifacts to build, edit, and share code, documents, web apps, and graphics beside your chat — auto-create rules, enabling, Publish/Share, Live & AI artifacts.

ByUpdated
🌐 This article was machine-translated and may contain inaccuracies. Read the Korean original if in doubt.

Artifacts let Claude show its output — code, documents, web pages, graphics, small apps — in a dedicated panel beside the chat, where you can preview, edit, and share it without copy-pasting anywhere else.

🟢 Model references match the current lineup · model notice · Fable subscription
🟢 Model references match the current lineup · Claude Opus 5.5 / Claude Sonnet 5 / Claude Haiku 4.5 (higher tier: Claude Fable 5.1). This notice changes only when Anthropic ships a new model.

Fable 5 and 5.1 subscription (updated September 7, 2026): Claude Fable 5.1, released September 1, 2026, is the current Fable model and Fable 5 is now legacy. Plan terms are the same for both — Max and Team Premium plans include Fable at up to 50% of the weekly usage limit; Pro and Team Standard use usage credits (

🟢 Model references match the current lineup · Claude Opus 5.5 / Claude Sonnet 5 / Claude Haiku 4.5 (higher tier: Claude Fable 5.1). This notice changes only when Anthropic ships a new model.
0/M input, $50/M output tokens). The one-time
🟢 Model references match the current lineup · Claude Opus 5.5 / Claude Sonnet 5 / Claude Haiku 4.5 (higher tier: Claude Fable 5.1). This notice changes only when Anthropic ships a new model.
00 credit applied only to the Fable 5 transition and is not offered for 5.1. Some coding and debugging requests may be answered by an Opus model due to a security classifier (both models). See the Fable 5.1 guide and the Fable 5 availability guide for details.

What you can build with Artifacts Code • scripts, many langs HTML app • web pages, games React • interactive UI Docs & files • Markdown docs • docx, pptx, xlsx, pdf Graphics • SVG, Mermaid diagrams Live dashboard • auto-refreshing data All plans (incl. Free). Content over ~15 lines becomes an artifact (2026).

When an artifact appears

Claude creates an artifact when the output is self-contained and usually over 15 lines (code, HTML, diagrams, documents). You can also just ask: "make this an artifact." It renders in a side panel to the right, and the preview updates instantly as Claude revises it.

Artifact types — what to make, and when

Artifacts aren't a single thing; they come in several forms depending on what you're producing (per official guidance, re-checked September 2026). The right type depends on your goal.

The 7 artifact types — what to buildMarkdown.mdDocs to readCode30+ languagesReusable codeHTML.htmlWorking screensReact.jsxInteractive UISVG.svgLogos & iconsMermaid.mermaidFlowchartsDocumentsdocx·pptx·xlsx·pdfFiles to shareNot sure which to make?Just say the goal — e.g. "download as PDF", "draw a flowchart"→ Claude picks the right type for you
  • Markdown documents (.md) — formatted prose. Best for documents you read: reports, proposals, meeting agendas, tutorials.
  • Code & scripts — syntax-highlighted across 30+ languages. Best for code you'll reuse: functions, snippets, config files.
  • HTML pages (.html) — HTML, CSS, and JavaScript in one file, rendered live. Best for single-file screens: landing pages, forms, calculators, lightweight games.
  • React components (.jsx) — interactive UI with state and events (Tailwind styling and Recharts charts supported). Best for widgets that react to input: calculators, simulators, dashboards.
  • SVG vector graphics (.svg) — images that stay crisp at any size. Best for logos, icons, infographics, and diagrams (simple, precise shapes render better than complex art).
  • Mermaid diagrams (.mermaid) — describe it in words, get a picture. Best for structure and flow: flowcharts, sequence and ER diagrams, Gantt charts, mind maps.
  • Downloadable documents (.docx, .pptx, .xlsx, .pdf) — Word, PowerPoint, Excel, and PDF files you can download (PDFs also preview in the panel). Best for finished files to hand off.

Not sure which type to pick? Just describe the goal ("let me download this as a PDF," "draw it as a flowchart") — Claude usually chooses the right form. Combining types (e.g., HTML plus an interactive component) can produce richer results.

Turning it on

Most accounts have it on by default (free accounts created after Feb 2026 automatically). If you don't see artifacts, enable them under Settings → Feature Preview. Available on all plans (Free, Pro, Max, Team, Enterprise).

Create & refine

  1. Describe what you want — e.g. "build a to-do tracker," "chart this data as bars."
  2. Check the Preview tab and refine with follow-up prompts ("change the colors," "add a button").
  3. For more control, open the Code tab to view and edit the HTML/CSS/JS directly.

Sharing

  • Publish — Free/Pro/Max: creates a public link. Recipients don't need a Claude account to view and interact. Signed-in users used to be able to remix it with a button; the official help article (checked September 18, 2026) no longer mentions that button and instead describes copying the published artifact's code into a new chat and asking for the changes you want ("Build on a published artifact"; Free, Pro and Max; the original is unaffected). After publishing you can also use "Get embed code" to embed the artifact on another website, and unpublishing is permanent for that artifact and deletes its stored data.
  • Share — Team/Enterprise: available within your organization only (login required). Since July 13, 2026, Team and Enterprise also get multiplayer editing (several people editing the same artifact at once), and artifacts created in Claude Code or Claude Tag (Slack) can be shared via public link.

⚠️ A published artifact is public and may be indexed by search engines. Don't publish sensitive content.

Sharing works differently in the new Claude experience (per the official help article, September 18, 2026). The new Claude experience, which merges chat and Cowork, is rolling out gradually to Pro and Max. Artifacts made there (including Claude Design, Slides, Docs, and Claude Code output) are shared through the artifact's Share dialog rather than Publish: choose "Only you" or "Anyone with the link," and whether the link shows the latest version or a specific one. Everyone who opens an artifact shared this way needs a Claude account. Publishing, embed codes, and copying the code are available only for artifacts made in chat on the previous experience. If your message box still shows "Chat" and "Cowork" options, you are on the previous experience and the Publish/Share guidance above applies as is.

More powerful features

  • Live Artifacts: dashboards/trackers that refresh with current data each time you reopen them.
  • AI-powered artifacts: the artifact can call Claude's API directly, making smart apps rather than static screens.
  • Persistent storage: keep data across sessions (reported up to ~20MB per artifact).
  • MCP connections: integrate with external services like Calendar, Gmail, Slack (see the MCP guide).
  • Downloadable files: you can get docx/pptx/xlsx/pdf as artifacts too.
Build by chatting, refine in the panelLeft: chat"Build a budget app""Change button color""Add a table too"Right: artifact panelThe output is created,updated & previewed live→ share when doneRefine code, docs, diagrams iteratively by chatting · as of 2026.6

Tips

Editing and iterating is easier on web/desktop than mobile (the mobile app is mainly for viewing). For the broader feature set, see Projects, Artifacts & Memory.

Disclaimer: Artifact types, sharing, storage, and the toggle location vary by plan and version and may change (some figures are subject to change). This guide reflects Anthropic's official docs (support.claude.com) at the time of writing (June 2026) and were re-checked on September 9, 2026. Check the official docs for the latest. This site is not affiliated with Anthropic.

Was this helpful?

Keep reading

Readers read this next

How to Share a Claude Chat with a Public Link (and Revoke It)

A beginner's guide to creating and revoking Claude's public chat links, what the shared snapshot includes and excludes, and how plan tiers differ.

164
Readers read this next

How to Use Claude Design — Where to Open It, What to Build, Export to PPT and HTML (September 2026)

Since September 16, 2026 you can create Claude Design artifacts in any conversation. The four entry points, what you can build, applying a design system (brand colors and type), export options (PPTX, PDF, HTML, Google Slides, Claude Code handoff), plan requirements and beta limitations, from the official help articles.

138

Claude's Skills Explore Tab Explained — What 60 Plugins Do, How to Use Them, and Whether They Run Automatically (Sept 2026)

What each plugin listed under Settings → Skills → Explore does, how you call it, and whether it can run with nobody around — based on the SKILL.md files of 60 installed plugins and Anthropic's official docs.

65

Can Claude Really 'One-Click' Write a Web Novel? What's Realistic

There's a hope that feeding Claude a premise is enough to get a finished serialized novel, but the tasks Claude is actually good at and what still needs a human writer are different things. Here's a realistic workflow using real features like Projects and Styles.

38