Claude artifacts — the complete guide

Anthropic’s Claude has a feature most other AI chatbots don’t: artifacts. Self-contained code, HTML, React components, Mermaid diagrams, and SVG that render inline in the chat as their own units.

Used well, artifacts turn Claude into a one-shot prototyping tool. Used badly, they’re glorified code blocks. Here’s the complete guide.

What an artifact actually is

Anthropic’s documentation calls artifacts “substantial, self-contained content that users will likely modify, iterate on, or take outside the conversation.” In practice they cover six types:

1. Code — Python, TypeScript, Rust, Go, etc. Rendered with syntax highlighting.
2. Markdown documents — long-form prose, reports, drafts.
3. HTML pages — single-file landing pages, dashboards, prototypes.
4. React components — live-rendered components with full reactivity.
5. Mermaid diagrams — flowcharts, ER diagrams, sequence diagrams. Rendered to SVG inline.
6. SVG images — vector graphics generated from prompts.

Claude decides when to make something an artifact based on length and self-containedness. You can nudge the decision by saying “make this an artifact” or “as a self-contained component”.

Why artifacts matter for export

The artifact has its own lifecycle:

• It renders separately from the conversation prose.
• You can edit it inline (ask Claude to “iterate on the artifact”).
• It has a stable identifier across edits.

This makes export tricky. If your export tool just dumps the conversation as Markdown, the artifact arrives as either (a) inline code blocks losing the renderable form, or (b) missing entirely.

Good export tools treat artifacts as first-class.

How ChatExport AI handles artifacts

Three modes, picked per export:

Mode 1: Inline (default for PDF, Word)

The artifact content is inlined into the conversation transcript at the position where it appeared. Code keeps syntax highlighting. Mermaid diagrams render as embedded SVG. HTML pages render as a screenshot of the rendered page.

Best for: handing the export to someone who just wants to read the conversation.

Mode 2: Separate files (default for ZIP, Markdown)

The artifact is saved as a standalone file:

• Code → chat/<artifact-name>.py (or .ts, .rs, etc.)
• HTML → chat/<artifact-name>.html
• React → chat/<artifact-name>.jsx
• Mermaid → chat/<artifact-name>.mmd plus chat/<artifact-name>.svg
• SVG → chat/<artifact-name>.svg

The transcript references each artifact via a relative link.

Best for: handing the artifact to a developer who wants to run / modify the code.

Mode 3: Both

ZIP mode includes both: the transcript inlined for reading, the artifacts as separate files for running.

Best for: archival. Six months later you’ll appreciate having both views.

Artifact gotchas

Multiple revisions

If you iterate on an artifact (“make the button bigger”), Claude updates the artifact in place. Older revisions disappear from the conversation view but are retrievable via the artifact’s history panel.

ChatExport AI captures the current version of each artifact at export time. If you want all revisions, ask Claude to “show me v1, v2, v3 of the artifact” before exporting; the revision history then exports as separate code blocks.

Unfinished artifacts

If Claude is mid-stream when you hit Export, the partial artifact gets included as-is. Wait for the streaming indicator to finish before exporting.

React artifact dependencies

React artifacts can import from a small whitelist (React, Tailwind via classnames, lucide-react icons). The export captures the JSX source; the consumer needs to set up the same dependencies if they want to run it locally.

ChatExport AI’s exports include a README.md inside the ZIP for React artifacts noting the required dependencies, plus a snippet showing how to scaffold a Vite + React project that runs the artifact.

Mermaid diagrams rendering offline

The SVG export of a Mermaid diagram is fully self-contained — opens in any browser, no internet needed. The .mmd source export lets you edit and re-render later.

Workflow: from Claude prototype to shipped code

The flow that’s worked best for me:

1. Prompt Claude to build the prototype as a React artifact. Iterate inline 2-3 times.
2. Export the conversation as a ZIP. The transcript explains the design decisions; the artifact files are runnable.
3. Drop the artifact into a real Vite project. Add the listed dependencies. The component runs as-is in the project.
4. Replace the prompt-style prose comments with real JSDoc. Add tests. Ship.

Total time from prompt to running locally: ~5 minutes. The export is what makes that fast — it’s the bridge between “Claude built this” and “this is in my repo”.

Try it

Open Claude. Ask it to “build me a self-contained HTML page that’s a Mermaid diagram of a user signup flow”. When the artifact renders, export the conversation as a ZIP via ChatExport AI. The ZIP contains the transcript plus a standalone .html plus the .mmd source plus the rendered .svg.

That’s the full Claude artifact workflow.

Related

• Claude export guide.
• Claude to Markdown — Markdown-only flow, artifacts as separate files.
• For developers — code-faithful AI export workflows.