How-To/How to Use Claude Artifacts: Build, Iterate, and Share

How to Use Claude Artifacts: Build, Iterate, and Share

Artifacts are how Claude turns a prompt into something you can actually use: a working tool, a chart, a document, or a small app that opens in its own panel and updates as you talk. They are one of Claude's highest-value features, and as of 2026 they are available on the free tier. Here is how to use them, what is new this year, and where they stop.

What an Artifact actually is

When you ask Claude to build something substantial, a tool, a document, a diagram, it opens a dedicated panel beside the chat. That panel is the Artifact. It is not a chat reply, it is a live object you can preview, edit, iterate on, and return to later. Claude creates one automatically when the content is significant, self-contained, and something you are likely to reuse.

What you can build

  • Interactive React components and small apps
  • HTML web pages and landing pages
  • SVG graphics and Mermaid diagrams
  • Formatted documents and downloadable files like .docx, .pptx, .xlsx, and .pdf
  • Code and scripts in many languages

The basic workflow

Using Artifacts is mostly automatic. Describe what you want, and Claude opens the panel with a working version. Toggle between the Preview tab to use it and the Code tab to read the source. To change anything, just reply in the chat and the same Artifact updates in place, with no copy-paste. For Markdown documents you can also highlight text and choose Edit with Claude to change it right where you marked it.

Tip

If Claude answers in plain chat instead of opening the panel, add the phrase 'as an artifact I can edit and share' to your request. That nudge usually triggers the right format.

Share and publish

When an Artifact is ready, click Publish in the header to get a shareable link. Anyone with the link can open and use it in their browser, and they only need to sign in for advanced features. You can also switch between versions with the version selector if you want to roll back a change.

What is new in 2026

  • AI-powered apps: Artifacts can call Claude's API directly, so the app itself can answer questions, generate content, or adapt to input.
  • Persistence: Artifacts can save and retrieve data across sessions, not just within one chat.
  • External connections: through MCP, an Artifact can connect to services like Google Calendar, Gmail, and Slack.
  • Live Artifacts: dashboards and trackers that refresh with current data each time you open them, useful for KPIs and pipelines.
  • Claude Code Artifacts: in beta on Team and Enterprise plans, Claude Code can publish a session's output as a shareable page.

Where Artifacts stop

Artifacts are built for prototyping, not production hosting. The preview sandbox runs browser-grade JavaScript, not a full server, so calls to most external APIs will fail there, and there is no backend or database behind a basic Artifact. A common rule of thumb is that an Artifact gets you most of the way to a working app, and the last stretch to a production-quality, deployed product still needs real development. Treat it as the fastest way to a working prototype, then move the code into a real project when you are ready to ship.

Bottom line

Artifacts are the quickest path from idea to a working, shareable thing inside Claude: apps, docs, diagrams, and dashboards. Use them to prototype and share fast, and graduate to a real codebase when you need hosting, a backend, or production polish.

THE CLAUDE INSIDER

Get the Claude playbook in your inbox.

One weekly email for Claude and Claude Code users. Real workflows, no hype. Subscribe and we send you The Claude Power-User Cheatsheet.

Frequently Asked Questions

RELATED