How to Use Claude Artifacts
Artifacts open code, docs and diagrams in a side panel. Turn on Code execution and file creation in Settings, then iterate in place and publish a link.
On this page5 sections
An Artifact is substantial, self-contained content — code, a document, a diagram, a small app — that Claude opens in a panel beside the chat instead of dropping inline. You can run it, edit it and keep refining it without losing it in scrollback.
1. Turn the feature on
Artifacts are available on Free, Pro, Max, Team and Enterprise plans, but the capability has a switch:
Settings → Capabilities → Code execution and file creation
What it does: enables Artifacts. On Team and Enterprise the same toggle lives under Organization settings → Capabilities. If asking for an HTML page gets you a wall of code in the chat, this switch is why.
2. Ask for something substantial
Claude opens an Artifact when the content is self-contained and typically over 15 lines — something you’ll edit or reuse rather than read once.
Build a single-page HTML calculator for splitting a restaurant bill, with a tip slider.
What it does: asks for a complete, runnable thing, which is what triggers the panel. Common types are documents, code, HTML pages, SVG images, diagrams and React components.
3. Iterate in place
Make the buttons bigger and add a dark mode toggle.
What it does: edits the same Artifact rather than starting over. Each version stays available, so you can compare or roll back.
4. Publish it
Open the Artifact and click Publish to get a standalone page with its own link — you send the working thing rather than a screenshot. Artifacts can also call Claude themselves through a text API at no cost to you, which is how a published one stays interactive.
Verify it worked
Interact with the Artifact, don’t just look at it: click the buttons, resize the panel, reload the published link in a private window. A page that renders but doesn’t respond is the usual failure, and it’s invisible if you only read the code.
One limit worth knowing: 20 MB per artifact for text-only content. And a long Artifact still occupies your context window while you keep iterating on it — start a fresh chat for a genuinely new document.
For quick one-off answers, plain chat is faster. Next: keep context across chats with Claude Projects, or compare Claude and ChatGPT for coding.