Guide · Claude
Host a Claude artifact on its own link
Claude just built you a landing page, a calculator, a quiz or a little dashboard, and it looks great in the preview pane. Now you want to send it to a client, put it in your bio or open it on your phone. Paste the code here and you get a public HTTPS link like pricing-calculator.flatpage.page in a few seconds.
Three steps from artifact to link
Get the code from Claude
Open the artifact, then use Copy to grab the code, or Download to save it as an .html file.Paste or drop it here
Sign in, paste the code into the box on your dashboard, or drag in the downloaded file.Share your link
Copy the link or the QR code. Paste a new version later and the link stays the same.
Tips for artifacts that work everywhere
Ask for one self-contained HTML file
Artifacts come in a few flavours: plain HTML, SVG, and React components. A plain HTML artifact publishes exactly as it is. For a React artifact, ask Claude something like: “Rewrite this as a single self-contained index.html that loads React from a CDN, with all CSS inline.” The result opens in any browser and in your link.
Keep data in the page
Artifacts sometimes rely on the chat for data or call APIs that only work inside Claude. A published page is a normal web page, so anything it needs should be in the file itself, or fetched from a public URL that allows it.
Images and fonts
If the page references images like hero.png that only existed in Claude's head, we show a tidy placeholder in their place instead of a broken icon. When you have the real images, put the HTML and the images in one folder, zip it, and upload the zip. Web fonts from Google Fonts or another CDN work as they are.
Give it a title
The <title> tag is what shows in the browser tab and in link previews in chat apps. Ask Claude to set a clear title and a short meta description before you publish.
Iterate freely
Every upload becomes a new, immutable version of the same site. Keep refining the artifact with Claude and paste each improvement into the same site: the people you've already sent the link to always see the latest one.
Questions
- Will my React artifact work?
- If it renders in a plain browser, yes. Ask Claude for “a single self-contained HTML file” and it will load React and any libraries from a CDN inside the page. A bare .jsx component on its own needs a build step and won't run as-is.
- The artifact uses images that aren't in the file. What happens?
- Images that point at files you didn't upload are replaced with a neat placeholder, so the page doesn't show broken-image icons. Upload a zip with the images included, or ask Claude to use image URLs, to show the real ones.
- Can I update the page after Claude changes it?
- Yes. Paste the new version into the same site from your dashboard. The link stays the same and visitors see the new version straight away.
- Can people see my Claude conversation?
- No. Only the HTML you paste or upload is published. Nothing from the chat is sent to us.
- Does the artifact need to be public?
- Your link is public to anyone who has it. If you'd rather only some people see it, the Starter plan adds password protection.
Put your artifact online
Paste the code, get the link. Free for one site, no card needed.