How to turn a Claude artifact into a real website (with your own domain)

Claude’s artifacts are one of the fastest ways to go from idea to working interface. Ask for a pricing calculator, a landing page or a little game and a few seconds later it’s running in the side panel.

Sooner or later, though, you want it somewhere else: on your own domain, in front of customers, with a contact form that actually sends you messages. This guide shows how.

Two kinds of artifacts

Claude produces two main kinds of web artifacts, and they publish slightly differently.

HTML artifacts are complete web pages — <html>, CSS and JavaScript in one file. These are the easiest: they can be hosted exactly as they are.

React artifacts are a single React component, usually styled with Tailwind CSS and often using icons from lucide-react or charts from recharts. A component isn’t a web page on its own — something has to load React, render the component into a page and provide the libraries it imports.

Publishing an HTML artifact

1. Open the artifact and switch to the code view.
2. Copy the entire code.
3. In StaticHero, create a site and choose Paste code.
4. Paste and publish.

That’s the whole process. The artifact is now a normal web page at an address you control.

Publishing a React artifact

The steps are the same — paste the component into Paste code — but StaticHero does extra work behind the scenes:

• detects that the code is a React component,
• generates an HTML page that loads React 18 and Tailwind CSS,
• adds an import map so lucide-react, recharts, framer-motion, date-fns, lodash and other common libraries resolve,
• compiles the JSX in the browser and renders your component.

No bundler, no npm install, no build step.

Add a working contact form

Artifacts often include a form that looks great but goes nowhere — there’s no server to receive the data. Fix it with one change: set the form’s action to a StaticHero form endpoint.

<form action="/_forms/contact" method="POST">
  <input name="name" required>
  <input name="email" type="email" required>
  <textarea name="message"></textarea>
  <button>Send</button>
</form>

For a React artifact that handles submit in JavaScript, send a fetch instead:

await fetch("/_forms/contact", {
  method: "POST",
  headers: { "Content-Type": "application/json", Accept: "application/json" },
  body: JSON.stringify({ name, email, message }),
});

Submissions appear in your dashboard and your inbox.

Connect your own domain

On a paid plan, add your domain in the site’s Domains tab and create one DNS record at your registrar. HTTPS is set up automatically.

Iterating with Claude

The workflow that works best:

1. Ask Claude for changes in the same conversation.
2. Copy the updated artifact.
3. Paste it into your site’s Overview → Paste code.

Each paste creates a new version, so if Claude’s latest idea breaks something, restore the previous version with one click.

Before you share it publicly

• Replace placeholder copy, sample names and invented statistics.
• Check that links point to real pages.
• Make sure no API keys are embedded in the code.
• Give the page a real <title> — it’s what shows in browser tabs, search results and link previews.

Claude makes the building fast. A proper host makes it last.