ChatGPT, Claude o Gemini me dio código HTML: ¿cómo lo ejecuto y veo la página?

Le pediste a ChatGPT un cuestionario, una tarjeta de cumpleaños o una pequeña calculadora, y la respuesta es un bloque largo de código que empieza con <!DOCTYPE html>. Ese código es una página web entera. En el chat es texto, salvo que el asistente muestre una vista previa. Esta guía explica cómo verlo funcionar en el teléfono o la computadora que tienes delante, qué hace la vista previa de cada asistente y dónde se queda corta.

¿Prefieres un enlace? En el cuadro de subida de arriba, cambia a Pegar código, pega el código y pulsa Obtener mi enlace de vista previa. Obtienes el enlace sin cuenta. Esa vista previa no ejecuta scripts, así que un cuestionario o un juego todavía no responderá ahí. Pulsa Conservar esta página: gratis, sin tarjeta y regístrate: la página pasa a tu cuenta, donde sus scripts funcionan y puedes publicarla.

¿Tienes un archivo .html descargado en lugar de código? Consulta cómo abrir un archivo HTML en el iPhone o en una Mac (en inglés). Si Codex o Claude Code escribió el archivo en tu computadora, consulta cómo previsualizar un archivo HTML de Codex o Claude Code (en inglés).

Comprueba que tienes una página entera

Una página que puedes ejecutar es un solo bloque de código que empieza con <!DOCTYPE html> o <html> y termina con </html>. Su CSS está en una etiqueta <style> y su JavaScript en etiquetas <script>. El 25 de octubre de 2026 pegamos 4 tipos de respuestas en el visor de HTML de Convika, en Chromium 156 y en la versión de prueba WebKit 27.2 de Playwright, al tamaño de un iPhone 15. Los dos navegadores dieron los mismos resultados:

Si el asistente dividió la página en bloques separados de HTML, CSS y JavaScript, o escribió un componente de React, pídele un solo archivo. Pega esto en el mismo chat:

Dame la página entera como un solo archivo HTML, de <!DOCTYPE html> a </html>, en un solo bloque de código.
Pon el CSS en una etiqueta <style> y el JavaScript en etiquetas <script>.
Si es un componente de React, reescríbelo como HTML y JavaScript simples, sin paso de compilación.
Usa direcciones https:// completas para las imágenes.

Copia el código de ChatGPT, Claude o Gemini

Los asistentes cambian sus botones a menudo. La tabla recoge lo que decían las páginas de ayuda de cada uno el 25 de octubre de 2026. No abrimos las apps, así que solo nombra los controles que nombran las páginas de ayuda.

• ChatGPT. La ayuda de OpenAI sobre bloques de código dice que “ChatGPT suele colocar el código en un bloque de código”. Según el bloque y las acciones que tengas, puedes “Copiar el código” y “Alternar entre Código y Vista previa cuando la vista previa esté disponible”. Y agrega: “Las acciones disponibles varían según el plan, el dispositivo, la configuración del Espacio de trabajo, el modelo y la etapa de lanzamiento”.
• Claude. La guía de artefactos de Anthropic dice: “Un artefacto se abre en su propia ventana junto a tu conversación”. Nombra Exportar para los artefactos creados desde una plantilla y los controles del panel para los heredados, y ningún control para el resto. How to download a Claude artifact as an HTML file (en inglés) repasa cada tipo, con la petición que pone el código en un solo bloque.
• Gemini. La ayuda de Canvas de Google dice: “Para abrir y editar el código, en la parte superior derecha del panel de Canvas, haz clic en Código”. En Compartir y exportar, Copiar el contenido sirve “para copiar el texto”. Para una respuesta normal, la ayuda de exportación de Google nombra Exportar a Replit, que envía “tu instrucción y la respuesta de la app de Gemini” a Replit, y advierte que “Las exportaciones a cuentas de Replit sin cargo se pueden ver públicamente en Replit”.

Sea cual sea el asistente que la hizo, copia todo desde el primer <!DOCTYPE html> hasta el último </html>. Una página cortada a la mitad se ve rota o en blanco.

Ejecuta el código en tu navegador en 4 pasos

Estos pasos funcionan igual en un teléfono y en una computadora. No se instala nada, y no se sube nada.

1. Copia todo el bloque de código

Copia desde el primer <!DOCTYPE html> hasta el último </html>, como en la sección anterior. Si la respuesta tiene más de un bloque, pide primero un solo archivo.

2. Abre el visor de HTML y elige Pegar código

Ve al visor de HTML gratis de Convika en tu navegador y elige Pegar código. No necesita cuenta. El código se queda en tu navegador: solo llega a Convika si pulsas Obtener un enlace subiendo esta página.

3. Pégalo y pulsa Mostrar la página

Pega el código en el cuadro y pulsa Mostrar la página. La página funciona en un marco aislado de convika.com, con su CSS y su JavaScript. Carga imágenes, fuentes y scripts de otros sitios, como Tailwind desde una CDN. El código pegado puede ocupar hasta 2 MB.

4. Pulsa cada botón

Recorre la página: los botones, las pestañas, el cuestionario hasta el final. Cambia el ancho a Teléfono para verla al ancho de un teléfono. Para cambiar algo, pulsa Editar el código, edítalo y vuelve a pulsar Mostrar la página. Si no sabes bien qué hace el código de una página, desactiva antes Ejecutar scripts: así la página muestra solo su HTML y su CSS.

Qué funciona en el visor y qué no

En la misma prueba del 25 de octubre, con la página entera pegada:

• Funcionó: el script de la propia página, un contador de clics y Tailwind desde cdn.tailwindcss.com.
• Sin ventanas emergentes: un botón que llamaba a alert() no mostró nada, y el script siguió de inmediato. El marco del visor no puede abrir cuadros de diálogo ni ventanas nuevas.
• Sin pestañas nuevas: un enlace con target="_blank" no abrió nada.
• Sin datos guardados: escribir en localStorage lanzó un SecurityError, así que un juego que guarda el récord puede detenerse en esa línea.
• Sin archivos junto a la página: el código pegado no puede traer style.css, game.js ni photo.png. Cuando el código nombra archivos así, el visor los nombra debajo de la página. Why images and styling go missing (en inglés) explica cómo arreglarlo.

Una página que necesita ventanas emergentes o datos guardados funciona mejor desde un archivo en tu navegador, como en la sección siguiente.

Mejor, guarda el código como archivo .html

Para conservar la página, o para abrirla sin el chat, guarda el código en un editor de texto sin formato con un nombre que termine en .html:

• En una Mac. La guía de Editor de Texto de Apple dice que elijas Archivo > Nuevo y luego Formato > Convertir a texto sin formato. Pega el código, elige Archivo > Guardar, escribe un nombre como quiz.html y haz clic en Usar .html cuando Editor de Texto te lo pregunte.
• En Windows. Pega el código en el Bloc de notas y guárdalo con un nombre que termine en .html. Luego revisa el nombre en el Explorador de archivos. Si no ves las extensiones, la ayuda de Microsoft sobre extensiones de nombre de archivo dice que selecciones Ver > Mostrar > Extensiones de nombre de archivo. Un nombre que termina en .html.txt es de un archivo de texto: cámbialo para que termine en .html. Microsoft aclara que cambiar la extensión “no convertirá el archivo a otro formato”, y aquí no hace falta: el texto de dentro ya es HTML.

Haz doble clic en el archivo y se abre en tu navegador. Una página con todo su código dentro del archivo funciona ahí. Una que carga un script de módulo o un archivo de datos de su carpeta queda bloqueada desde el disco, como muestra nuestra prueba en Mac (en inglés). En un iPhone, tocar el archivo en Archivos abre una vista previa que no ejecutó JavaScript en nuestra prueba con iOS 26.3, así que ahí usa el visor. Si el archivo se abre como código o como una página en blanco, consulta por qué un archivo HTML muestra código o una página en blanco (en inglés).

La vista previa de cada asistente y dónde se queda corta

Cada vista previa basta para que revises la página tú mismo. Se queda corta cuando otra persona tiene que abrir la página como página: un enlace compartido de un chat de ChatGPT muestra el chat, un enlace de Claude pide una cuenta de Claude y un enlace de Gemini necesita un navegador en gemini.google.com. OpenAI agrega que “Si una vista previa necesita recursos externos, ChatGPT puede pedir permiso antes de conectarse”.

Las fuentes: la ayuda de OpenAI sobre compartir, la guía de Anthropic sobre compartir y la ayuda de Canvas de Google, leídas el 25 de octubre de 2026.

Envíala como enlace

Un enlace se abre en cualquier teléfono o computadora, sin cuenta de ninguna IA. Con Convika:

1. En el cuadro de subida de arriba, cambia a Pegar código, pega el código y pulsa Obtener mi enlace de vista previa. En segundos tienes un enlace, sin cuenta. Funciona durante 3 minutos, con los scripts y los formularios desactivados. En el visor, Obtener un enlace subiendo esta página crea el mismo enlace.
2. Pulsa Conservar esta página: gratis, sin tarjeta y regístrate. La página pasa a tu cuenta, y sus scripts funcionan en la vista previa del panel.
3. Publícala desde la pantalla de la página y envía el enlace en lugar del código.

La guía de publicación de tu asistente explica el resto, con otros servicios comparados: ChatGPT, Claude, Gemini Canvas o Grok (en inglés). Si buscabas el canvas de ChatGPT, dónde quedó el canvas de ChatGPT explica el cambio.

Preguntas frecuentes

¿Cómo ejecuto el código HTML de ChatGPT?

Copia todo el bloque de código y pégalo en un visor de HTML en tu navegador. En el visor de HTML gratis de Convika, elige Pegar código, pega y pulsa Mostrar la página; la página funciona con sus scripts, y el código no se sube. Dentro de ChatGPT, la ayuda de OpenAI dice que selecciones Vista previa en un bloque de código compatible, y que las acciones que ves varían según el plan y el dispositivo.

¿Puedo abrir el HTML de ChatGPT en mi teléfono?

Sí. Copia el código en la app de ChatGPT, abre un visor de HTML en el navegador de tu teléfono, elige Pegar código y pulsa Mostrar la página. En nuestra prueba al tamaño de un iPhone 15, en la versión de prueba WebKit 27.2 de Playwright, funcionaron el script de la página pegada y sus estilos de Tailwind. No probamos un teléfono físico. Si guardas el código como archivo y lo tocas en la app Archivos del iPhone, obtienes una vista previa que no ejecutó JavaScript en nuestra prueba con iOS 26.3.

¿Por qué el HTML de ChatGPT se ve como texto cuando lo guardo?

Normalmente el archivo no es un archivo de texto sin formato con un nombre que termina en .html. En Windows, muestra las extensiones de nombre de archivo en el Explorador de archivos y cambia page.html.txt por page.html. En una Mac, elige Formato > Convertir a texto sin formato en Editor de Texto antes de pegar, y haz clic en Usar .html al guardar. En nuestra prueba, un componente de React se vio como texto incluso en un navegador, así que pide HTML y JavaScript simples.

¿Cómo convierto el código de ChatGPT en una página web?

Publica el código en un servicio de alojamiento y envía el enlace que te da. En Convika, cambia el cuadro de subida a Pegar código y pégalo para obtener un enlace de vista previa sin cuenta; luego conserva la página con el plan Free y publícala. El enlace abre la página en cualquier navegador, sin cuenta de ChatGPT ni de Convika. Cómo publicar el HTML de ChatGPT compara 6 servicios.

¿Claude tiene un botón para ejecutar el código?

No hay un botón aparte: Claude ejecuta la página como un artefacto, que “se abre en su propia ventana junto a tu conversación”, dice la ayuda de Anthropic. Para ejecutarla en otro lugar, necesitas el código. La ayuda nombra Exportar para los artefactos de plantilla y los controles para copiar o descargar solo para los artefactos heredados. Para cualquier otro artefacto, pídele a Claude que ponga la página entera en un solo bloque de código en su respuesta y pégala en un visor de HTML.

¿Gemini tiene un botón para ejecutar el código?

En Canvas, sí: el panel de Canvas muestra la app, Código, arriba a la derecha, muestra el código y Mostrar consola muestra sus errores. Para una respuesta normal, la ayuda de Google no nombra ninguna vista previa. Nombra Compartir y exportar > Exportar a Replit, que admite HTML y envía tu instrucción y la respuesta de Gemini a Replit. Google advierte que las exportaciones a cuentas de Replit sin cargo se pueden ver públicamente.

¿Por qué algunos botones no hacen nada en el visor de HTML?

El visor ejecuta la página en un marco aislado. En nuestra prueba, alert() no mostró ningún cuadro, un enlace que abre una pestaña nueva no abrió nada y localStorage lanzó un SecurityError. Un botón que depende de alguno de ellos no hace nada ahí. Guarda el código como archivo .html y ábrelo en tu navegador, o publícalo. Los archivos que la página carga por su nombre, como style.css, no pueden venir con el código pegado.

¿Se sube mi código cuando lo pego en el visor?

No. Tu navegador lee el código y muestra la página, y nada llega a los servidores de Convika. La página sigue cargando lo que enlaza, como fuentes, imágenes y scripts de otros sitios. El código solo va a Convika si pulsas Obtener un enlace subiendo esta página, que lo sube para crear un enlace privado que funciona durante 3 minutos.

Fuentes

• Trabajar con bloques de redacción y bloques de código en ChatGPT (OpenAI) (consultado el 29 de octubre de 2026)
• Compartir conversaciones y tareas programadas en ChatGPT (OpenAI) (consultado el 29 de octubre de 2026)
• ¿Qué son los artefactos y cómo los uso? (Anthropic) (consultado el 29 de octubre de 2026)
• Compartir artefactos (Anthropic) (consultado el 29 de octubre de 2026)
• Cómo crear documentos, apps y más con Canvas (Google) (consultado el 29 de octubre de 2026)
• Cómo exportar respuestas de las Apps con Gemini (Google) (consultado el 29 de octubre de 2026)
• Trabajar con documentos HTML en Editor de Texto en la Mac (Apple) (consultado el 29 de octubre de 2026)
• Extensiones de nombre de archivo comunes en Windows (Microsoft) (consultado el 29 de octubre de 2026)