Last updated: June 2026

Claude Artifacts:What They Are and How to Use Them

Claude Artifacts are standalone, editable outputs that Claude generates in a panel next to your chat. Instead of leaving a long document, a code file, or a working app stuck inside the conversation, Claude opens it in its own window where you can preview it, edit it in place, version it, and publish it as a shareable link. They work on the free plan, support documents, code, HTML sites, diagrams, and interactive React components, and are most useful for any output you expect to revise more than once.

This guide is written for people who produce things: writers, marketers, and solo builders. The focus is the prompts that turn artifacts into useful work, not just the buttons.

How to Use Them Copy the Prompts

What Are Claude Artifacts?

A Claude Artifact is a dedicated window that holds a single, self-contained output. When you ask Claude for a long document, a piece of code, a diagram, or a small app, it does not dump the result into the chat. It opens an artifact panel beside the conversation. That panel has a Preview tab that shows the output running or rendered, and a Code or source view you can read and copy.

Anthropic triggers an artifact when the content is, in its words, significant and self-contained, typically more than 15 lines, and something you are likely to want to edit, iterate on, or reuse. A two-line answer stays in the chat. A 600-word draft becomes an artifact you can revise.

The reason this matters: chat is where ideas are messy and disposable. An artifact is where a deliverable lives. You can edit a passage in place, switch between versions if a rewrite goes wrong, and publish the finished thing as a link. For anyone who writes or builds, that is the difference between talking about the work and actually shipping it.

One-sentence definition: Claude Artifacts are editable, versioned, shareable outputs that open in their own panel beside the chat, so a draft or tool becomes a deliverable instead of a buried message.

How Do You Use Claude Artifacts?

Setup takes under a minute. The skill is in the prompting, which comes after.

Turn artifacts on

Open Claude, go to Settings, then Capabilities, and toggle Artifacts on. If you want artifacts that run code or produce downloadable files, also enable Code execution and file creation. Artifacts are available on every plan, including the free tier.

Prompt for something substantial

You do not have to say the word artifact. Ask for a draft, a tool, a page, or a diagram. When the output is long enough and self-contained, Claude opens it in the panel automatically. If it stays in the chat and you want it as an artifact, add: Put this in an artifact so I can edit it.

Preview, then edit in place

Toggle between Preview and the source view in the panel. In a Markdown document, highlight a passage and choose Edit with Claude to rewrite just that section. Every change is versioned, so you can roll back with the version selector if a rewrite goes the wrong way.

Publish or download

Use the publish option in the panel header to generate a public link anyone can open and interact with, or embed it on a site. For code and document artifacts you can download the source. Published artifacts are public, so keep private data out of anything you publish.

What Can Claude Artifacts Build?

Six artifact types matter most. Here is what each one is good for if your work is content rather than software.

Artifact type	What it is good for
Markdown documents	Drafts, outlines, briefs, and SOPs you can edit in place and version.
Single-page HTML sites	Landing pages, lead-magnet pages, and one-page portfolios without a code editor.
Interactive React components	Quizzes, calculators, and small interactive tools to embed or share.
Code snippets	Scripts and automations you can copy out and run elsewhere.
SVG images	Simple logos, icons, and social graphics defined in editable code.
Diagrams and flowcharts	Content workflows, funnel maps, and process diagrams from a plain-text description.

The pattern that holds across all six: use an artifact for anything you will touch more than once. A throwaway answer belongs in the chat. A draft, a page, a tool, or a workflow map belongs in an artifact where you can version and publish it.

Weak Prompt vs Strong Prompt

The artifact feature is only as good as the prompt behind it. Most disappointing artifacts trace back to a vague request. Here is the same goal asked two ways.

Weak prompt

Make me a content calendar.

Claude guesses the format, the timeframe, the channels, and the columns. You get a generic table you have to rebuild. No clear deliverable, so it may not even become an artifact.

Strong prompt

Create an artifact: an interactive 4-week content calendar as a React component. Columns: date, channel, hook, status. Pre-fill 3 LinkedIn posts and 1 newsletter per week on the theme of AI for writers. Let me edit cells and tick status. Mobile-friendly. I will publish the link.

Format, scope, columns, sample content, interactivity, and the end goal are all specified. You get a working tool on the first pass, with little rework.

The rule: name the artifact type, the structure, a sample of the content, and what you will do with it. Specificity is what separates a usable artifact from one you throw away.

Copy-Paste Artifact Prompts

Fill-in-the-blank templates for the four artifacts writers and builders reach for most. Replace the bracketed slots and paste into Claude.

Editable document you can iterate on

Create an artifact: a 700-word blog post outline on [TOPIC] for an audience of [AUDIENCE]. Use H2 sections, one sentence of intent per section, and a list of 3 supporting points under each. Keep it as an editable Markdown document so I can revise sections in place.

Interactive tool to share

Build an artifact: a single-page interactive [TOOL TYPE, e.g. headline analyzer] as a React component. Inputs: [INPUTS]. Output: [WHAT IT SHOULD RETURN]. Style it clean and mobile-friendly. I want to publish it as a shareable link.

Landing page without a code editor

Create an artifact: a single-page HTML landing page for [OFFER]. Sections: hero with headline and subhead, three benefit blocks, one testimonial placeholder, and a single email-capture call to action. Inline CSS only, no external files. I will publish and embed it.

Process diagram from plain text

Create an artifact: a flowchart of my content production process. Steps: [LIST YOUR STEPS]. Show decision points where I [DESCRIBE THE DECISION]. Render it as a diagram I can screenshot.

Want a full library of fill-in-the-blank prompts like these, organised by task? The prompt template library has more, and the free Prompt Grader scores your own version and shows you exactly what to fix.

Four Failure Modes (and How to Avoid Them)

Most artifact frustration comes from a handful of avoidable mistakes. Here they are.

1. No artifact appears

Claude only opens an artifact when the output is substantial and self-contained, usually more than 15 lines. Short requests stay in the chat. Fix: make the deliverable bigger or ask explicitly, Put this in an artifact. If nothing ever appears, the feature is off in Settings, Capabilities.

2. Regenerating the whole thing for a small change

Asking Claude to redo the entire artifact to fix one paragraph wastes time and risks changing parts you liked. Fix: in a document, highlight the passage and use Edit with Claude. For other types, tell Claude exactly which section to change and leave the rest untouched.

3. Publishing private data

A published artifact is public to anyone with the link. Writers paste client names, draft pricing, or unreleased work into an artifact and then publish it. Fix: treat publish as posting to the open web. Strip anything confidential before you generate the link.

4. Treating an artifact like a project workspace

An artifact is one output. It does not carry context across separate chats. If you keep re-explaining your brand, audience, or style every session, you want a workspace, not an artifact. Fix: use a Claude Project to hold the persistent context, and create artifacts inside it.

The Feature Is Free. The Skill Is the Prompt.

Artifacts turn Claude into a place where your drafts and tools actually ship. But the gap between a throwaway artifact and a useful one is entirely in how you ask. Prompt Writing Studio teaches the framework behind every strong prompt on this page, with a library you can use across writing, marketing, and building.

Grade Your Prompt Free

Frequently Asked Questions

Common questions about Claude Artifacts, answered

What are Claude Artifacts?+

Claude Artifacts are standalone, editable outputs that Claude generates in a dedicated panel next to your chat. Instead of burying a long document, a code file, or a working app inside the conversation, Claude opens it in its own window where you can preview it, run it, edit it, and reuse it. Anthropic creates an artifact automatically when the content is significant and self-contained, typically more than 15 lines, and is something you are likely to want to edit or iterate on. Supported types include Markdown documents, code snippets, single-page HTML sites, SVG images, diagrams, and interactive React components.

How do I turn Claude Artifacts on?+

Open Claude, go to Settings, then Capabilities, and toggle Artifacts on. To build artifacts that run code or create downloadable files, also enable 'Code execution and file creation'. Once enabled, you do not have to ask for an artifact by name. When you prompt Claude to write a document, build a tool, or generate code, it opens the result in the artifact panel on its own.

Are Claude Artifacts free?+

Yes. Artifacts are available on the Free, Pro, Max, Team, and Enterprise plans. Some advanced behaviour is gated to paid tiers: persistent storage for stateful apps (up to 20 MB per artifact) and MCP connections to external services require Pro or above. For writers building documents, outlines, and simple interactive tools, the free tier covers most of what you need.

How do I share or publish a Claude Artifact?+

Open the artifact, then use the publish option in the panel header to generate a public link. Anyone with the link can view and interact with the artifact, and you can embed it on a website. You can also download the source if it is a code or document artifact. Published artifacts are public, so do not publish anything containing private data, client information, or unreleased work.

What is the difference between Claude Artifacts and Claude Projects?+

An artifact is a single output: one document, one app, one diagram. A Project is a workspace that holds many chats and reference files around a shared goal, with persistent context across conversations. You create artifacts inside chats; you organise those chats inside Projects. Use an artifact when you want one deliverable. Use a Project when you want Claude to remember the context behind a whole body of work. See our Claude Projects guide for the workspace side.

Can Claude Artifacts edit a document in place?+

Yes. In a Markdown document artifact you can highlight a section of text and choose 'Edit with Claude' to revise just that passage without regenerating the whole document. Every change is versioned, so you can switch between earlier versions using the version selector if a rewrite goes the wrong way. This makes artifacts far better than chat for any draft you expect to revise more than once.

Why is Claude not creating an artifact for my request?+

Claude only opens an artifact when the output is substantial and self-contained, usually more than 15 lines, and reusable. Short answers, quick explanations, and conversational replies stay in the chat. If you want an artifact and are not getting one, ask explicitly: 'Put this in an artifact so I can edit it.' If artifacts still do not appear, confirm the feature is toggled on in Settings, Capabilities.

More Claude Guides

Keep going with the rest of our practical Claude coverage.