Claude

How to Use Claude Artifacts

3 min read

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.

Source: What are Artifacts and how do I use them?

Open the full interactive version (with copy buttons) ↗

← All guides