To use Claude Artifacts, turn on "Code execution and file creation" in Settings, then ask Claude for anything substantial — a webpage, a chart, a document, a small app — and it opens in its own panel next to the chat instead of getting buried in the conversation. From there you can edit it, ask for revisions, save it to your Artifacts space, and publish it as a shareable app.
Short answer: Claude Artifacts is a side panel that holds standalone content — code, React apps, SVGs, documents, diagrams — separate from the chat thread. Enable it in Settings > Capabilities, ask for something reusable, then iterate, save, and optionally publish it as a live app. It's included on every plan, from Free through Enterprise.
I spent a week rebuilding things I'd normally reach for a separate tool for — a small budgeting dashboard, a study flashcard set, a one-page landing site — entirely inside Claude Artifacts, to see how far the "just ask" workflow actually holds up before you need real code. Below is what I did to set it up, the parts that consistently work, and the two habits that wasted the most time before I unlearned them.
What you'll need
Nothing beyond a Claude account, on any plan — Artifacts ships on Free, Pro, Max, Team, and Enterprise, on web, desktop, and the mobile apps. You do need "Code execution and file creation" switched on under Settings > Capabilities; it's off by default in some accounts, and Claude won't open the panel without it. There's no separate install. If you want the newer AI-powered app features — artifacts that call Claude's own API to generate content on the fly, or that remember state between visits — those currently sit behind a Pro plan or higher, so free users can build and view artifacts but hit a wall on the more advanced, app-like behavior.
Step-by-step: How to use Claude Artifacts
1. Turn on Code execution and file creation
Open Settings > Capabilities and enable "Code execution and file creation." This is the single toggle that gates the whole feature — without it, Claude answers in plain chat even when the content would clearly work better as an artifact.
2. Ask for something substantial
Just describe what you want: "build me a single-page pricing calculator," "turn this outline into a Mermaid flowchart," "write this as a one-page HTML resume." Claude decides on its own when content is worth breaking out — per Anthropic's help documentation, that's typically content over 15 lines that you're likely to edit, reuse, or share outside the conversation. You don't need special syntax to trigger it.
3. Review and edit in the panel
The artifact opens beside the chat, not inside it. Keep talking in the chat to request changes — "make the header sticky," "swap the color scheme," "add a third column" — and Claude updates the same artifact rather than starting over. In my testing, this back-and-forth held up cleanly through six or seven revisions on a React component before the artifact needed a full rebuild instead of a patch.
4. Switch between versions
Every edit creates a new version, and a version dropdown at the top of the panel lets you jump back without losing your original. This matters more than it sounds — I regenerated a dashboard layout twice, disliked both, and went straight back to version one in two clicks instead of re-prompting from scratch.
5. Save it to your Artifacts space
Click Publish to move the artifact into your dedicated Artifacts space, browsable from the sidebar alongside curated examples from Anthropic. Anything you don't publish stays attached to that one conversation and is easy to lose track of once the thread scrolls.
6. Turn it into a live, AI-powered app (optional)
On Pro and higher, artifacts can call Claude's API directly and hold onto state between visits — Anthropic calls these Live Artifacts. That's the difference between a static flashcard set and one that generates new questions on demand, or a tracker that remembers what you entered last time instead of resetting blank.
7. Publish and share
Publish an artifact publicly and anyone with the link can open it — viewers sign in with any Claude plan, including Free, to use the interactive version. Useful for handing off a working prototype without exporting code or hosting anything yourself.
Example prompts you can copy
These are close to what I actually typed while testing the steps above:
- "Build a single-page HTML budgeting calculator with three expense categories and a running total."
- "Turn this project timeline into a Mermaid Gantt chart: [paste outline]."
- "Make a React flashcard app for these 20 vocabulary terms, one card at a time with a flip animation: [paste list]."
- "Write this as a clean one-page resume in HTML, ATS-friendly, no images: [paste resume text]."
- "Build a quiz component that generates a new question each time using your own API, based on this topic: [topic]."
State the format (HTML, React, Mermaid), the structure (three categories, one card at a time), and whether it should be static or dynamic — that's the difference between an artifact you can actually use and one you have to keep re-prompting.
Common mistakes to avoid
The biggest one I made early on: asking for changes in a brand-new chat instead of the same conversation, which spins up a disconnected second artifact rather than editing the one I already had — always keep revising inside the thread that created it. Second, forgetting to hit Publish, then losing a genuinely useful artifact in an old chat I couldn't find again by scrolling. Third, expecting persistent memory or API calls to work on the Free plan — basic artifacts are free, but Live Artifacts with saved state and Claude's own API sit behind Pro, and the panel won't tell you that clearly if a prompt silently falls back to a static version. Fourth, asking for something huge in one shot — a full multi-page app with a database — when Artifacts is built for single-file, self-contained output; break bigger builds into pieces instead. Fifth, not checking the version history before regenerating, which throws away a working draft that a two-click rollback would have saved.
Where each plan gets you
| Plan | Price | Basic artifacts | Live Artifacts (AI-powered, persistent state) | Publish & share |
|---|---|---|---|---|
| Free | $0 | Yes | No | Yes |
| Pro | $17–$20/mo | Yes | Yes | Yes |
| Max | From $100/mo | Yes | Yes, higher usage ceiling | Yes |
| Team (Standard) | $20–$25/seat/mo | Yes | Yes | Yes, plus shared admin controls |
Prices are Anthropic's current published rates, checked against Claude’s pricing page on August 4, 2026. Live Artifacts — the ones that call Claude's own API or hold state between visits — are a Pro-and-up feature; Free covers building, editing, and publishing static artifacts without that layer, according to Claude’s Artifacts documentation.
Tools that make this easier
Artifacts is Claude's built-in answer to "vibe coding," but it's not the only place that workflow lives, and it's worth knowing where it fits. If you're starting from zero with Claude itself, how to use Claude AI covers account setup and plans in more depth than I can here. For anything past a single-file artifact — a real multi-page app with a backend — a dedicated coding tool will get further; my best AI tool for code roundup and AI coding assistant guide both cover the field, including Claude Code itself, which picks up where Artifacts' one-file limit stops. If you're deciding whether Claude is even the right model for this compared to OpenAI's tools, Claude vs. ChatGPT tested both directly, and ChatGPT alternatives for coding is worth a look if you want the broader field. And if you're curious what Claude's top model brings to harder Artifacts builds, Claude Opus 5 breaks down pricing and benchmarks.
My take
Artifacts is one of the more genuinely useful things Claude does that a plain chat window can't — the side panel keeps a build separate from the conversation clutter, and the version history alone has saved me from redoing work more than once. Free is enough to learn the workflow and ship small, static things; the Live Artifacts layer on Pro is where it starts to feel like an actual app builder instead of a fancy code preview. I wouldn't reach for it over a real IDE for anything with a database or real users, but for a one-off dashboard, a quiz, or a prototype you want to hand someone a link to, it's faster than opening a code editor.
Frequently Asked Questions
Is Claude Artifacts free to use?
Yes. Basic artifacts — code, HTML, SVG, documents, diagrams — are available on the Free plan with no card required. Live Artifacts, which can call Claude's own API and hold onto state between visits, require Pro or higher.
How long does it take to learn how to use Claude Artifacts?
A few minutes once "Code execution and file creation" is switched on — you just ask for something substantial and it opens in the panel. Getting good at iterating without losing a working version usually takes a handful of real builds.
What is the easiest way to get started with Claude Artifacts?
Enable the capability in Settings, then ask for something small and self-contained first — a one-page HTML tool or a diagram — before trying a multi-step app. Keep every edit in the same conversation so Claude revises the existing artifact instead of starting a new one.
Can I share an artifact with someone who doesn't use Claude?
Yes. Publish it and send the link; viewers can open and use the interactive version by signing in with any Claude account, including a free one, without needing your plan or an API key.
Does Claude Artifacts replace a real code editor?
No, not for anything with a database, multiple pages, or real users. In my testing it's excellent for single-file prototypes, dashboards, and internal tools, but a proper IDE or a tool like Claude Code takes over once a build outgrows one file.