Claude Code Artifacts: Share Live Pages from Sessions
Claude Code artifacts turn session output into a live, shareable web page at a private URL — updated in real time as Claude keeps working. Here's how they work.
Reviewed for accuracy by Evgenii Arsentev, PhD · 2026-07-01
An artifact is a live web page that Claude Code publishes from your session. You ask Claude to build one — a PR walkthrough, a dashboard from data it already pulled, a side-by-side comparison of design options — and Claude writes an HTML page and publishes it to a private URL on claude.ai. The page updates in place as the session continues. No deploy, no build step, no file to send.
I've been using them for PR reviews inside my team. Instead of pasting a wall of diff output into Slack, I share a link to a page where the diff is rendered with annotations next to each chunk. The reviewer clicks, reads, and comments without digging through terminal screenshots. That's the artifact use case in a nutshell: output that is easier to look at than to read line by line.
Artifacts require a Team or Enterprise plan and a session signed in with /login. They are in beta — the feature and its availability may change.
What is a Claude Code artifact, exactly?
It's a self-contained HTML page — one file, no backend. Claude can use anything your session can reach: your codebase, data pulled through connected tools, output from commands. The page cannot store form input or call an API at view time, but it can render charts, show annotated diffs, display design mockups, or keep an investigation timeline that fills in while a long task runs. If you need an app with a real backend, artifacts are not that — deploy on your own infrastructure instead. Think of an artifact as a snapshot of work, not a running service.
How do you create a Claude Code artifact?
Ask for one in plain language. There's no command to memorize. Describe the visual output you want, and Claude decides whether to build it. Claude may also publish an artifact on its own when the output suits a page — you'll see a permission prompt before it does. Before publishing, Claude asks: it might say something like «Claude wants to publish Deploy failures by service (deploy-failures.html) to a private page on claude.ai». Select Yes, and your browser opens to the new page.
Three prompts to try right now
- 1Make an artifact that walks through this PR with the diff annotated inline and color-coded by severity.
- 2Build a dashboard artifact of last week's deploy failures by service and keep it updated as you investigate.
- 3Make an artifact with four different layouts for the settings panel — lay them side by side with a one-line tradeoff under each.
Press Ctrl+] at any time to reopen the most recent artifact from the terminal. If you don't want the browser to open automatically every time a new artifact is published, set CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0 in your environment.
How do you update an artifact?
Just ask Claude to revise it. Claude edits the underlying HTML file and publishes again to the same URL — anyone with the page open sees the update in place. Each publish becomes a numbered version, and from the Share control in the page header you can pick which version viewers see. This is useful when you want to share a stable snapshot while Claude keeps refining.
If you want to update an artifact from a different session, give Claude the artifact's URL and ask it to revise. Without the URL, a new session always creates a new artifact.
Update https://claude.ai/code/artifact/<id> with today's numbers.
Paste the artifact URL directly into your prompt. Claude fetches the current page, applies the changes, and publishes a new version to the same link.
Who can see a Claude Code artifact?
A new artifact is visible only to you. Open it in your browser and use the Share control in the page header to grant access to specific colleagues, or to everyone in your organization. Sharing stops at your organization's boundary: viewers must sign in to claude.ai as a member of the same organization that published the artifact. There is no option to share publicly or with someone outside your org — for that, ask Claude for the HTML file and send the file itself.
Every artifact you've ever published lives there — title, emoji icon, and a version history. The page header on each artifact names you as the author, so teammates always know who published it.
What can you actually build? The best artifact use cases
The constraint is 'one HTML page, no backend'. Within that, the list is long. PR walkthroughs with annotated diffs are the most common. Dashboards built from data Claude already pulled through MCP tools. Side-by-side option comparisons — layouts, copy variants, API shapes. Investigation timelines that Claude fills in as a long task progresses. Meeting summaries with a clean visual format instead of bullet-point walls. If you'd normally paste the output into a doc or Slack and format it manually, an artifact saves that step and gives you a live, version-controlled page instead.
Artifacts vs regular file output: when to use which
Use an artifact when you want to share the output with a teammate without a file attachment, when the content benefits from visual layout (charts, side-by-sides, color-coded diffs), or when you want the page to update in place as Claude keeps working. Use a regular file when you need the output to leave your organization, when you need a backend or multiple routes, or when the output is data that another tool will consume.
One last note: artifacts are beta, and the behavior and availability are likely to evolve. Everything here is accurate as of July 2026. If Claude responds that it can't publish an artifact, check that your plan is Team or Enterprise and that you're signed in with /login — those are the two requirements that trip people up most often.

Author
Evgenii Arsentev
PhD · Chief Product Officer at a tech company
▌ Reading is the blue pill
Want to actually build this?
Guides explain. The free course transforms — personalized, gamified, and built to get you shipping fast.
◉ Start the free course →