Claude Artifact
Definition
When Claude produces something substantial enough to stand on its own, it puts it in a panel next to the chat instead of in the reply. You see the finished thing rather than the source, and you refine it by describing what should change. Typical artifacts are a complete HTML document, a React component, a Markdown document, an SVG or a diagram. Interactive ones run inside a sandboxed frame with its own origin, which is why they can hold state while you use them but cannot quietly reach the rest of the page or your account. Anthropic changes what artifacts can do from time to time — sharing, storage and the list of supported types have all moved — so treat any specific limit you read about, here included, as worth checking against the product itself.
Why It Matters
An artifact is finished work in an unfinished place. It renders for you, in your session, and everything about that is convenient until you need a client, a tester or a colleague to use it. Getting a copy of the source and putting it at an ordinary web address changes the audience from one to everyone with the link, and it changes the lifetime from the life of a chat thread to the life of a file. It also separates the two things people confuse: the page, which is portable and yours, and the assistant's own hosting of it, which is a product feature that may change. Keeping your own copy of the HTML costs nothing and removes that dependency entirely.
How It Works
Copy the artifact's source out of the conversation and save it with an .html extension, then upload it as a static file. An HTML artifact is usually ready to serve as-is, because Claude writes the CSS and JavaScript inline and loads any libraries from a CDN. A React artifact is not a page: it exports a component, so you either paste it into a small host page that mounts it and loads React from a CDN, or ask Claude for the same thing as a standalone HTML document, which is the shorter route. Whatever the type, features that depended on the chat environment do not travel — calls back to Claude, files the assistant could read, anything holding a secret. The rest is plain browser code, and a static host serves it the same way it serves any other page.
Real-World Example
A teacher asks Claude for an interactive periodic table, gets a 200 KB artifact with the data and styling inline, and wants her class to use it from home. She saves the source as index.html and uploads it to 99helpers under the name year9-elements, giving her year9-elements.99helpers.site. Thirty students open it at once on school Chromebooks; none of them has a Claude account, and none of them needs one.
Common Mistakes
- ✕Publishing a React artifact by saving the component file with an .html extension — a browser handed JSX with no host page and no React on the page simply shows nothing
- ✕Expecting anything that called back to Claude to keep working once the file is on your own address — the page has no connection to the assistant any more
- ✕Treating the assistant's own share link as archival storage — keep the HTML yourself, because product features change and threads get deleted
- ✕Copying only the visible part of a long artifact — a truncated file usually renders the top of the page and then stops, with no error to tell you why
Related Terms
AI Artifact
An AI artifact is a self-contained piece of work an AI assistant produces and renders in its own panel beside the conversation — commonly a web page, a small app, a document or a chart. Most are a single file, which is why they can be put on the open web with very little work.
Artifact Sandbox
The restricted environment a chat tool runs your generated code in while you are still in the conversation. It renders a live preview, but with tight limits on network access, storage and anything outside its own frame.
Artifact Hosting
Artifact hosting is putting something an AI assistant built for you — usually one HTML file — at a public web address, so it can be opened by anyone with the link instead of only inside the conversation that produced it.
Single-File Web App
A single-file web app is a complete, working application contained in one HTML document, with the styles and the JavaScript written inside the same file. Open it in a browser and it runs — there is nothing to install and nothing to build.
Static File Hosting
Static file hosting serves files exactly as they were uploaded, byte for byte, with no code running on the server to assemble the response. Every visitor to a given address gets the identical bytes back.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →