How to Publish a Claude Artifact as a Standalone Webpage

Ask Claude for a landing page, a quiz, a chart, or a small calculator and it often answers with an artifact — a live preview panel running actual HTML, CSS, and JavaScript. That's not a mockup. It's a working webpage that happens to be trapped inside a chat window. Getting it out onto a URL someone else can open takes one of two routes, and which one you pick depends on where you want the page to live.

Option 1: Claude's built-in Publish button

Claude has publishing built in, and for a lot of cases it's the shortest path. On the Free, Pro, and Max plans: open the artifact, click Publish, and copy the public link. Anyone can open that link — viewers don't need a Claude account. Claude users who open it can go further and customize it, which spins up their own copy in a new conversation without touching your original.

A few things worth knowing before you rely on it:

• Team and Enterprise plans work differently. There the button is Share, and the link only works for members of your own organization — viewers have to authenticate with their org account. There's no public publish on those plans.
• Unpublishing is one-way. Per Anthropic's docs, once you unpublish an artifact you can't publish that same artifact again, and its stored data is deleted. If there's any chance you'll want the link back, don't unpublish casually.
• Embedding needs an allowlist. Claude can generate embed code for a published artifact, but you have to explicitly list which domains are allowed to embed it.

If your goal is "let people see and remix this inside the Claude ecosystem," stop here — the built-in flow is exactly that, and it's one click.

When you want a plain standalone URL instead

Sometimes the Claude-hosted link isn't the right shape for the job:

• You're on a Team or Enterprise plan and need the page visible to people outside your org — a client, a customer, the public.
• You want the page to read as your document, not a Claude artifact — a clean standalone page you'd put in a proposal, a QR code, or a support reply.
• You want control Claude's publish flow doesn't offer: a custom slug, password protection, or a link you can confidently kill and reissue.

For those cases, remember what an artifact actually is: code. You can take the code anywhere.

Option 2: copy the code, paste it, get a link

1. Grab the artifact's source. In the artifact panel, switch from the preview to the code view (or use the copy button) and copy the full HTML.
2. Paste it at dochost. You get a live preview immediately — it should look identical to what you saw in Claude, because it's the same code running in a real browser context.
3. Click publish. You get a short link, no account required. Send it, embed it in an email, put it behind a QR code — it's just a URL.

The important property: the interactivity survives. Published pages run inline JavaScript exactly as written, so the quiz still scores answers, the calculator still calculates, the chart still animates. CDN-referenced libraries and fonts load too. The only thing that breaks is a reference to a file that exists solely on someone's local disk — which artifacts almost never contain, since Claude builds them self-contained by design.

Or skip the copy-paste: one-click from inside Claude

If you do this more than occasionally, the dochost Chrome extension collapses the three steps into one. It detects HTML and Markdown in your Claude (and ChatGPT) conversations and adds a publish button right there — click it, get the link, no tab-switching or clipboard step. It works anonymously, same as pasting by hand.

Prompting tips: get an artifact that publishes cleanly

Most artifacts publish fine as-is, but a couple of phrases in your prompt make the output more portable:

• Ask for "a single self-contained HTML file." This tells Claude to put everything — markup, styles, scripts — in one document instead of describing a multi-file project. One file is one paste.
• Inline CSS and JavaScript are good here. Normally you'd split them out; for a page that lives at one URL, <style> and <script> blocks inside the file are exactly right.
• CDN links are fine. If Claude pulls in Tailwind, Chart.js, or a Google Font from a CDN, leave it — those URLs resolve for every visitor. What you don't want is src="./app.js" pointing at a file that doesn't exist outside the chat.
• Test in the preview before sharing. The paste preview is the same rendering your visitor gets. If a button works there, it works at the link.

If Claude's answer is a Markdown document rather than an HTML artifact — a spec, a report, a table-heavy brief — the copy-paste route works the same way but renders through the Markdown pipeline instead. That case has its own walkthrough: share Claude's Markdown as a clean page.

How long the link lasts

A free link lives for 7 days, with or without an account — plenty for a review round or a demo. If the artifact is something people will keep opening — a tool your team uses, a page linked from elsewhere — a paid plan makes it permanent and adds the custom slug and password options mentioned above.

Claude's own published links don't advertise an expiry, but they're tied to your Claude account and its plan — and to that one-way unpublish behavior. Different trade-off, not strictly better or worse.

Which route should you take?

Use Claude's Publish button when the audience is fine landing on a Claude-hosted page — especially if remixing is a feature, like sharing a template other Claude users should copy and adapt.

Use copy-paste (or the extension) when you want a neutral, standalone URL: client deliverables, public pages from a Team/Enterprise account, anything that needs a password or a custom slug, or a page whose lifecycle you want in your own hands.

Bottom line: a Claude artifact is already a working webpage — the only question is where it lives. One click on Publish puts it on a Claude link; copying the code and pasting it into dochost (or using the extension's one-click button) puts it on a plain standalone URL, JavaScript and all.