---
title: "Deploy Your Claude Artifacts or Design to Netlify"
description: "Publish a Claude Artifact or Design project to Netlify as static HTML through Netlify Drop or as a scaffolded React application."
source: "https://www.netlify.com/knowledge-base/deploy-your-claude-artifacts-to-netlify/"
last_updated: "2026-07-24T12:54:37.000Z"
---
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](https://support.claude.com/en/articles/9487310-what-are-artifacts-and-how-do-i-use-them)).
-   **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](https://www.anthropic.com/news/claude-design-anthropic-labs)).

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.

1.  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.
2.  Make sure the folder has an `index.html` at its root. That file becomes your homepage.
3.  Go to [app.netlify.com/drop](https://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](https://docs.netlify.com/start/quickstarts/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.)

1.  Create a Vite React project and install dependencies:
    
    ```
    npm create vite@latest my-app -- --template reactcd my-appnpm install
    ```
    
2.  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).
3.  Run it locally to confirm it works:
    
    ```
    npm run dev
    ```
    
4.  Build the static output:
    
    ```
    npm run build
    ```
    
    Vite writes the finished site to `dist/`.
5.  Deploy `dist/` one of two ways:
    -   Drag the `dist/` folder to [app.netlify.com/drop](https://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](https://docs.netlify.com/deploy/deploy-types/deploy-previews/).

### 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](https://docs.netlify.com/manage/routing/redirects/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.

## Resources

-   [What Claude artifacts are](https://support.claude.com/en/articles/9487310-what-are-artifacts-and-how-do-i-use-them)
-   [Claude Design (Anthropic Labs)](https://www.anthropic.com/news/claude-design-anthropic-labs)
-   [Netlify Drop quickstart](https://docs.netlify.com/start/quickstarts/netlify-drop-quickstart/)
-   [Create deploys](https://docs.netlify.com/deploy/create-deploys/)
-   [SPA redirect rules](https://docs.netlify.com/manage/routing/redirects/redirect-options/)