Herramienta gratis

Artifact Converter

Pega el código React que te dio la IA y obtén una página que puedes alojar

JSX

Pega tu artefacto aquí

O arrastra y suelta un archivo .jsx / .tsx

0 líneas0 caracteres0 bytes

¿Ya lo convertiste? Publica el artefacto como sitio con SSL y una URL real.

Por qué tu artefacto muestra una página en blanco

Los artefactos de Claude y los resultados web de ChatGPT Canvas suelen ser un único componente React: una función export default con JSX, hooks y, a veces, iconos. Si lo guardas como index.html y lo abres en un navegador, no se muestra nada, porque los navegadores no entienden JSX. Este conversor transpila el JSX a JavaScript simple, carga React desde una CDN y envuelve el resultado en una página HTML autónoma que cualquier alojamiento estático puede servir.

Qué cambia el conversor

  1. 1La sintaxis JSX se transpila a JavaScript simple para que el navegador pueda ejecutarla sin paso de compilación.
  2. 2Se eliminan las anotaciones de tipo de TypeScript. La lógica no cambia, solo se quitan los tipos.
  3. 3Los especificadores de importación sin ruta (react, lucide-react, recharts) se asignan a URL de CDN mediante un import map, así la página carga sus dependencias por sí sola.
  4. 4El componente se monta en un div raíz con createRoot de React, dentro de un error boundary que muestra los fallos en lugar de una página en blanco.

Lo que no se traslada

Las API exclusivas de los artefactos, como window.claude o window.fs, solo funcionan dentro del sandbox de la IA y fallarán en una página en línea. Los paquetes fuera de la lista permitida (react, lucide-react, recharts, clsx, class-variance-authority) necesitan un paso de compilación y no se pueden cargar desde una CDN. Las importaciones relativas y las rutas de shadcn/ui dan por hecho archivos de proyecto que no existen en un artefacto de un solo archivo. El conversor señala cada uno de estos casos para que sepas qué corregir antes de publicar.

Preguntas frecuentes

Un artefacto de Claude suele ser un único componente React: una función exportada que devuelve JSX, a menudo con hooks useState y bibliotecas de interfaz como lucide-react. Un navegador no puede renderizar JSX directamente, por eso al descargar el artefacto y abrirlo ves una página en blanco.

¿Listo para compartirlo?

Pega el código React que te dio la IA y obtén una página que puedes alojar

Convertir y publicarTu código se queda en tu navegador. No se guarda nada a menos que publiques.