Claude artifacts are interactive side-panel workspaces in Claude where the model renders self-contained outputs (HTML pages, React components, SVG, Mermaid diagrams, code, and documents) so you can iterate, preview, and share them without the result getting buried in chat history. Anthropic shipped artifacts in June 2024 alongside Claude 3.5 Sonnet, expanded them with AI-powered features later that year, and added Live Artifacts (MCP-connected, real-time data) in May 2026.
If you want the short version: artifacts are how you turn a Claude conversation into something you can actually use, not just read.
This guide covers every angle: what artifacts are, which types exist, how to trigger them reliably, what changed with Live Artifacts, what the Publish button actually does, common use cases with copy-paste prompts, and how to ship an artifact as a real URL on your own domain.
Quick facts
| Question | Answer |
|---|---|
| Launched | June 2024 (Claude 3.5 Sonnet) |
| Available on | All Claude plans: Free, Pro ($20/mo), Team, Enterprise |
| Where they appear | Right-side panel in claude.ai and the desktop app |
| What they render | HTML, React, SVG, Mermaid, code in 20+ languages, markdown documents |
| Triggered when | Output is self-contained and substantial (typically 15+ lines) |
| Sharing | Publish button produces a claude.ai/public/artifacts/<uuid> URL |
| Live Artifacts | Added May 2026: MCP connectors to Notion, Slack, Sheets, Gmail |
| Cost to publish | Free, no extra plan needed |
What artifacts actually are
Open Claude, ask for something complex (a working tool, a chart, a landing page, a long document) and you’ll notice the chat splits in two. The conversation stays on the left, the output moves into a dedicated panel on the right. That panel is the artifact.
Three things matter about this design choice:
- The output lives in its own surface. When Claude generates a 200-line React component or a five-page document, you don’t have to scroll up through chat to find it. The artifact stays pinned and readable.
- You iterate on it without losing the preview. Type “make the buttons bigger” and Claude rewrites the artifact in place. The rendered version updates live for HTML, React, SVG, and Mermaid.
- It’s a real object you can share. Each artifact gets an internal ID. You can publish it, embed it back into other chats, or reference it from a Project.
The official trigger condition from the Claude Help Center is “content that is significant and self-contained, typically over 15 lines.” In practice Claude is also more likely to spawn an artifact if your prompt sounds like you want a finished thing rather than a fragment (“build me a…” vs “explain how to…”).
The artifact types
Artifacts have an explicit MIME type behind the scenes. You don’t pick it; Claude does. But knowing the types helps you predict what you’ll get.
| Type | What it is | Renders as | Typical example |
|---|---|---|---|
text/html | Standalone HTML page | Live web page in the panel | Landing page, calculator, mini-game |
application/vnd.ant.react | React component (JSX) | Compiled and rendered live | Dashboards, interactive forms |
image/svg+xml | SVG markup | Vector image preview | Logos, diagrams, icons |
application/vnd.ant.mermaid | Mermaid diagram source | Rendered flowchart or graph | Architecture diagrams, sequence flows |
application/vnd.ant.code | Code in any language | Syntax-highlighted block | Python scripts, SQL queries, config files |
text/markdown | Markdown document | Rendered document with formatting | Blog drafts, specs, plans |
You can ask for a specific type if you know what you want (“give me an SVG of a coffee cup” or “write a React component”). Claude usually picks correctly without being told.
How to create an artifact
There’s no button. You don’t toggle artifact mode on. You just prompt for something that warrants one. Some patterns that reliably trigger an artifact:
- “Build me a working X.” A working Pomodoro timer, a working budget calculator, a working flashcard quiz. The word “working” pushes Claude toward HTML or React.
- “Draft a complete X.” A complete pricing page, a complete project plan, a complete API spec. Pushes toward markdown or HTML.
- “Show me a diagram of X.” Almost always produces Mermaid or SVG.
- “Write a Y in Z lines or more.” “Write a Python data pipeline in 200 lines or more.” The length forces the substantial-and-self-contained threshold.
- “Make this iterable.” Tell Claude up front you want to iterate: “Build a landing page hero, I’ll want to tweak colors and copy after.” Cues an artifact instead of an inline answer.
The opposite also works. If you want a quick inline answer and Claude keeps spawning artifacts you don’t need, say “answer inline, don’t create an artifact.”
Once the artifact exists, refining it is normal chat. “Make the colors darker.” “Move the CTA above the fold.” “Add error handling to the API call.” Claude rewrites the artifact in place and the preview updates.
Live Artifacts (May 2026)
Anthropic shipped Live Artifacts in May 2026. The headline addition: artifacts can now connect to MCP-enabled services and pull live data.
Out of the box, the supported connectors include:
- Notion: Pull databases, pages, or query results
- Slack: Read messages from channels, summarize threads
- Google Sheets: Read or write rows, run formulas
- Gmail: Read recent messages, search threads
This turns the artifact panel from a renderer into a small live dashboard. You can ask Claude to build “a daily summary view that shows today’s standup messages from #general and the top 3 tasks from my Notion database,” and the artifact stays connected. Refreshing the artifact re-pulls the data.
Two practical notes:
- Live Artifacts work on the desktop app first. Web has caught up for most connectors but the desktop integration is smoother.
- The connection is per-artifact. Reset by sharing the artifact link with someone who doesn’t have the MCP connection set up, and the connector data won’t appear for them. They’ll see the artifact shell but the live values fall back to placeholders.
If you’re building something for yourself, Live Artifacts is genuinely useful. If you want other people to use the result, it’s more limited because the live data is your data.
Publishing an artifact (and what the URL actually is)
Every artifact has a Publish button in the top-right corner of the panel. Click it and Claude generates a public URL of the form:
https://claude.ai/public/artifacts/<uuid>This is the part most guides skip, so here’s the full picture.
What publishing does:
- Creates a static snapshot of the artifact at that moment
- Makes the URL accessible without a Claude account
- Adds a “Created with Claude” header bar at the top of the page
- Lets you unpublish at any time (the URL returns 404)
- Allows you to update the artifact and re-publish, replacing the snapshot
What publishing does not do:
- It does not give you a URL on your own domain
- It does not remove the Anthropic header from the page
- It does not let you customize the OG image, favicon, or meta tags
- It does not provide analytics or visitor data
- It does not promise the URL will be live forever (Anthropic can change the format, deprecate the feature, or take pages down)
- It does not work for Live Artifacts that depend on your private MCP connections
For sharing a quick prototype with a colleague, the Publish URL is perfect. For shipping something to actual customers, or anything you want indexed by Google, or anything you want on your own domain, you need a different deploy path. That’s the next section.
Getting an artifact onto your own domain
You have three options:
- Copy the source by hand. Open the artifact, click the code view, copy the HTML or JSX, paste into a fresh Vercel/Netlify/your-own-server project, deploy. Works, but you’ve now signed up for the DevOps loop you were trying to avoid.
- Stick with the claude.ai URL. Use the Publish button, accept the Anthropic branding bar, hope it stays online. Fine for prototypes, awkward for production.
- Use a deploy tool that ingests the artifact URL. Paste the URL into a service that extracts the source, packages it into a static site, and hosts it on infrastructure you control. You get the speed of the Claude publish flow and the durability of a real hosting setup.
We built InstaPods Import so option 3 is one paste. It takes a Claude artifact URL, fetches the source, picks the right preset (static for HTML, static with a React wrapper for JSX), creates a real Linux server with SSL, and pushes the files. Total time from URL paste to live URL on your own domain is about ten seconds. Free pod on the Launch plan, no card needed.
The point is not that you have to use ours. The point is that this step exists and you’ll keep needing it once you start treating artifacts as starting points for real things.
Common use cases (with prompts)
These are the patterns we see work consistently. Each one is a prompt you can paste into Claude and get a useful artifact back inside a minute.
1. Marketing landing page hero
“Build a working hero section for a SaaS product called Acme. Headline, subhead, two CTAs (primary in green, secondary outlined), three feature bullets, a screenshot placeholder. Use Tailwind via CDN. Dark theme.”
Claude returns a complete HTML artifact you can iterate on. Useful for spec’ing what you want before you build it in your real codebase.
2. Interactive calculator
“Build a working mortgage calculator. Inputs: loan amount, interest rate, term in years. Output: monthly payment, total interest, amortization table. Vanilla JS, no dependencies.”
You get a working tool. Useful for quick internal tools or as a customer-facing widget.
3. Architecture diagram
“Draw a Mermaid sequence diagram showing how a webhook flow works: third-party service POSTs to our endpoint, we verify signature, we enqueue a job, the worker processes it, we emit a database event.”
Returns a Mermaid artifact you can drop into docs or copy as SVG.
4. Long-form document draft
“Write the first draft of a 2,000-word blog post titled ‘X.’ Use H2 sections, include a table comparing approaches, end with an FAQ block.”
Returns a markdown artifact you can edit in place. Faster than alternating between chat and a separate doc.
5. SQL query explainer
“Given this schema [paste], write a query that returns the top 10 customers by lifetime value, with a CTE for repeat-buyer logic and comments explaining each step.”
Returns a code artifact. Easier to edit than an inline answer because the artifact stays open while you ask follow-up questions.
6. React component prototype
“Build a working multi-step form in React. Three steps: email, plan selection, payment fields (mocked). Tailwind. Form validation. Progress bar at the top.”
Returns a React artifact that compiles and runs live in the panel. Use it to validate the UX before building it in your real app.
7. SVG asset
“Draw an SVG logo for a company called Pod. Geometric, two colors, looks like a tilted hexagon with a leaf.”
Returns an SVG artifact. Iterate on color, shape, and proportions in chat.
8. Internal tool
“Build a working CSV-to-JSON converter. Drop a CSV file, get the JSON output. All client-side, no upload.”
Returns an HTML artifact with a working file input and JS converter. Useful for internal team tools you don’t want to write from scratch.
9. Decision flowchart
“Mermaid flowchart for deciding whether to use Postgres, SQLite, or DynamoDB for a new project. Cover read volume, write volume, schema flexibility, team size.”
Returns a Mermaid artifact. Easier than drawing in a separate tool.
10. Pricing page mockup
“Build a complete pricing page with three tiers (Free, Pro $20, Team $50), feature checkmarks, a comparison table, FAQ. Single HTML file, Tailwind.”
Returns a polished page artifact. Useful for stakeholder review before designing it properly.
Pricing and model availability
Artifacts work on every Claude plan, including the free tier. The differences between tiers are:
- Free: Works, but rate-limited. Plan to hit limits after 5-10 substantial messages per day.
- Pro ($20/mo): Higher rate limits, access to Claude 3.7 Sonnet and Opus models, longer context window. The sweet spot for most builders.
- Team / Enterprise: Higher per-seat limits, shared Projects, admin controls. Worth it if a team uses Claude collectively.
Live Artifacts is included on every paid tier and most of the free tier (some MCP connectors require an account-level enable). Publishing is included free everywhere.
Model choice affects artifact quality. Claude 3.7 Sonnet is the current default for most artifact work because it produces clean HTML and React that runs first try. Opus is overkill for simple artifacts but worth using for long documents or complex multi-file outputs.
Artifacts vs the alternatives
ChatGPT canvas, v0.dev, Bolt, and Lovable all occupy a similar space (AI-rendered interactive workspaces) but with different tradeoffs. The closest comparison is ChatGPT canvas, which launched in October 2024 with a heavier focus on text editing and a lighter focus on interactive rendering.
We wrote a full side-by-side in Claude artifacts vs ChatGPT canvas, but the one-line summary: Claude artifacts win when you want to see something running immediately. Canvas wins when you want to edit text or code in place.
v0, Bolt, and Lovable are different categories. They produce React/Next.js projects optimized for handoff to a real codebase, not single-file artifacts you preview in a side panel. If your output is going to live in a git repo, those tools fit better. If your output is a one-pager you want to share or iterate on conversationally, artifacts fit better.
FAQ
What are Claude’s artifacts?
Claude artifacts are interactive side-panel workspaces inside the Claude chat interface. When Claude generates substantial or self-contained content (HTML, React, SVG, Mermaid, code, or documents), it opens in a dedicated panel where you can preview, edit, and share the output. Anthropic launched artifacts in June 2024.
Is Claude artifacts free?
Yes. Artifacts work on every Claude plan, including the free tier. You’ll hit rate limits faster on free (fewer messages per day, smaller context window), but every artifact feature including publishing and Live Artifacts works without paying.
Can Claude code make artifacts?
Yes. Claude can generate code artifacts in any major language: HTML, JavaScript, TypeScript, Python, SQL, Rust, Go, Java, C, and more. For visual outputs (HTML, React, SVG, Mermaid), Claude renders the artifact live in the panel. For non-visual code (Python scripts, SQL queries), it appears as a syntax-highlighted code block you can copy.
What does it mean to publish a Claude artifact?
Publishing turns your artifact into a public web page at claude.ai/public/artifacts/<uuid>. Anyone with the link can view and interact with the artifact without a Claude account. You keep control of the artifact in your own chat history and can unpublish it any time. The URL is hosted by Anthropic on claude.ai, not on your own domain.
What is the difference between Claude projects and artifacts?
Artifacts are individual outputs such as a document, a React component, or an SVG. Projects are a workspace that groups multiple chats and artifacts under shared instructions and uploaded reference files. You can create artifacts inside a project. The relationship is: projects are folders, artifacts are files inside them.
Are Claude artifacts the same as Live Artifacts?
Live Artifacts are a feature added on top of regular artifacts in May 2026. They let an artifact connect to MCP-enabled services (Notion, Slack, Google Sheets, Gmail) and pull live data. Every Live Artifact is also a regular artifact, but not every artifact is a Live Artifact. You opt in by connecting the relevant services to your Claude account.
How do I get a Claude artifact onto my own domain?
You have three options: copy the source manually and deploy it through your usual flow, use the Publish button and accept the claude.ai URL with Anthropic’s branding bar, or paste the artifact URL into a deploy tool that extracts the source and hosts it on infrastructure you control. InstaPods Import is the third option, takes about ten seconds end to end.
Can I edit a Claude artifact directly without re-prompting?
Not yet. Artifacts are edited through chat: you describe the change, Claude rewrites the artifact. There’s no direct cursor-in-the-code editing the way ChatGPT canvas offers. The tradeoff is that artifacts render faster and handle visual outputs better.
Next steps
If you’ve been using artifacts to prototype things and you want one of them on a real URL, you’re in the right place. Open InstaPods Import, paste any Claude artifact URL, and you’ll have a live site on your own subdomain in about ten seconds. Free pod on the Launch plan, no credit card.
If you’re choosing between Claude artifacts and ChatGPT canvas, read the side-by-side comparison next. It covers when each one wins and where they both hit walls.