Claude generates two kinds of things you might want to host, and they deploy differently:

A Claude artifact on claude.ai: a self-contained HTML page, or an interactive React component, that you view, edit, and reuse in a side panel (what artifacts are).
A Claude Design project from Anthropic Labs: a fuller design (landing pages, dashboards, forms) that exports as a zip of website files (Claude Design announcement).

The deploy path depends on whether the output is already static or still needs a build. This guide covers both cases. For a static HTML page, you drag one folder and you are live in seconds. For a React component, you scaffold it into a small project first.

Case 1: A static HTML artifact or a Claude Design export

Claude can produce a single-page, self-contained HTML file, and Claude Design exports a folder of static website files. Neither needs a build step, so Netlify Drop publishes them as they are.

Get the files onto your machine:
- Artifact: in the lower-right of the artifact window, use Download to save the .html file (or Copy the code into a file named index.html).
- Claude Design: use Export to download the project as a zip, then unzip it.
Make sure the folder has an index.html at its root. That file becomes your homepage.
Go to app.netlify.com/drop and drag the file or folder onto the page.

Netlify publishes it to a netlify.app URL in seconds. You can start without an account: deploy first, then claim the site by signing up (Netlify Drop quickstart). For a one-off artifact you want to share, this is one of the fastest paths to a live URL.

Keep the folder under 50 MB, and note that individual files over 10 MB can stall a drag-and-drop deploy. A single HTML artifact is nowhere near either limit.

Case 2: An interactive React component artifact

A React artifact runs inside Claude’s sandbox. The code you copy or download is usually JSX, not a runnable website, so you scaffold it into a small Vite project, build it, then deploy the output. (If your artifact downloads as one self-contained HTML file, treat it as Case 1 instead and follow the steps above.)

Create a Vite React project and install dependencies:

npm create vite@latest my-app -- --template react
cd my-app
npm install

Paste the artifact’s component code into src/, wire it into src/App.jsx, and install any packages the component imports (for example a charting or icon library).
Run it locally to confirm it works:
```
npm run dev
```
Build the static output:
```
npm run build
```
Vite writes the finished site to dist/.
Deploy dist/ one of two ways:
- Drag the dist/ folder to app.netlify.com/drop for a one-off deploy.
- Push the project to GitHub and connect it in Netlify (Add new site, then Import an existing project) with build command npm run build and publish directory dist. Every push then redeploys, and every pull request gets a Deploy Preview.

If the component uses routing

A component that uses client-side routing needs a fallback so nested routes survive a refresh. Add a _redirects file in public/ (Vite copies it into dist/):

/*    /index.html   200

The 200 status rewrites every path to index.html without changing the URL (redirect options). A single component with no routes does not need this rule.

Which approach is right for my project?

Downloaded an .html file, or a Claude Design zip, that opens correctly in a browser on its own: Case 1, drag it to Netlify Drop.
Copied React or JSX that references imports and does not run as a standalone file: Case 2, scaffold and build first.

If you are not sure, try opening the downloaded file directly in a browser. If it renders, it is static; if it shows nothing or errors, it needs the build step in Case 2.

Deploy Your Claude Artifacts or Design to Netlify

Case 1: A static HTML artifact or a Claude Design export

Case 2: An interactive React component artifact

If the component uses routing

Which approach is right for my project?

Resources