What Is Artifact in Claude? Interactive Code, Documents, and Apps Explained

Artifact is a feature of Anthropic’s Claude that displays generated code, HTML, SVG, React components, Markdown documents, and diagrams in a dedicated side panel instead of inline chat text. Released to general availability in June 2024, it turns Claude from a “chat-only” assistant into a collaborative work surface where outputs can be previewed, iterated on, downloaded, and shared.

This guide explains what an Artifact is, how Claude decides when to create one, the supported formats, how editing and sharing work, and how Artifacts compare to OpenAI’s ChatGPT Canvas. You should understand Artifacts before building anything nontrivial with Claude on the web app — they are the difference between “Claude told me what to do” and “Claude did it with me.”

What Is an Artifact?

An Artifact is both (a) a dedicated preview panel next to the Claude chat, and (b) the generated output (code, document, UI) that lives in that panel. When Claude determines that an output is long, reusable, or benefits from a live preview — a 200-line Python script, a single-file React component, an HTML page, a Mermaid diagram, or a long Markdown document — it will open the Artifact panel automatically and place the output there instead of embedding it inline in chat.

A useful analogy is opening a Google Doc next to your chat window: you describe what you want on the left, and the document updates on the right. It is important to note that Artifacts go beyond a simple document pane — HTML and React are actually rendered and executed in a sandboxed iframe, so you can click, interact, and test the generated UI before downloading it. This is what makes Artifact feel qualitatively different from pasting code into chat.

How to Pronounce Artifact

How Artifacts Work

Claude follows an internal specification that describes when to create an Artifact, which kind of Artifact to create, and how to update an existing one. This behavior is not driven by the Claude model alone — the web client and desktop app parse special markers in Claude’s output to know whether to render a response inline or to open the Artifact panel. In effect, Artifact is a contract between the model and the UI.

When Claude Auto-Triggers an Artifact

According to Anthropic’s documentation, Claude tends to open an Artifact when the output meets roughly these conditions: (1) the output is at least ~15 lines of code, (2) the output is likely to be reused or edited by the user, (3) the output is something with a clear visual representation (HTML, SVG, Mermaid), or (4) the output is a self-contained document. Short answers and small snippets stay inline, because opening a side panel for a two-line answer would feel heavier than it should.

Supported Artifact Types

Artifact natively supports the following types: Markdown documents, single-file HTML (including CSS and JavaScript inline), React components (single file, Tailwind core utilities, access to curated libraries like lucide-react, recharts, MathJS, lodash, d3, and Three.js r128), SVG, Mermaid diagrams, and plain code files for languages like Python or TypeScript. Each type has an appropriate renderer: HTML and React run in a sandboxed iframe, Mermaid renders as a diagram, Markdown renders as formatted prose, and code is shown with syntax highlighting and a copy button.

Update vs Rewrite

When you ask Claude to modify an existing Artifact, it decides between a small diff-like update and a complete rewrite. For narrow asks (“fix the bug on line 42” or “change the button color”), Claude does an update — efficient and fast. For wide-ranging asks (“rewrite this in TypeScript with hooks”), Claude produces a fresh rewrite. You should lean on many small asks: keeping context short keeps the quality high and the iterations cheap.

Browser Storage Is Not Supported

Important: Artifacts run in a sandboxed environment that does not expose localStorage, sessionStorage, or persistent browser storage. For state, use React hooks or in-memory JavaScript variables. If you need persistence, copy the Artifact into your own app and wire up a real backend.

Artifact Usage and Examples

The easiest way to use Artifacts is through claude.ai or the Claude desktop app. Below is a simple example of asking Claude to build an interactive React counter, which it will place inside an Artifact window.

# User prompt
Build a tiny React counter with an increment button and a reset button.
Style with Tailwind. Use hooks, no external state.

Claude’s output, placed inside an Artifact, looks roughly like:

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div className="p-4 space-y-2">
      <p className="text-2xl">{count}</p>
      <button onClick={() => setCount(c => c + 1)}
        className="bg-blue-500 text-white px-4 py-2 rounded">+1</button>
      <button onClick={() => setCount(0)}
        className="bg-gray-300 px-4 py-2 rounded ml-2">Reset</button>
    </div>
  );
}

Iterating on an Artifact

Once the Artifact exists, you can ask for iterative changes: “Add a keyboard shortcut for the + button,” “Store the history of values in state and show the last five,” and so on. Claude updates the Artifact in-place with small diffs where possible. This is dramatically faster than regenerating the whole file for each change. Keep in mind that extremely large refactors may still trigger a full rewrite.

Downloading and Sharing

The ⋯ menu on the Artifact window allows copy, download (to a local file), and share-link generation (availability depends on your plan). Share links let other people view the Artifact inside Claude’s preview UI without giving them access to your chat history.

Advantages and Disadvantages

Advantages

Artifact’s biggest advantage is that generated outputs become tangible. You can click buttons, scroll tables, view charts, and read styled documents without leaving Claude. The panel keeps content anchored as the chat grows, so you do not lose your work to scrollback. Because the same Artifact can be updated over many turns, it is possible to build something meaningful across a long conversation without losing context.

Artifacts are also shareable. A publicly-shared Artifact renders the same interactive UI for anyone with the link. For demos, design critiques, and knowledge sharing this is a powerful lightweight publishing channel. Important: make sure shared Artifacts do not contain private data.

Disadvantages

The sandbox has real limits. No localStorage or sessionStorage, restricted network access, a fixed set of libraries available on the CDN, and CSS limited to Tailwind’s prebuilt utility classes in the React renderer. For polish-level visual work or full-stack apps, you will need to take the Artifact into a real dev environment. Keep in mind that “runs in Artifact” is not the same as “ready for production.”

Artifact vs ChatGPT Canvas

In practice, Artifact tends to feel stronger for anything that needs an interactive preview — UI mocks, dashboards, charts — while Canvas shines for long-form writing where collaborative editing of prose is the main goal. You should try both with your actual tasks; the preference often comes down to workflow taste. Note that both products continue to evolve rapidly, so comparisons change.

Artifact Internals and Behavior Notes

Although Anthropic has not open-sourced the Artifact specification, several behaviors are consistently observable in production use and worth knowing about. Claude determines Artifact eligibility during response generation, not after; this is why very short answers never flip into Artifact form even if the user requests long follow-ups later. Keep in mind that the decision is per-response, so if your initial request is small you will not see an Artifact even if subsequent iterations grow large.

The Artifact panel caches the last seen version and highlights changes when an update arrives, which helps users see what Claude actually changed in an iteration. Important: this diff-preserving behavior is a UI affordance, not a model guarantee — the underlying content might be rewritten completely even when the UI suggests a small change. Always skim the rendered output after any major iteration.

In React Artifacts specifically, Claude imports from a curated CDN that includes lucide-react, recharts, MathJS, lodash, d3, Plotly, Three.js r128, PapaParse, SheetJS, and Tone. Some libraries (for example, newer Three.js features that require r142+) are deliberately unavailable, and prompts that assume their presence will fail silently. You should ask Claude to verify its imports against the known-available set if your prompt is ambitious.

HTML Artifacts allow a wider set of imports via https://cdnjs.cloudflare.com, making them more flexible for quick experiments. SVG Artifacts render as full images and support most SVG features. Markdown and plain code Artifacts are primarily display surfaces, but the code Artifact includes a “Copy” button that respects whitespace and escape characters faithfully, which matters when you are moving generated code into a real project.

Common Misconceptions

Misconception 1: Artifact runs in a real browser environment.
It runs in a sandboxed iframe with restricted APIs. localStorage, sessionStorage, and many network calls are blocked. You should treat Artifact outputs as prototypes, not production artifacts.

Misconception 2: You have to manually invoke Artifact.
Claude auto-triggers based on output size and type. You do not need to tell it to “use Artifact.” Asking “build me X as a React app” is enough.

Misconception 3: Artifact is paid-only.
It is available on the Free plan too, though some features like share links and higher message caps live on paid tiers.

Misconception 4: Once created, an Artifact is static.
You can iterate freely. Say “make the header sticky” or “switch this table to a chart” and Claude updates the Artifact accordingly.

Real-World Use Cases

1. UI prototyping: Sketch landing page variants, signup forms, or pricing tables with live React previews and iterate with a designer or PM in real time.

2. Data visualization drafts: Ask for a recharts dashboard with sample data, then swap in your real CSV (pasted into chat) to see a quick first version.

3. Technical writing: Draft READMEs, API docs, runbooks, and proposals as Markdown Artifacts so they are easy to copy into your wiki.

4. Teaching algorithms: Have Claude render a Mermaid diagram or an animated SVG illustrating sorting, tree traversal, or graph algorithms.

5. Quick internal tools: A form that parses and validates input, or a mini calculator for a specific domain, can come together in one conversation.

6. Dashboards as embedded demos: Share a public Artifact link to give stakeholders a hands-on feel before you build the real product.

7. Design system components: Generate button, card, and layout components with Tailwind, collect the ones you like, and port them into your codebase.

8. Diagram-first documentation: Combine Mermaid, Markdown, and SVG Artifacts to document architecture with both prose and visuals.

Getting the Most Out of Artifacts

Artifacts reward clear specifications. Instead of “build me a todo app,” describe the surface area you care about: “a single-file React todo app using hooks, Tailwind for styling, with add, delete, complete, and a filter for ‘completed only,’ no external state or storage.” Claude will produce a tighter first draft and need fewer iterations. Keep in mind that prompts written once and reused across projects (a personal “template prompt”) tend to yield consistent results.

When iterating, keep requests small and scoped. “Change the accent color to red,” “move the toolbar to the left,” and “add an empty state illustration in SVG” each survive as targeted updates rather than triggering full rewrites. When you really do want a rewrite, say so explicitly — Claude honors clear direction. Important: if you find Claude producing large diffs for small asks, your prompt is probably ambiguous; rephrase.

For long-form writing, treat the Artifact as the canonical document and the chat as the editor. Instruct Claude by pointing to the Artifact: “In the Artifact, expand the section titled ‘Motivation’ with a concrete example.” This framing keeps the Artifact stable and the chat conversational. Note that Claude will insert or edit only where you ask, as long as the ask is specific.

When you want to ship, copy the code out. Artifacts are not hosting environments; they are drafts. Paste the code into your repo, add tests, add real backends, and harden the UX for edge cases. You should assume that anything Artifact-rendered needs a production pass before going live.

Frequently Asked Questions (FAQ)

Q. Which Claude models support Artifact?

A. All current Claude models (Haiku, Sonnet, Opus) can produce Artifacts. Quality scales with model capability, so complex React apps benefit from Sonnet 4.6 or Opus 4.6.

Q. Can I turn Artifact off?

A. Yes. Settings has a toggle to disable Artifacts; long outputs will then be returned inline in chat. This is occasionally useful when you want to copy-paste directly.

Q. Can I publish an Artifact as a public app?

A. You can share a public link so anyone can interact with the Artifact inside Claude’s preview UI. For a real production deployment, copy the code into your own hosting (Vercel, Netlify, your own server).

Q. Can Artifacts call external APIs?

A. Some CORS-friendly public APIs may work, but network access is limited in the sandbox. For anything nontrivial, run the code locally where you control the network.

Q. Is there a limit on the number of Artifacts I can create?

A. There is no separate per-message Artifact quota — they count against your overall Claude message usage. Paid plans get higher limits.

Q. Can I use Artifacts from the Anthropic API directly?

A. The Artifact UI is a product of claude.ai and the desktop/mobile apps. Via the API, you get the structured model output; it is up to your own application to render it. Some third-party tools replicate an Artifact-like panel on top of the API.

History and Evolution of Artifact

Artifact was introduced in June 2024 alongside Claude 3.5 Sonnet, the model that also introduced a meaningful leap in front-end code quality. The pairing was deliberate: Anthropic wanted the first highly capable coding model to ship with a UI surface where its code could be experienced, not just read. Within weeks, Artifact-produced React apps and HTML demos were being shared across Twitter, blog posts, and engineering forums, which helped cement Claude’s reputation for coding.

Subsequent releases (Claude 3.7, Claude Sonnet 4 through 4.6, Claude Opus 4 through 4.6, Claude Haiku 4.5) have each improved Artifact-friendly behavior, from better Tailwind handling to more consistent Mermaid diagrams. The product has also grown: share links, an Artifact-only view mode, and improvements in auto-triggering have all arrived in steady increments rather than one large overhaul. Note that Artifact’s evolution tracks model improvements closely — better models produce better Artifacts even without UI changes.

Looking ahead, Artifact is increasingly serving as a stepping stone between “chatting with an AI” and “building with an AI.” Claude’s newer features — Projects for persistent workspaces, Skills for named behaviors, Cowork mode for file and workflow automation on the desktop, and the Claude Agent SDK for programmable agents — all intersect with Artifact. You should think of Artifact as the UI front door for the broader Claude-as-builder story.

Limitations and Workarounds

The two most common limitations reported by users are sandbox restrictions and file-size ceilings. Sandbox restrictions (no localStorage, limited network, Tailwind-only in React) are solved by copying the code into a real dev environment. File size has a practical ceiling because Artifacts live in a single message; for anything you truly need to split into multiple files, you can either ask Claude to concatenate files into a single HTML Artifact for preview or run the code outside Artifact.

A second-tier limitation is animation and timing reliability. Long-running setInterval or requestAnimationFrame loops can behave slightly differently in the sandbox iframe than in a user’s production browser. Keep in mind that visual fidelity and timing-sensitive behavior should be retested after you move code out of the sandbox. For most static UIs and straightforward forms, behavior is identical.

Performance inside the Artifact sandbox is generally adequate for previews, but it is not optimized for heavy workloads. Rendering hundreds of DOM nodes, processing very large datasets in the browser, or running expensive WebGL scenes can feel sluggish compared to a normal browser tab. For these cases, move the work outside the sandbox as soon as possible. You should also watch out for memory leaks introduced by listeners you register inside React effects — the sandbox does not give you a clean profiler, so you may only catch them later.

Finally, there is a subtle limitation around Claude’s self-knowledge of its own Artifact output. When you ask Claude to modify an Artifact, it works from the Artifact’s current content as seen by the model, not necessarily the version your UI displays — if you manually edit an Artifact (where supported), Claude may not see the changes on the next turn. Important: keep edits in one place when possible to avoid drift between the UI copy and the model’s understanding.

A related point is that Claude treats each Artifact as a discrete named object in its internal state. If you ask for a brand new app without explicitly asking it to “replace the existing Artifact,” Claude may open a new Artifact alongside the old one. This is sometimes exactly what you want and sometimes not; the easiest fix is to phrase requests as “update the Artifact to…” rather than “build a version where…”. Note that older Artifacts in a long conversation remain scrollable in the sidebar but may fall out of Claude’s active context as newer turns accumulate.

Conclusion

• Artifact is Claude’s dedicated side panel for generated code, documents, and interactive UI.
• Works with Markdown, HTML, React, SVG, Mermaid, and plain code.
• Auto-triggered by Claude when output is long, reusable, or benefits from a live preview.
• Supports iterative update-in-place and full rewrites depending on scope of request.
• Sandboxed: no localStorage, limited network access, Tailwind core utilities only in React.
• Comparable in spirit to ChatGPT Canvas but stronger on live React/HTML rendering.
• Free to use on all plans; share links and higher quotas on paid tiers.

References