TLDR: Claude artifacts are the side panel where Claude builds real, working things (web pages, small apps, documents, diagrams) instead of dumping them into the chat. An HTML artifact is a self-contained web page you can preview, refine, and copy out as a single file. The catch: the artifact lives inside your Claude session, and a shared Claude link is tied to your account, not a clean public page. To actually hand it to someone, copy the HTML out and publish it as one live link.
If you have used Claude for anything beyond a quick answer, you have probably seen a panel slide in from the right with a rendered web page, a chart, or a working little tool inside it. That panel is an artifact, and it is the feature that turns Claude from a chatbot into something that builds. This is Claude artifacts explained in plain terms: what they are, how they actually work, and the one step most people miss, which is getting that work out so other humans can see it.
The short version is that an artifact is a real, self-contained thing (usually HTML), and once you understand that, the whole workflow from prompt to shareable page gets a lot simpler.
What a Claude artifact actually is
When you ask Claude for something substantial and standalone (a page, a document, an SVG, a snippet of code, a small app), it does not smear the result across the conversation. It opens a separate window next to the chat and builds it there. That window is the artifact.
The key idea is that many artifacts are just a web page. When Claude builds a landing page, a calculator, a pricing table, or an interactive chart, what it writes underneath is HTML, CSS, and JavaScript. The panel renders that code live so you can see the finished result, click the buttons, and try the interactions right there.
An artifact is not a picture of a page. It is the page. That single fact is what makes it portable.
Because it is real code, an artifact can do real things: a form that validates, a chart that responds to hover, a tab layout that switches, an animation that loops. None of that is faked in the preview. It is running.
Why artifacts exist (and what they are good at)
Artifacts solve a specific problem. Chat is great for thinking out loud, but it is terrible for anything you need to reuse. A 200-line block of HTML pasted into a message is unreadable and easy to lose. Artifacts pull that work into its own space where you can:
- See it rendered, not just as raw code, so you can judge the result the way a visitor would.
- Iterate in place, asking for changes while Claude updates the same artifact instead of pasting new versions every time.
- Switch between preview and code, so you can grab the underlying HTML whenever you want it.
- Keep versions, so you can step back if a change makes things worse.
Where artifacts shine is exactly the stuff that used to require a developer: a quick microsite, a proposal that looks designed, an internal dashboard mockup, a resume page, a small tool. You describe it, Claude builds it, and you refine it by conversation.
The part people miss: an artifact is not a public page
Here is where most people get stuck. The artifact looks finished and shareable, so they assume they can just send it. But the artifact lives inside your Claude session. It renders for you because you are logged in.
Claude does offer a way to share artifacts through a link, but that link lives on claude.ai, wraps your work in Claude’s interface, and is tied to the platform and your account. It is fine for a quick “look what I made,” but it is not a clean, self-standing page on a URL you control, and it is not something you would put on a business card or send to a client as your own.
The honest distinction looks like this:
| What you have | Where it lives | Who can open it | Branded and yours? |
|---|---|---|---|
| The artifact in your chat | Your Claude session | Only you | No |
| A shared Claude artifact link | claude.ai | Anyone with the link, inside Claude’s UI | No |
| The HTML, copied out and hosted | A URL you control | Anyone, on any device | Yes |
| A downloaded .html file | Your computer | Only if they open the file manually | No |
Only the third row gives you a real, portable page. And getting there is easy.
How to get the HTML out of an artifact
The whole trick is that an HTML artifact is a self-contained file. To pull it out:
- Open the artifact and look for its code view (the toggle that switches from the rendered preview to the underlying source).
- Select all and copy the full contents, or use the download option to save it as an
.htmlfile. - Confirm it is one self-contained file. If Claude referenced separate assets, ask it to inline everything.
A prompt that gets you a clean, portable file every time:
“Rebuild this as a single self-contained HTML file. Inline all CSS and JavaScript, use no external files or CDN links, and embed any icons as inline SVG so the whole page works offline from one file.”
That one instruction is the difference between a page that travels and a page that breaks the moment it leaves Claude. For the deeper version of this, see our guide to getting self-contained HTML from AI.
Turn the artifact into a link people can open
Once you have the self-contained HTML, publishing it is the last mile. This is exactly what VisiblePage does: paste the HTML Claude produced, and you get a live URL immediately, with no build step, no server, and no domain to configure. Every button, chart, and animation keeps working because you are sharing the real page, not a screenshot of it.
Because the page lives at one canonical link, when Claude revises the artifact you just re-publish to the same URL, and everyone you already sent it to sees the update. No “final_v3.html,” no resending. For the full walkthrough, see how to publish a Claude artifact as a link, and the broader guide to sharing your AI work.
Where to go next
Artifacts are one half of a bigger picture. If you also use ChatGPT, the equivalent feature is Canvas, covered in ChatGPT Canvas explained. Once you are comfortable building, the real skill is refining, which we cover in how to iterate on AI-generated pages. And the whole workflow, end to end, lives in our pillar on building with Claude and ChatGPT. If you want to see Anthropic’s own overview of the model, Claude’s product page is the source.
Try it now: Publish your Claude artifact as a live link and hand someone the real, working page.
Frequently asked questions
What are Claude artifacts?
Artifacts are a dedicated side panel in Claude where it builds standalone content you can see and use, like a web page, a small app, a document, an SVG, or a diagram. Instead of burying the work in a wall of chat text, Claude renders it live so you can preview and refine it. When you want to share that work with other people, copy the self-contained HTML out and publish it as a live link with VisiblePage.
Is a Claude artifact a public web page I can send to anyone?
Not by default. The artifact renders for you inside your Claude session, and a shared Claude link lives on claude.ai and shows Claude’s interface. To hand someone a clean, self-standing page on a URL you control, copy the HTML out of the artifact and host it yourself.
How do I get the HTML out of a Claude artifact?
Open the artifact, switch to its code view, and copy the full contents, or use the download option to save it as a file. If the work is a single self-contained page, that one file is everything you need to publish it as a live link.
Can Claude build an interactive artifact, not just static text?
Yes. Artifacts can include working buttons, forms, charts, and animations because they are real HTML, CSS, and JavaScript. That interactivity survives only if you share the actual page, which is why a live link beats a screenshot.
Do I need to code to use Claude artifacts?
No. You describe what you want in plain language and Claude writes the code. Your job is to review the preview, ask for changes, and then publish the finished HTML as a link to share it.
Ready? Turn your next Claude artifact into a live link — your first page is free.