What Is a Claude Artifact? Types, Examples and How to Use Them

A Claude artifact is "anything Claude makes for you that you'd put in front of someone", in Anthropic's words: a document, a deck, a design, a dashboard or a small interactive tool. It opens in its own panel beside the chat, where you can keep editing it, and it's saved to the Artifacts tab in your sidebar.

Claude makes one on its own when the content is significant and self-contained, "typically over 15 lines", and something you'll probably edit or reuse. Or you just ask for one.

Heads-up: Claude artifacts changed on September 16, 2026. Most tutorials still describe the 2024 version, a panel for code, Markdown, SVG and React. That still works, but it's now one corner of a bigger feature.

How Claude artifacts work

You ask for something, and the result lands in a panel next to the chat instead of scrolling past. From there:

• Edit by chatting. Ask for a change ("group the priorities by owner instead of by day") and Claude updates the artifact in place.
• Edit directly. Docs, Slides and Design let you type, move shapes or drag things yourself. In a doc, highlight a passage and click Edit with Claude to change just that part.
• Branch instead of overwriting. Edit an earlier message and you get a new version of the chat with its own artifacts.
• Make a save point. Choose Duplicate from the title menu before a big rewrite.
• Find it again. Every artifact goes to the Artifacts tab in the sidebar. Think of it as your inventory.

No artifacts at all? It's almost always one setting. Artifacts need Cloud code execution and file creation turned on under Settings > Capabilities ("Create and edit files" in the updated layout; Organization settings > Capabilities on Team and Enterprise). If Claude only ever answers in plain text, check that first.

One more thing that's easy to miss: anything made in a chat before September 16, 2026 is a "legacy" artifact. Legacy artifacts keep working, but you can't make new ones. New artifacts start private to you, and who can see a Claude artifact after that depends on how you share it.

Types of Claude artifacts

There are seven kinds of Claude artifact now: Docs, Slides, Design, Dashboards, Motion, custom interactive artifacts, and code and HTML. The first five are templates. The last two are whatever you build from a plain prompt.

Claude artifact types, plans and export formats: checked November 3, 2026, Anthropic help center and claude.com

If you learned artifacts from a 2024 guide, the old list (code, Markdown documents, HTML pages, SVG, Mermaid diagrams, React components) hasn't vanished. Those live in the last two rows now, and a long write-up fits the Docs template.

Custom artifacts are the ones that feel most like small apps. On Pro and up they can store data, up to 20 MB of text per artifact, either personal (your journal entries stay yours) or shared (everyone sees the same leaderboard). On any plan, they can also call Claude from inside the page, and Anthropic Academy says each person's use "counts toward their own plan, like any other message", so a shared tool doesn't burn through your limits.

Claude artifacts examples

Eight Claude artifact ideas, with the prompt for each. Swap in your own details, and expect a second prompt to tune the result.

1. Meeting brief (Docs): "Turn these meeting notes into a one-page brief: decisions, owners and open questions, for people who missed the call."
2. Pitch deck (Slides): "Make a 6-slide pitch for a dog-walking app, aimed at a local investor meetup. One idea per slide."
3. Landing page (HTML): "Build a single-file landing page for a weekend pottery class: hero, schedule, pricing and a signup button." This is the classic vibe-coded landing page.
4. App mockup (Design): "Design three onboarding screens for a recipe app at phone size, in warm colors."
5. Habit tracker that saves entries (custom, Pro and up): "Make a habit tracker for five daily habits that remembers my check-ins between visits."
6. Flowchart (Mermaid): "Draw our signup flow as a Mermaid flowchart: visitor, email check, free trial, paid plan, churn."
7. Calendar dashboard (Dashboards, connected app, Pro and up): "Build a dashboard of my meetings this month from Google Calendar, grouped by who I met with."
8. Onboarding quiz (custom): "Turn this onboarding PDF into a 10-question quiz game with a score at the end." A 2026 YouTube explainer, Claude Artifacts: What They Are and How to Use Them, shows this one as a training use case.

Want a bigger pile of ideas? Simon Willison's Everything I built with Claude Artifacts this week lists 14 tools he made in a single week, from a QR code decoder to a YAML-to-JSON converter. It's from October 2024, before the templates, but it shows how far one-prompt tools go.

How to use Claude artifacts

Five steps, and the first one only matters once.

1. Check the toggle from the section above.
2. Ask for an artifact. Three ways in: ask in any chat ("put this in an artifact"), choose Output in the message box and pick a template, or start from the Artifacts tab.
3. Refine it with any of the editing moves above.
4. Fix errors. Click Try fixing with Claude next to the error. Anthropic says it won't always work.
5. Take it with you. Export from the artifact's title menu, in the formats from the table.

A few prompt habits that save rounds:

• Name the type. "A doc", "a 6-slide deck" or "an interactive calculator" points Claude at the right template.
• Say who it's for. "For the engineering all-hands" shapes tone and length.
• Ask for single-file HTML with inline CSS and JavaScript if the result is going to leave Claude.
• One change per message. Five edits in one prompt is an easy way to break a working artifact.

Claude live artifacts and artifacts that use your data

"Live artifacts" were Claude Cowork's dashboards. Anthropic announced them on April 20, 2026 as "dashboards and trackers connected to your apps and files" that refresh "with current data" whenever you open one.

Then the name went away. Per the help center, artifacts made in Cowork before August 19, 2026 are the live ones: "They stay in your Artifacts view and keep working, and you can still open and share them, but you can't edit them in place." To keep editing one, the help center's Cowork artifacts article explains how to republish it as a new artifact. Cowork artifacts made since then work like any other.

The idea lives on in every artifact. On Pro, Max, Ultra, Team and Enterprise (web and Desktop), an artifact can connect to apps like Asana, Google Calendar or Slack, and Claude asks you to approve them the first time.

Worth knowing before you build one for a team: connections belong to the viewer. "Everyone connects their own apps, even when using a shared or published artifact," the help center says. So two people can open the same artifact and see different data, depending on what their own accounts can reach.

Claude Code artifacts

Claude Code makes artifacts too. In Anthropic's Claude Code docs, an artifact there is "a live, interactive web page that Claude Code publishes from your session to a private URL on claude.ai", at an address like claude.ai/code/artifact/<id>.

It updates in place as the session continues, and each update becomes a version. The handy bits:

• Ctrl+] reopens the session's latest artifact.
• /artifacts lists the ones you own and the ones shared with you. The gallery at claude.ai/code/artifacts lists every artifact you've created.
• /slides and /design, with a brief, start a Slides or Design artifact (Claude Code v2.1.265 or later).

Two prompts from the docs to try:

Make an artifact that walks through this PR with the diff annotated inline.

Build a dashboard artifact of last week's deploy failures by service and keep it updated as you investigate.

Requirements, per the Claude Code docs (checked November 3, 2026): a Pro, Max, Ultra, Team or Enterprise plan; a session signed in to claude.ai with /login; and the Anthropic API. Sessions on an API key, Amazon Bedrock, Google Cloud's Agent Platform (Vertex AI) or Microsoft Foundry can't make them. In the desktop app you need version 1.13576.0 or later.

The limits that bite: an artifact is "one self-contained page with no backend, so it can't serve multiple routes." The rendered page has to be 16 MiB or smaller, relative links don't resolve, and a strict content security policy blocks external images and any scripts that don't come from five public CDNs.

Claude artifacts vs Projects, Skills and ChatGPT Canvas

Short version: Projects are the input, Skills are the method, artifacts are the output.

Claude artifacts, Projects, Skills and ChatGPT Canvas compared: checked November 3, 2026 (Canvas date from OpenAI's ChatGPT release notes)

They stack. Make artifacts inside a project and Claude draws on that project's files, while a skill can teach Claude your house format for reports. In the new Projects beta (rolling out to some paid Claude Code users first), a project's Library collects both the files you add and the files Claude produces.

How to get an artifact out of Claude

Sharing lives inside Claude: on Pro, Max and Ultra you share a new artifact from its Share dialog, Team and Enterprise keep it inside the organization unless an Owner turns on External sharing, and the help center's sharing table lists no link sharing for new artifacts on Free (checked November 3, 2026). Our sharing guide covers what Publish does in Claude now, and how sharing works.

To put an artifact on the open web at its own address, choose Export > HTML from the title menu and drop the file in the box on Hostsmith's homepage. It asks you to sign in (the Free plan is enough), then the page goes live at a your-tool.us.hostsmith.link address. Or add its MCP connector (https://mcp.hostsmith.net/mcp) in Claude and ask Claude to send the artifact there for you.

Before you export: per Anthropic Academy, "in the exported copy, the parts that save entries, use Claude, or use connected tools stop working." Static pages make the trip just fine.

More than one page is a website, so see building a website with Claude. Projects still in the standalone claude.ai/design need exporting from Claude Design before claude.ai/design goes read-only on December 14, 2026, and how to host an HTML file online compares other places for a single file.

FAQ

Is Claude artifacts free? Making them is: every plan, Free included, gets artifacts and the Docs, Slides and Design templates. Dashboards, saving entries, connected apps and link sharing for new artifacts start at Pro, and Motion needs Team or Enterprise (help center, checked November 3, 2026).

Does ChatGPT have artifacts like Claude? The closest thing is Canvas, a side panel where ChatGPT edits writing and code with you. Claude artifacts go further, into decks, designs, dashboards and small apps that save data or use connected apps.

Why are my Claude artifacts not working or not showing? Work down this list:

• The setting is off. Turn on Cloud code execution and file creation ("Create and edit files") under Settings > Capabilities.
• Your organization turned them off. On Team and Enterprise, an Owner can switch off artifacts, a single template, connector calls or external sharing. Organizations with Zero Data Retention, HIPAA or customer-managed encryption keys don't get Claude Code artifacts at all.
• A network blocks them. Artifacts load from *.claudeusercontent.com. Blocking the script CDNs (cdnjs, jsDelivr, unpkg and the Tailwind and jQuery CDNs) breaks the parts that use a library. Blocking Google Fonts only swaps the typeface.
• The artifact errored. Click Try fixing with Claude next to the error, or ask Claude to rebuild the broken part.
• A connected section is blank. The viewer hasn't connected that app or declined the permission prompt.
• You're on your phone. Sharing settings change only on the web or in Claude Desktop.

Where are my Claude artifacts saved? In the Artifacts tab in your Claude sidebar, whichever chat you made them in. Claude Code artifacts also appear at claude.ai/code/artifacts and in the /artifacts list.

What happened to my old Claude artifacts? Artifacts made in a chat before September 16, 2026 are now "legacy": they keep working and you can still open and share them, but you can't make new ones.

Can I use Claude artifacts on my phone? Yes. In Claude for iOS and Android you can ask for a doc, deck or design in any chat, open it from the Artifacts tab and edit it. Changing who can see it needs the web or Claude Desktop.

So the 2024 picture, a code panel off to the right, is one corner of the feature now. If you change one habit, make it this: name the type and the reader in your first prompt. "A 6-slide deck for Thursday's board meeting" gets you a deck. "Make something about Q3" gets you a guess.

Built something that deserves its own address? hostsmith.net takes the exported HTML file.