What Are Artifacts?

Artifacts are Claude's way of presenting structured, reusable outputs alongside the conversation — rather than embedded in the chat thread. When Claude generates code, a document, a React component, or an SVG, it appears in a dedicated panel on the right side of the screen that you can view, edit, run, copy, and iterate on independently.

When the Artifacts Panel Appears

Claude automatically creates an Artifact when it detects that the output is:

• A standalone piece of content that makes more sense viewed separately (code files, full documents)
• Something you're likely to want to copy, download, or use directly
• Renderable — code that can run, Markdown that can be formatted, SVG that can be visualised
• Substantial enough that embedding it in the chat thread would be disruptive

Short inline code snippets in conversation responses are not typically Artifacts — they're just formatted code in the chat. The Artifact panel appears for complete files, long documents, interactive components, and anything Claude judges to be a deliverable rather than an explanation.

Types of Artifacts

How to Request an Artifact Explicitly

Claude decides automatically when to use an Artifact, but you can also request one explicitly:

• "Create a code artifact with a Python script that..."
• "Write this as a document artifact I can download."
• "Build this as a React component I can see and interact with."
• "Generate an SVG diagram of this architecture."

If Claude is giving you inline responses when you want a clean Artifact, just ask: "Put this in an Artifact."

Viewing, Copying, and Downloading

Once an Artifact appears in the panel, you can:

• Copy: Copy the entire Artifact content to your clipboard with one click
• Download: Download the Artifact as a file (e.g. script.py, component.tsx, diagram.svg)
• Preview: For HTML, React, and SVG Artifacts, toggle between the code view and the rendered preview
• Share: Share a link to the Artifact (the recipient sees it without context from the conversation)

Artifact Versioning

When you ask Claude to update an Artifact, it creates a new version in the same panel — preserving the history. You can:

• Navigate between versions using the version arrows in the Artifact panel
• Compare the current version to a previous one
• Ask Claude to "revert to version 2" if a later change made things worse

This versioning makes Artifacts a useful iterative development environment for complex outputs — you can build up a document or component through many rounds of feedback without losing earlier working states.

Checklist: Do You Understand This?

• Artifacts are separate panel outputs for structured, reusable content — code, documents, React components, SVGs
• Claude decides when to create an Artifact automatically, but you can request one explicitly
• Artifacts can be copied, downloaded, previewed (for renderable types), and shared via link
• Updating an Artifact creates a new version — previous versions are navigable in the panel
• Short inline code in conversation responses is not an Artifact — Artifacts are complete, deliverable outputs