How Claude Artifacts Are Built
An artifact is a standalone piece of content Claude produces in its own panel next to the chat. Each one is a single file of one of a handful of types, and claude.ai decides how to display it from that type:
| Type | What the file actually is | How claude.ai shows it |
|---|---|---|
| React component | One .jsx file with a default-exported component, importing from a fixed list of libraries | Compiled in the browser and mounted into a page that already has React, Tailwind CSS and the allowed libraries (Recharts, lucide-react icons, shadcn/ui, lodash, mathjs, d3, Papa Parse, SheetJS, Three.js r128, Chart.js…) available. |
| HTML page | A complete single-file web page; CSS and JS live inline or come from an allowed CDN | Loaded as-is in the artifact frame. |
| SVG | Vector image markup | Drawn directly. |
| Mermaid | Diagram text (flowchart TD …) | Rendered to SVG by the Mermaid library. |
| Markdown / document | Formatted text | Rendered as a document. |
| Code | Source in any language | Syntax-highlighted only; it does not run. |
Where it runs
Interactive artifacts run inside an iframe on a different domain (claudeusercontent.com) from the chat at claude.ai. A strict content-security policy limits what they can do: scripts come only from approved CDNs, most outside network calls are blocked, and the frame cannot touch the chat page around it. That isolation keeps generated code from reaching your account, and it is also the root of every save and print problem below.
Where the "state" lives
The file Claude wrote is only the recipe. Everything that happens after it loads (numbers you typed, rows you added, a chart that redrew, a result a calculation produced) lives only in that frame's memory. Browser localStorage is blocked inside artifacts. Newer artifacts can opt into a small persistent-storage API, but most do not use it. Reload the chat, re-open the artifact or publish it, and it starts over from the recipe.
Why They're Hard to Turn Into a PDF
| Limitation | Effect | What this page does about it |
|---|---|---|
| Printing claude.ai prints the chat | Ctrl+P prints the chat page. The artifact panel is a separate cross-origin frame, so it usually comes out clipped to what was on screen, squeezed into a side column, or blank. | Renders the artifact as its own full-width page that the browser can paginate normally. |
| "Download" gives the recipe, not the result | The download or copy button gives you the source file. A React artifact downloads as .jsx, which a browser can't open. None of your inputs or results are in it. | Runs .jsx files here, and the console snippet (step 4) captures the live state from claude.ai itself. |
| Scrolling panels | Tables and logs inside overflow:auto boxes or full-screen (h-screen) layouts print only the visible slice. | Expand scroll boxes lets every scroll region grow to its full height. |
| Interactive clutter | Buttons, sliders, unused tabs and empty input boxes waste paper and confuse a record. | Hides buttons, shows field values as text, and lets you click out anything else. |
| Canvas & hover content | Canvas charts (Chart.js, Three.js) are pixels, and tooltips exist only while the mouse is over them. | Canvases are turned into images at freeze time; the freeze delay gives you time to hover a tooltip. |
| Published links aren't archives | A published artifact is a link back to the same live code. It can't hold a particular test run and can be unpublished. | Produces a file you own. |
Can an artifact be saved as an HTML page with every style embedded?
Yes, in two different ways depending on what you need:
Yes, in two different ways depending on what you need:
- Snapshot HTML (best for a test record): one file holding the frozen page exactly as it looked. Every stylesheet the artifact was using, including the Tailwind CSS generated at runtime and anything injected by JavaScript, is read from the browser's style engine and written into a single
<style>block. Images, canvas drawings and web fonts are converted to embeddeddata:URIs. All scripts are removed, so it opens anywhere and offline, never changes, and prints the same years from now. The cost is that it's no longer interactive. - Standalone HTML (interactive): the working artifact as one file with no external libraries. React, Tailwind, Recharts, the icon set and any other libraries are copied into the file, as are stylesheets, web fonts and images. React artifacts are compiled to plain JavaScript first, so the 2.8 MB in-browser compiler is left out and a typical React artifact comes to about 1–2 MB. It opens and runs from a USB stick or an offline PC, but in its starting state, not the state you left it in. After saving, the page checks the file and lists anything that would still need the internet.
Limits of this tool
- Library versions: React artifacts here use React 18, Recharts 2.12, lucide-react 0.383 and Tailwind 3.4 from public CDNs. claude.ai's exact versions aren't published and change over time, so a very new icon name or an uncommon Tailwind class may look slightly different. Missing icons and unknown components show as small dashed placeholders instead of crashing.
- shadcn/ui components (Card, Button, Tabs, Select, Slider…) are lightweight look-alikes, not the real Radix-based ones. Select menus become native drop-downs and accordions print fully expanded.
- AI calls (
window.claude.complete) only work on claude.ai. Do those steps there and capture with the console snippet. - Embedding only works for resources whose servers allow cross-origin reads. Anything that can't be fetched keeps its original web link and is reported.
- WebGL / 3-D canvases often snapshot as blank because the browser clears the drawing buffer after each frame. Take a screenshot of those instead.
- Nested frames, video and audio are not captured.
- Security: the live preview runs the artifact's code on this page, the same as opening the downloaded file yourself. Only paste artifacts you generated or trust. Frozen snapshots contain no code.
- PDFs come from your browser's own print engine, so text stays selectable and charts stay vector. In the print dialog choose Save as PDF, and leave Background graphics on if colors matter.