What are Claude artifacts?

What a Claude artifact actually is

When you ask Claude to build something self-contained — a landing page, a PRD, a data chart, a flowchart — it doesn't print the result into the conversation. It renders it in a separate panel to the right of the chat, and that rendered output is the artifact.

The loop is: describe → see → react → refine. You say "make the header bigger" or "switch the chart to a bar graph," and the artifact updates without you touching a code editor or reloading a browser tab. Over half a billion artifacts have been created since Anthropic launched the feature, according to their April 2026 announcement — which says something about how many people found the make-and-iterate loop useful.

Artifacts appear automatically when what Claude produces is significant and self-contained — typically over 15 lines — and something you'd want to edit, reuse, or share later. You don't need to invoke a special command.

The six artifact types

Understanding which type you're working with matters, because each behaves differently:

HTML pages. A complete rendered web page — structure, styling, interactivity. Useful for landing pages, calculators, or any single-page prototype you want to click through. The file stands alone, no dependencies needed.

React components. Interactive components with hooks and state, rendered live. Click buttons, fill forms, see data update. This is the type most makers and PMs reach for when they want a working prototype rather than a mockup.

Markdown documents. Formatted text — headers, tables, lists — rendered cleanly. Good for PRDs, briefs, one-pagers: things you'd write in Notion or Google Docs but want Claude to draft and iterate.

Code snippets. Raw code in any language, syntax-highlighted. Not rendered interactively like React or HTML — this is for logic you'll copy into a real project.

SVG images. Vector graphics: icons, diagrams, simple illustrations. Scales cleanly; works for flowcharts and simple marketing graphics, less so for anything complex where the SVG gets unwieldy.

Mermaid diagrams. Flowcharts, sequence diagrams, entity relationship charts — described in text, rendered as diagrams. Useful when you need a visual of a process or system without needing a drawing tool.

The common thread across all six: output that's better seen than read as raw text. If what Claude produces is a list of ideas or a conversational explanation, it stays in the chat. If it's a discrete deliverable, it becomes an artifact.

What makers and PMs use them for

The efficiency gain is most obvious if your normal workflow involves context switching. Before artifacts, building an interactive prototype meant Claude in one tab, CodePen or a local dev server in another, a Markdown previewer in a third. Each iteration required copying code, pasting it somewhere else, reloading.

Artifacts eliminate those handoffs. The iteration is conversational: "add a dark mode toggle," "change the primary color to blue," "add a second tab for Q2 data." The panel updates in place.

Some concrete workflows that show up repeatedly for makers and PMs:

• Rapid prototypes before design. Ask Claude to build a grayscale app screen as a React artifact. Stakeholders click through a working prototype before a designer touches Figma.
• Interactive PRDs. A Markdown artifact that you iterate section by section — "expand the success metrics," "add a risks table" — in the same conversation where you drafted the strategy.
• Data charts from pasted data. Paste a spreadsheet into the chat, ask for a bar chart by quarter. The artifact renders it; you refine the axis labels and title without opening a spreadsheet app.
• Single-use tools. A calculator for a specific formula, a word-count tool for a specific format, an interactive rubric for a review process. Things that would take an afternoon to build in a real codebase but take ten minutes as an HTML artifact.

Where artifacts fall short

Two gaps are worth being direct about, because they show up the moment you try to use an artifact beyond your own Claude session.

You can't type directly into the artifact. Unlike ChatGPT Canvas, which lets you highlight a sentence and edit it inline, Claude's artifact panel is read-only. Changes go through the chat. If you're a writer who wants to make targeted edits yourself rather than asking Claude for each one, Canvas handles that better.

There's no built-in way to collect feedback. An artifact is a preview, not a destination. Once it's ready to show a client, a teammate, or a stakeholder, your options narrow: copy the code out (most people can't open a raw file), take a screenshot (loses interactivity and layout), or publish it to a URL. Even after publishing, there's no mechanism for someone to point at a specific element and leave a note — so feedback ends up in email threads, screenshots with arrows, or chat messages that reference things like "the button in the top right." That's the same workflow the artifact was meant to replace.

Both of these are about what happens after you make something. The make-and-iterate part is solid; the hand-off-and-review part is where you hit the edges.

Artifacts vs projects

A distinction that causes confusion: an artifact is a single generated thing — one app, one doc, one chart. A project is a Claude workspace that persists context, files, and instructions across many conversations. You build artifacts inside projects; they're not alternatives to each other. If you're working on something ongoing — a product you're iterating week to week, a client whose brand context Claude should always know — you'd use a project to hold that context, and artifacts are what Claude produces along the way.

Making an artifact shareable and commentable

That's the gap between "I made it" and "the team signed off on it": a URL that renders anywhere, a way to point at the specific thing, and a loop back to the agent. Whatever tool you use to close that gap, it's the workflow worth building.