Artifacts are one of Claude's most distinctive features — they create standalone, interactive content alongside the conversation.

What Are Artifacts?

When Claude generates substantial content (code, documents, visualizations), it can create an Artifact — a separate, editable panel that appears next to the chat. Think of it as a live workspace.

Types of Artifacts

• Documents — Markdown documents, reports, articles, plans
• Code — Complete, runnable code files in any language
• HTML/CSS/JS — Interactive web pages and prototypes rendered live
• SVG — Vector graphics and diagrams
• Mermaid diagrams — Flowcharts, sequence diagrams, architecture diagrams
• React components — Interactive UI components rendered in the browser

Powerful Artifact Workflows

1. Iterative Document Editing

1. Ask Claude to write a report → Artifact created
2. "Make the executive summary more concise" → Artifact updated
3. "Add a table comparing Option A and B" → Artifact updated
4. Final document is clean and ready to export

2. Interactive Prototypes Ask Claude to build an interactive prototype:

"Create an interactive calculator for mortgage payments with inputs for loan amount, interest rate, and term"

Claude generates a working HTML/CSS/JS application right in the Artifact panel.

3. Data Visualization

"Create a bar chart comparing Q1-Q4 revenue: Q1=$1.2M, Q2=$1.5M, Q3=$1.8M, Q4=$2.1M"

Claude generates an interactive chart using React and SVG.

Tips for Artifacts

• Ask for "an artifact" explicitly if Claude doesn't create one automatically
• Request specific formats: "Create this as a Mermaid diagram"
• You can copy, download, or remix any artifact
• Artifacts persist within the conversation for further iteration