Free tool

Artifact Converter

Paste the React code the AI gave you and get a page you can host

JSX

Paste your artifact here

Or drag and drop a .jsx / .tsx file

0 lines0 characters0 bytes

Why your artifact shows a blank page

Claude artifacts and ChatGPT Canvas web outputs are usually a single React component: an export default function with JSX, hooks, and sometimes icons. Saving it as index.html and opening it in a browser renders nothing, because browsers do not understand JSX. This converter transpiles the JSX to plain JavaScript, loads React from a CDN, and wraps the result in a self-contained HTML page that any static host can serve.

What the converter changes

  1. 1JSX syntax is transpiled to plain JavaScript so the browser can run it without a build step.
  2. 2TypeScript type annotations are stripped. The logic stays the same, only the types are removed.
  3. 3Bare import specifiers (react, lucide-react, recharts) are mapped to CDN URLs via an import map, so the page loads its dependencies on its own.
  4. 4The component is mounted into a root div with React's createRoot, wrapped in an error boundary that shows failures instead of a blank page.

What does not transfer

Artifact-only APIs like window.claude or window.fs only work inside the AI's sandbox and will fail on a live page. Packages outside the allowlist (react, lucide-react, recharts, clsx, class-variance-authority) need a build step and cannot be loaded from a CDN. Relative imports and shadcn/ui paths assume project files that do not exist in a single-file artifact. The converter flags each of these so you know what to fix before publishing.

FAQ

A Claude artifact is usually a single React component: an exported function that returns JSX, often with useState hooks and UI libraries like lucide-react. A browser cannot render JSX directly, which is why downloading the artifact and opening it shows a blank page.

Ready to share?

Paste the React code the AI gave you and get a page you can host

Convert and publishYour code stays in your browser. Nothing is stored unless you publish.