Can I run a Claude artifact outside Claude?

Yes. An artifact is just a single self-contained HTML file, so once you copy its code into a .html file — or press the artifact's Download button — it runs in any browser on your computer with no Claude tab, account, or server involved.

Why does my saved file open as plain text instead of the app?

The extension almost certainly still ends in .txt. Notepad's Save As dialog defaults to Text Documents, and browsers refuse to render a .txt file as a page. Save the file again with a name that ends in .html, exactly as in step 8, and it will run.

Is downloading an artifact different from publishing it?

Yes. Downloading hands you the .html file so you can run and edit it on your own machine — nothing leaves your computer. Publishing shares a hosted link that still depends on Claude's infrastructure. The local route in this guide gives you full ownership of the file.

What about React artifacts — can those run locally too?

Yes, but they need a project rather than one file. Matt Palmer's workflow: scaffold a project with npm create vite, install Tailwind and shadcn/ui (Claude favors shadcn, so imports like @/components/ui resolve once you add the same components), paste the artifact code into App.jsx, and run npm run dev — Vite's hot reload then shows every edit instantly.

Does the exported file still work without an internet connection?

The file itself runs in your browser, so self-contained artifacts such as canvas games keep working offline. What you lose without a connection is the chat half: asking Claude for changes requires claude.ai, and artifacts that call external APIs obviously still need the network for those calls.

Claude Artifacts · guía de ejecución local

Ejecuta artefactos de Claude en local: la ruta HTML sin instalación (2026)

Cada artefacto de Claude es un único archivo HTML autosuficiente. Esta guía cubre todo el flujo de exportación — copiar el código, guardarlo como .html, hacer doble clic y la app corre en tu propio navegador — además del atajo de descarga integrado y la ruta con Vite para artefactos React.

Ver los 12 pasos Ejecutar artefactos React en línea

La versión corta

Un artefacto de Claude llega como un único archivo HTML: el chat a la izquierda y el panel de código completo a la derecha, así que todo lo necesario para ejecutarlo fuera de Claude ya está en tu pantalla.
Ruta de copia: selecciona todo el código, pégalo en un archivo de texto nuevo, guárdalo con extensión .html y haz doble clic — el artefacto se abre en tu navegador predeterminado.
Ruta de descarga: la tarjeta del artefacto en Claude incluye un botón Download que guarda el .html directamente en tu carpeta de descargas, sin necesidad de copiar y pegar.
Vigila la extensión: el Bloc de notas guarda por defecto en .txt, y un navegador no mostrará un .txt como página. Guardar como HTML es justo el paso que hace que funcione.

Make an HTML File from a Claude.ai Game File

Canal:Karl Kapp1:53

Ver en YouTube

Esta guía traduce a texto propio el flujo demostrado en el vídeo, paso a paso; las capturas provienen de esa grabación y cada una enlaza al momento exacto en que fue tomada.

La ruta Vite + React + shadcn/ui descrita en las FAQ proviene de "Editing Claude Artifacts locally with Vite, React, and Shadcn/ui" de Matt Palmer — citada como segunda fuente.

Ejecuta tu artefacto fuera de Claude, paso a paso

1
Abre el panel de código del artefacto
En Claude, abre la conversación que contiene tu artefacto y despliega el panel de código para que el chat y el fuente queden lado a lado. Buscas un único documento HTML continuo — estilos y scripts incluidos — porque ese archivo solitario es la app entera.
El chat a la izquierda, el fuente HTML del artefacto a la derecha — ese único archivo es toda la app.Ver en 0:02
2
Localiza el botón Copy del panel de código
La cabecera del panel muestra el nombre del artefacto con una etiqueta HTML junto al botón Copy. Un clic copia la versión actual completa del código — no hace falta seleccionar nada a mano.
Un clic en Copy se lleva la revisión actual completa del artefacto.Ver en 0:08
3
Prueba el artefacto antes de exportarlo
Cambia a la vista previa y usa la app de verdad — en este ejemplo, un minijuego de recolectar puntos con círculos enemigos, marcador y preguntas que aparecen al recogerlos. Comprueba que la revisión actual se comporta como quieres: lo que corre en la vista previa es justo lo que vas a exportar.
La vista previa ejecuta exactamente la revisión que vas a copiar — pruébala aquí primero.Ver en 0:20
4
Copia todo el código HTML
Desplázate por el panel desde el DOCTYPE inicial hasta la etiqueta script de cierre para confirmar que no falta nada, y cópialo entero. Si al pegar no funciona, una copia incompleta es el primer sospechoso.
Del DOCTYPE a la última etiqueta script — la copia debe ser completa.Ver en 0:30
5
Crea un documento de texto nuevo en el escritorio
En Windows, haz clic derecho en una zona vacía del escritorio y elige Nuevo y luego Documento de texto. Ya tienes un archivo en blanco para recibir el código — sin instalar ningún editor; el Bloc de notas basta.
Clic derecho en el escritorio, Nuevo, Documento de texto — esta ruta solo necesita el Bloc de notas.Ver en 0:47
6
Abre el archivo en blanco con el Bloc de notas
Haz doble clic en el documento nuevo: se abre en el Bloc de notas con el cursor en la línea 1, columna 1 de un archivo vacío. Deja la pestaña de Claude detrás — durante un minuto vas a saltar entre ambas ventanas.
Un Bloc de notas vacío en línea 1, columna 1, con Claude esperando detrás.Ver en 0:55
7
Pega el código del artefacto en el archivo
Pega todo lo copiado. El archivo se llena al instante de HTML y JavaScript — aquí, las funciones de dibujo del juego en canvas y su bucle principal. Si el pegado parece cortado, vuelve al paso 4 y copia de nuevo.
El artefacto entero vive ya en un simple archivo de texto de tu equipo.Ver en 0:57
8
Guárdalo con extensión .html
Abre Archivo, Guardar como, y dale al archivo un nombre real terminado en .html. El tipo del diálogo sigue diciendo Documentos de texto — da igual; lo que decide es el .html que escribes en el nombre, porque los navegadores solo renderizan las páginas que reconocen como HTML.
El nombre lo decide todo: game.html funciona, game.txt no.Ver en 1:01
9
Ante el aviso de reemplazo, cambia el nombre
Si Windows avisa de que el archivo ya existe, elige No y toma un nombre nuevo — en la grabación game.html ya estaba guardado, así que el segundo export pasa a ser game2.html. Nombres distintos conservan en disco cada versión del artefacto en vez de sobrescribirlas.
No al reemplazo, nombre nuevo: game2.html deja intacta la exportación anterior.Ver en 1:07
10
Haz doble clic en el archivo y juega
Encuentra el archivo guardado en tu escritorio y haz doble clic. Se abre en tu navegador predeterminado desde una dirección file:/// de tu propia máquina — la pantalla de inicio, el marcador y los círculos enemigos funcionan exactamente igual que dentro de Claude, sin servidor y sin pestaña de claude.ai.
file:///...Desktop/game2.html — el artefacto corre ya por completo en tu máquina.Ver en 1:32
11
Atajo: el botón Download del propio Claude
Copiar a mano no es el único camino. Claude también muestra un botón Download bajo la tarjeta del artefacto — a veces junto a un segundo archivo, como una guía de montaje, más una opción Download all. Un clic y el .html aterriza directo en tu carpeta de descargas, sin Bloc de notas de por medio.
El botón Download de la tarjeta guarda el .html directamente — sin copiar ni pegar.Ver en 1:44
12
Comprueba qué ha caído en tus descargas
La lista de descargas del navegador confirma los archivos exportados — aquí DKapp_Game_Revised.html de unos 20 KB. Haz doble clic en cualquiera para ejecutarlo en local como en el paso 10, o ábrelo en un editor de texto para leer el código.
Un .html de 20 KB en la lista de descargas — el artefacto entero, listo para funcionar sin conexión.Ver en 1:50