Claude Artifacts: the live side panel for docs, apps, and code
An Artifact is the panel that opens beside your conversation and shows a finished thing — a document, a small web app, a chart, a block of code — rendered…
Claude guide · as of July 10, 2026 · 5 minutes read · details change — confirm current specs on claude.ai
An Artifact is the panel that opens beside your conversation and shows a finished thing — a document, a small web app, a chart, a block of code — rendered live while you keep talking to Claude about it. Instead of copy-pasting code out to a separate editor to see whether it works, you watch it update in place as you ask for changes. It is one of Claude's more genuinely useful features, and also one of the easiest to push past its limits.
What an Artifact actually is
Artifacts appear automatically when Claude produces something substantial and self-contained — more than a throwaway snippet, something you would want to keep, edit, or reuse. You can also just ask: "put that in an artifact."
Common things that land in an Artifact:
- Documents — Markdown or formatted text you can read and revise.
- Small web apps — self-contained HTML/CSS/JavaScript, including React components.
- Code files — a script or module shown with syntax highlighting.
- Diagrams — flowcharts and structure drawn as SVG or Mermaid.
- Data visuals — tables and charts drawn with a charting library.
One honest note up front: Claude has no native image generator. Any picture inside an Artifact is drawn with code — SVG shapes, an HTML/CSS layout, a charting library — not painted the way a dedicated image model would. That makes diagrams and data visuals a real strength and photorealistic images a non-starter.
Working with an Artifact
The value is the loop. You describe a change in plain language, Claude rewrites the relevant part, and the panel re-renders. You can iterate for as long as you like:
- Ask for a change ("make the header sticky," "add a totals row," "use a calmer palette").
- Watch it re-render, and react to what you actually see.
- Roll back if a version got worse — Artifacts keep a version history you can restore.
Two habits help. Change one thing at a time so you can tell what fixed or broke the result. And when an app drifts into a confused state after many edits, ask for a clean rewrite rather than another patch.
Publishing and sharing
You can publish an Artifact to a private link and share it — for example with teammates — and viewers see the rendered result, not your chat. Sharing behavior and availability differ by plan and surface, so check the current options at claude.ai (as of July 2026 — confirm at claude.ai / anthropic.com).
Choosing the right surface
Artifacts overlap with two other Claude surfaces. Pick by what you are actually doing:
| You want to… | Reach for | Why it fits |
|---|---|---|
| See a doc, app, or chart rendered live and tweak it in chat | Artifacts | Self-contained, instant preview, easy iteration |
| Edit real files in a project on your own machine | Claude Code | Actual filesystem, terminal, and git |
| Reuse the same files and context across many chats | Projects | A persistent knowledge base that travels with you |
A rough rule: Artifacts are for a single self-contained thing you are shaping right now. The moment it needs to live in a real codebase, move to Claude Code.
Where Artifacts break
Artifacts run in a locked-down browser sandbox, and that sandbox is the source of most surprises.
- Self-contained only. A published Artifact generally cannot call external APIs, pull in remote scripts or fonts, or reach a database. Everything has to be inlined. Plans to "fetch live data" usually fail here.
- No backend. There is no server code, no place to hide an API key, and no shared storage that persists between viewers. It is a front end and nothing more.
- One file, practical ceiling. Large multi-module apps get cramped, and very big Artifacts can slow down or get truncated.
- Confidently broken. An app can render cleanly and still be wrong — off-by-one math, a mislabeled axis, a button that does nothing. Always exercise the real behavior, not just the look.
- Cloud-only. Everything runs through Claude's servers. An Artifact is not local, not offline, and not private in the sense of staying on your machine.
When this is the wrong tool
- You need a real production app with a database, logins, or a backend. Build it in a real environment; use Claude Code to help.
- The work must stay offline or fully private. Artifacts are cloud-only — for local-only work, see local vs cloud.
- You want a photorealistic image or photo edit. Claude draws with code; it does not paint. Use a dedicated image tool.
- You will maintain it long-term in a repo. Iterating forever in a chat panel gets fragile fast — graduate it into version control.
Quick gut check before you start: could this be one self-contained file that renders in a browser with no server and no outside calls? If yes, an Artifact is a great fit. If no, choose another surface early.
A short pre-flight:
- It is self-contained (no external API, database, or remote assets).
- It fits comfortably as a single file.
- I have tested the actual behavior, not just the appearance.
