A Claude Artifact is a self-contained piece of work Claude generates (HTML app, document, diagram, code file, quiz, dashboard) that opens in a dedicated panel next to the chat with a Preview tab that runs it live and a Code tab that shows the source. Start a new chat with Artifacts enabled, pick a category (Apps and websites, Documents and templates, Games, Productivity tools, Creative projects, Quiz or survey, Start from scratch), prompt Claude to build something concrete, toggle between Preview (eye icon) and Code (code-bracket icon) in the top-left of the panel, iterate by replying in the chat (the same Artifact updates in place), and click Publish in the header to generate a public URL. Every Artifact is saved to your Artifacts library and is free on every Claude plan. Verified May 2026.

How to Use Claude Artifacts: Build, Iterate, and Share (2026)

Claude Artifacts are Claude's most-cited differentiator versus ChatGPT and Gemini: a built-in panel that takes whatever Claude generates (interactive HTML app, document, diagram, code file, quiz, dashboard) and runs it live next to the chat. The panel has a Preview tab that renders the Artifact like a mini-browser and a Code tab that shows the full source with syntax highlighting. Every reply you send in the same chat iterates the same Artifact in place; the panel re-renders without you having to copy code anywhere. This guide walks the full Artifacts flow with screenshots from May 2026: the Artifacts library, the category picker, the prompt that triggers an Artifact, the Preview and Code tabs, iteration in chat, and the Publish & copy link flow. It also shows where the Claude module of AI Toolbox (formerly Claude Toolbox) complements Artifacts with full-text search across every Claude message (including the chats that produced your Artifacts), message-level bookmarks, and per-conversation TXT or JSON export. AI Toolbox is part of the same unified Chrome install that powers our ChatGPT and Gemini modules.

What Is a Claude Artifact?

A Claude Artifact is a self-contained piece of work Claude generates that opens in a dedicated panel next to the chat, with a Preview tab that runs the Artifact live and a Code tab that shows the source. Artifacts can be interactive HTML apps with vanilla JavaScript, full documents with formatted text and embedded images, Mermaid or SVG diagrams, single-file React components, or any other deliverable Claude can render. Every Artifact you generate is saved to your Artifacts library (a grid of cards sortable by last edited and filterable by published status) and can be re-opened, iterated on, or published with a shareable link without leaving Claude.

The reason Artifacts matter: most assistants give you a code block in chat that you have to copy out, paste into a local file, open in a browser, and tweak before you can see it run. Artifacts collapse that loop into one step. You ask, Claude builds, the result runs live next to the conversation. Iterations work the same way: you reply with what to change, Claude updates the same Artifact in place, the panel re-renders, you click into the new version.

Step 1: Pick an Artifact Category (Or Start From Scratch)

Open a new chat with Artifacts enabled. Claude shows a category picker with seven tiles: Apps and websites, Documents and templates, Games, Productivity tools, Creative projects, Quiz or survey, and Start from scratch. Each tile sets a small bit of context for what kind of Artifact Claude should produce, which improves first-shot quality. Apps and websites biases toward interactive HTML with state and event handlers; Documents and templates toward long-form structured text; Games toward Canvas-based loops; Productivity tools toward dashboards and trackers; Creative projects toward visual content; Quiz or survey toward a structured Q-and-A flow with score tracking. Start from scratch skips the bias entirely and trusts your prompt alone.

If your deliverable does not clearly fit one of the six categories, pick Start from scratch and be more explicit in your prompt about the format. The category picker is a hint, not a constraint, so a thorough prompt will override a wrong tile choice.

Step 2: Prompt Claude to Build Something Concrete

After picking a category, type a concrete prompt that names the framework, the features, and the topic. Vague prompts ("make me a quiz") get vague Artifacts; specific prompts get drop-in deliverables. The prompt that produced the screenshots in this guide was: "Build me an interactive HTML quiz with five questions about Chrome extension development. Self-contained vanilla JavaScript, styled with Tailwind via CDN, score tracking, a Submit button that reveals the correct answers, and a Restart button at the end. Topics: Manifest V3, content scripts, service workers, the chrome.storage API, and CSP rules." Claude pulls each of those constraints into the first version of the Artifact, so you start from a near-final state rather than a generic skeleton.

Prompt habits that work well for Artifacts: pick one framework (vanilla JS plus Tailwind via CDN, or single-file React with hooks), list 3 to 5 specific features, name any state that should persist (score, theme, current question), and end with one negative constraint (no external dependencies, no inline styles, no global variables). Claude will respect each constraint in the generated source and again on every iteration.

Step 3: Read the Artifact in Preview Mode

By default the Artifact panel opens on the right of the chat in Preview mode (eye icon top-left of the panel header). Preview runs the Artifact as a real browser would: clickable buttons, interactive forms, persisted state via localStorage, hover effects, the whole thing. For the quiz we generated, Preview shows a dark-themed page with the title "Chrome Extension Dev Quiz", five question cards (Manifest V3, Content scripts, Service workers, chrome.storage API, CSP rules), radio inputs for each option, and the Submit and Restart buttons live at the bottom. You can answer the quiz, submit it, see the correct answers highlighted, and restart, all without leaving the chat.

This is the moment that makes Artifacts feel different from "generate code and copy it". You are not reading the source to imagine what it would do; you are running it next to the prompt that made it. Bugs you would have caught at runtime in a normal workflow show up immediately, and you can describe them back to Claude without context-switching.

Step 4: Toggle to the Code Tab to Read the Source

Click the code-bracket icon in the top-left of the Artifact header to switch from Preview to Code. Code mode shows the full source of the Artifact with syntax highlighting: DOCTYPE, head with meta tags and Tailwind CDN script, body with semantic structure, the question container, the Submit and Restart buttons with their class names, and the inline JavaScript that drives the quiz logic. The Copy button in the top-right copies the entire source to your clipboard; the dropdown arrow next to it offers Download as HTML so you can save the Artifact as a standalone file you can host anywhere.

The Code tab is also where you go when you want to grab a specific snippet, learn a pattern Claude used, or audit how the Artifact works before publishing it. For the quiz Artifact, the source confirmed it is a single self-contained file: Tailwind via CDN, no external scripts, no global state beyond a questions array and the running score. That is exactly the kind of thing the prompt asked for, and you only really verify it by reading the Code tab.

Search every Claude chat that ever produced an Artifact. Claude's native search finds conversations by title. On paid plans (Pro, Max, Team, Enterprise), Claude also offers conversational RAG search via natural-language queries, scoped per-project. AI Toolbox (formerly Claude Toolbox) adds full-text search across all message content with an Exact match toggle, plus message-level bookmarks with scroll-to and highlight, and per-conversation TXT or JSON export. Free plan: 5 search results per query, 2 bookmark conversations. Premium: unlimited at $9.99 per month or $99 lifetime. Working across ChatGPT, Gemini, and Claude? All Access Lifetime ($149) covers all three modules and saves $148 versus three single-platform Lifetimes ($99 x 3 = $297). See the Claude module →

Step 5: Iterate by Replying in the Chat

Send a follow-up message in the same chat describing the change; Claude updates the existing Artifact in place rather than creating a new one. For our quiz Artifact we iterated with: "Now add a dark mode toggle in the top-right corner and persist the user's choice in localStorage. Keep the quiz logic unchanged." Claude returned a short summary of the change ("Done. A few notes on how it works..."), kept the existing five questions and answers intact, and the Artifact panel re-rendered with the new toggle in the corner. Claude also includes a short explanation of what it changed and any patterns worth knowing about (using the official cdn.tailwindcss.com script as you asked, persisting the dark-mode choice via localStorage, the official Tailwind production-warning suppressed for prototyping).

Iteration habits that work well: change one thing per reply (Claude regenerates the whole Artifact, so smaller changes are easier to verify), reference specific elements by their visible label or class name when you have one, and keep the original prompt's constraints in mind because iterations inherit them. If you want a clean break (different framework, different feature set), start a new chat rather than fight against an existing Artifact's accumulated context.

Step 6: Publish & Copy Link to Share

Click Publish in the Artifact header. The Publish artifact modal opens with the Artifact title (Chrome Extension Dev Quiz), the Anthropic Usage Policy reminder, and a Publish & copy link button. The modal explains exactly what publishing does: "Publishing this Artifact will make it accessible to anyone on the internet and potentially visible in search engine results. Your chat will remain private." Click Publish & copy link. Anthropic generates a public URL for the Artifact and copies it to your clipboard. The Artifact is now reachable at that URL for anyone you send it to; the chat that produced the Artifact stays private to your account.

Published Artifacts get a Published tag in the Artifacts library and accumulate view counts (our QR Code Generator example in the hero image has 25 views). You can unpublish at any time from the same modal, which invalidates the public URL and removes the tag. For private sharing inside Claude Team or Enterprise, use the Add to project option in the Artifact's three-dot menu instead, which keeps the Artifact inside your organization without exposing it on the open web.

How Claude Artifacts Compare to ChatGPT Canvas and Gemini Canvas

Claude Artifacts, ChatGPT Canvas, and Gemini Canvas are the three major "live build" surfaces across the big assistants in 2026. They overlap on the core idea (a panel that opens next to the chat and shows the deliverable live) but differ on what they specialize in. Claude Artifacts lead on interactive HTML apps with a real Preview that runs JavaScript and persists state, plus a public Publish & copy link flow that no one else matches. ChatGPT Canvas leads on long-form writing and code review with inline comment threads and per-line edits. Gemini Canvas leads on Docs-style collaborative editing and tighter integration with Workspace.

Common Pitfalls When Using Claude Artifacts

The most common mistakes are starting a new chat for every iteration (loses the Artifact), confusing Artifacts with Projects (they are different things), and using Publish & copy link for sensitive content (the URL is public). Artifacts iterate in place inside one chat; if you start a new chat with the same prompt, you get a new Artifact, not the next version of the old one. If you need persistent context across multiple Artifacts (a brand voice, a style guide, reference files), put the Artifact chats inside a Claude Project so they share Custom instructions and Files. And if the Artifact contains anything sensitive (API keys, internal data, customer info), do not Publish it; share the chat with your team via Add to project instead.

Other common pitfalls: prompting for an Artifact that needs external network calls (most public APIs Claude wants to call will fail in the Preview sandbox), expecting the Preview tab to run full Node.js (it runs browser-grade JavaScript, not server code), and assuming Download as HTML produces a fully optimized file (it gives you Claude's source verbatim; minify and bundle yourself for production).

Frequently Asked Questions

What is a Claude Artifact?

A Claude Artifact is a self-contained piece of work Claude generates (HTML app, document, diagram, code file, quiz, dashboard) that opens in a dedicated panel next to the chat. The panel has a Preview tab that runs the Artifact live and a Code tab that shows the source. Every Artifact is saved to your Artifacts library and can be re-opened, iterated on, or published with a shareable link.

How do I create a Claude Artifact?

Start a new chat with Artifacts enabled, pick a category (Apps and websites, Documents and templates, Games, Productivity tools, Creative projects, Quiz or survey, Start from scratch), then prompt Claude to build something concrete. As soon as Claude has enough to generate, the Artifact panel opens on the right with the result live in Preview mode. The same flow works without a category if you Start from scratch.

Can I toggle between the Artifact preview and its code?

Yes. The Artifact panel header has two tabs in the top-left: an eye icon for Preview (runs the Artifact live) and a code-bracket icon for Code (shows the full HTML/JS/CSS source with syntax highlighting). Click either tab to switch. The top-right of the header also shows Copy, Publish, and a refresh button you can use without leaving either tab.

How do I iterate on an existing Claude Artifact?

Reply in the same chat with the change you want (for example: add a dark mode toggle in the top-right and persist the choice in localStorage). Claude updates the existing Artifact in place rather than creating a new one, and the panel re-renders with the new version. The Artifact also gains a version history under its three-dot menu so you can revert.

How do I share a Claude Artifact with someone?

Click Publish in the Artifact header. The Publish artifact modal opens with the Artifact title and Anthropic's Usage Policy note. Click Publish & copy link. Anthropic generates a public URL for the Artifact and copies it to your clipboard. The chat that produced the Artifact stays private; only the published Artifact is accessible at the URL.

Where do my saved Claude Artifacts live?

Every Artifact you produce in chat is saved to your Artifacts library. Open it from the Claude sidebar to see a grid of cards with the Artifact name, last edited date, view count for published ones, and a Published tag where applicable. Hover any card for the three-dot menu (Star, Rename, Add to project, Delete) and click any card to re-open the Artifact in chat.

Are Claude Artifacts free?

Yes, with usage limits. Free Claude accounts can create and iterate on Artifacts inside chats and use the Publish & copy link flow. Paid plans (Pro, Max, Team, Enterprise) raise per-day usage caps and unlock higher-tier models (Opus, Sonnet) that produce better code on the first try. The Artifacts feature itself is not gated to paid plans.

What is the difference between a Claude Artifact and a Claude Project?

An Artifact is a single self-contained output (one HTML quiz, one document, one diagram) generated by Claude in a chat. A Project is a flat workspace that bundles Custom instructions, a Files knowledge base, and a set of scoped chats together. Artifacts live inside chats and can be added to Projects from their three-dot menu. Use Projects to scope behavior, use Artifacts to ship a deliverable.

Pair Claude Artifacts With AI Toolbox

Claude Artifacts solve the live-build problem: a panel next to the chat that runs your deliverable as Claude generates it. AI Toolbox (formerly Claude Toolbox) solves the recall problem: finding the Artifact chat from three weeks ago when you remember the prompt but not the title. The Claude module adds full-text search across all message content with an Exact match toggle (something Claude does not offer natively on any plan), message-level bookmarks with scroll-to and highlight (2 conversations free, up to 1,000 bookmarks on Premium), per-conversation TXT or JSON export, and a multi-language UI (10 locales with RTL). Free plan: 5 results per query, 2 bookmark conversations. Premium: unlimited at $9.99 per month or $99 lifetime. Cross-platform users can grab All Access Lifetime ($149), which covers the ChatGPT, Gemini, and Claude modules in one purchase. Add it from the Chrome Web Store; works on every Chromium browser (Chrome, Edge, Brave, Opera, Arc), not Firefox or Safari.

Conclusion

Claude Artifacts collapse "generate code and copy it out" into one panel that runs your deliverable live next to the chat that made it. Six clicks gets you from a blank chat to a published interactive app: pick a category, prompt Claude to build, read the Preview, switch to Code to verify, iterate with a follow-up reply, Publish & copy link. The result is saved to your Artifacts library and ready to share. When the Artifact chats stack up, pair Claude with the Claude module of AI Toolbox so you can search and export every Artifact-producing conversation you have ever had.

Last updated: May 31, 2026