# 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.

- Canonical: https://guides-ai.pages.dev/guides/claude-artifacts/
- Plate 06.02 · Topic: Claude (https://guides-ai.pages.dev/topics/claude/)
- Published: 02 Sept 2026 · Updated: 06 Sept 2026 · 3 min read
- Source site: guides-ai — https://guides-ai.pages.dev/

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:

```text
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.

```text
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

```text
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](/glossary/#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](/guides/claude-projects-getting-started/), or
[compare Claude and ChatGPT for coding](/guides/claude-vs-chatgpt-for-coding/).

Source: [What are Artifacts and how do I use them?](https://support.claude.com/en/articles/9487310-what-are-artifacts-and-how-do-i-use-them)