Recebi um código HTML do ChatGPT, Claude ou Gemini: como rodar e ver a página?

Você pediu ao ChatGPT um quiz, um cartão de aniversário ou uma pequena calculadora, e a resposta veio num bloco comprido de código que começa com <!DOCTYPE html>. Esse código é uma página da web inteira. No chat, ele é só texto, a não ser que o assistente mostre uma prévia. Este guia mostra como ver a página rodando no celular ou no computador que está na sua frente, o que a prévia de cada assistente faz e até onde ela vai.

Prefere um link? Na caixa de upload no alto desta página, mude para Colar código, cole o código e clique em Gerar meu link de prévia. Você recebe o link sem criar conta. Essa prévia não roda scripts, então um quiz ou um jogo ainda não responde nela. Clique em Guardar esta página — grátis, sem cartão e crie sua conta: a página vai para a sua conta, onde os scripts rodam e você pode publicá-la.

Baixou um arquivo .html em vez de receber o código? Veja como abrir um arquivo HTML no iPhone ou no Mac (em inglês). Se o Codex ou o Claude Code criou o arquivo no seu computador, veja como visualizar um arquivo HTML do Codex ou do Claude Code (em inglês).

Confira se você tem a página inteira

Uma página que dá para rodar é um único bloco de código que começa com <!DOCTYPE html> ou <html> e termina com </html>. O CSS fica numa tag <style>, e o JavaScript, em tags <script>. Em 25 de outubro de 2026, colamos 4 tipos de resposta no visualizador de HTML da Convika, no Chromium 156 e na versão de teste do WebKit 27.2 do Playwright, no tamanho de um iPhone 15. Os dois navegadores deram os mesmos resultados:

Se o assistente dividiu a página em blocos separados de HTML, CSS e JavaScript, ou escreveu um componente React, peça um arquivo só. Cole isto no mesmo chat:

Me dê a página inteira como um único arquivo HTML, de <!DOCTYPE html> a </html>, num único bloco de código.
Coloque o CSS numa tag <style> e o JavaScript em tags <script>.
Se for um componente React, reescreva como HTML e JavaScript puros, sem etapa de compilação.
Use links https:// completos para as imagens.

Copiar o código do ChatGPT, Claude ou Gemini

Os assistentes mudam os botões com frequência. A tabela traz o que as páginas de ajuda de cada um diziam em 25 de outubro de 2026. Não abrimos os apps, então ela só cita os controles que as páginas de ajuda citam.

• ChatGPT. A ajuda da OpenAI sobre blocos de código diz que “O ChatGPT geralmente coloca o código em um bloco de código”. Dependendo do bloco e das ações disponíveis para você, é possível “Copiar o código” e “Alternar entre Código e Prévia quando houver suporte à prévia”. E acrescenta: “As ações disponíveis variam conforme o plano, o dispositivo, as configurações do espaço de trabalho, o modelo e a etapa de lançamento”.
• Claude. O guia de artefatos da Anthropic diz: “Um artefato abre em sua própria janela ao lado de sua conversa.” Ele cita Exportar para os artefatos criados a partir de um modelo e os controles do painel para os legados, e nenhum controle para o resto. Como baixar um artefato do Claude como arquivo HTML (em inglês) mostra cada tipo, com o pedido que coloca o código num único bloco.
• Gemini. A ajuda do Canvas do Google diz: “Para abrir e editar o código, na parte superior direita do painel do Canvas, clique em Código.” Em Compartilhar e exportar, Copiar conteúdo serve “Para copiar o texto”. Para uma resposta comum, a ajuda de exportação do Google cita Exportar para: Replit, que “envia seu comando e a resposta do Gemini para o Replit”, e avisa que “As exportações para contas gratuitas do Replit ficam visíveis para todos no serviço”.

Seja qual for o assistente, copie tudo, do primeiro <!DOCTYPE html> até o último </html>. Uma página cortada no meio aparece quebrada ou em branco.

Rodar o código no navegador em 4 passos

Estes passos funcionam do mesmo jeito no celular e no computador. Você não instala nada e não faz upload de nada.

1. Copie o bloco de código inteiro

Copie do primeiro <!DOCTYPE html> até o último </html>, como na seção acima. Se a resposta tiver mais de um bloco, peça antes um arquivo só.

2. Abra o visualizador de HTML e escolha Colar código

Abra no navegador o visualizador de HTML grátis da Convika e escolha Colar código. Não precisa de conta. O código fica no seu navegador: ele só chega à Convika se você apertar Fazer upload desta página e gerar um link.

3. Cole e clique em Mostrar a página

Cole o código na caixa e clique em Mostrar a página. A página roda num quadro isolado do convika.com, com o CSS e o JavaScript dela. Ela carrega imagens, fontes e scripts de outros sites, como o Tailwind de uma CDN. O código colado pode ter até 2 MB.

4. Aperte todos os botões

Percorra a página: os botões, as abas, o quiz até o fim. Mude a largura para Celular para ver a página na largura de um celular. Para mudar alguma coisa, clique em Editar o código, edite e clique de novo em Mostrar a página. Se não tiver certeza do que o código de uma página faz, desmarque Executar scripts antes: aí a página mostra só o HTML e o CSS.

O que roda no visualizador e o que não roda

No mesmo teste de 25 de outubro, com a página inteira colada:

• Rodou: o script da própria página, um contador de cliques e o Tailwind de cdn.tailwindcss.com.
• Sem caixas pop-up: um botão que chamava alert() não mostrou nada, e o script seguiu na mesma hora. O quadro do visualizador não tem permissão para abrir caixas de diálogo nem janelas novas.
• Sem abas novas: um link com target="_blank" não abriu nada.
• Sem dados salvos: gravar no localStorage gerou um SecurityError, então um jogo que salva o recorde pode parar nessa linha.
• Sem arquivos ao lado da página: o código colado não traz junto style.css, game.js nem photo.png. Quando o código aponta para arquivos assim pelo nome, o visualizador lista esses nomes embaixo da página. Por que as imagens e o estilo somem (em inglês) explica como resolver.

Uma página que precisa de pop-ups ou de dados salvos roda melhor a partir de um arquivo no navegador, como na próxima seção.

Ou salve o código como arquivo .html

Para manter uma cópia da página, ou abrir sem o chat, salve o código num editor de texto simples, com um nome que termine em .html:

• No Mac. O manual do Editor de Texto da Apple diz para escolher Arquivo > Novo e depois Formatar > Usar Texto Simples. Cole o código, escolha Arquivo > Salvar, digite um nome como quiz.html e clique em Usar .html quando o Editor de Texto perguntar.
• No Windows. Cole o código no Bloco de Notas e salve com um nome que termine em .html. Depois, confira o nome no Explorador de Arquivos. Se as extensões não aparecerem, a ajuda da Microsoft sobre extensões de nome de arquivo diz para selecionar Exibir > Mostrar > Extensões de nome de arquivo. Um nome que termina em .html.txt é de um arquivo de texto: renomeie para terminar em .html. A Microsoft avisa que mudar a extensão “não converterá o arquivo em outro formato”, e aqui nem precisa: o texto dentro dele já é HTML.

Clique duas vezes no arquivo, e ele abre no navegador. Uma página com todo o código dentro do arquivo roda ali. Uma que carrega um script de módulo ou um arquivo de dados da pasta dela é bloqueada quando aberta do disco, como mostra o nosso teste no Mac (em inglês). No iPhone, tocar no arquivo no app Arquivos abre uma prévia que não rodou JavaScript no nosso teste no iOS 26.3; por isso, lá use o visualizador. Se o arquivo abrir como código ou como página em branco, veja por que um arquivo HTML mostra código ou uma página em branco (em inglês).

A prévia de cada assistente e até onde ela vai

Cada prévia serve para você mesmo conferir a página. Ela deixa de servir quando outra pessoa precisa abrir a página como página: um link compartilhado de um chat do ChatGPT mostra o chat, um link do Claude pede uma conta do Claude, e um link do Gemini precisa de um navegador em gemini.google.com. A OpenAI acrescenta: “Se uma prévia precisar de recursos externos, o ChatGPT poderá pedir permissão antes de se conectar.”

As fontes: a ajuda da OpenAI sobre compartilhamento, o guia de compartilhamento da Anthropic e a ajuda do Canvas do Google, cada uma lida em 25 de outubro de 2026 e relida em português em 30 de outubro de 2026.

Mandar a página como link

Um link abre em qualquer celular ou computador, sem conta de IA. Com a Convika:

1. Na caixa de upload no alto desta página, mude para Colar código, cole o código e clique em Gerar meu link de prévia. O link sai em segundos, sem conta. Ele funciona por 3 minutos, com scripts e formulários desligados. No visualizador, Fazer upload desta página e gerar um link cria o mesmo link.
2. Clique em Guardar esta página — grátis, sem cartão e crie sua conta. A página vai para a sua conta, e os scripts rodam na prévia do painel.
3. Publique a página pela tela dela e mande o link no lugar do código.

O guia de publicação do seu assistente explica o resto e compara outras hospedagens: ChatGPT, Claude, Gemini Canvas ou Grok (os dois em inglês). Se você procurava o canvas do ChatGPT, para onde foi o canvas do ChatGPT (em inglês) explica a mudança.

Perguntas frequentes

Como rodar código HTML do ChatGPT?

Copie o bloco de código inteiro e cole num visualizador de HTML no navegador. No visualizador de HTML grátis da Convika, escolha Colar código, cole e clique em Mostrar a página; a página roda com os scripts, e você não faz upload do código. Dentro do ChatGPT, a ajuda da OpenAI diz para selecionar Prévia num bloco de código compatível, e que as ações que você vê variam conforme o plano e o dispositivo.

Dá para abrir o HTML do ChatGPT no celular?

Sim. Copie o código no app do ChatGPT, abra um visualizador de HTML no navegador do celular, escolha Colar código e toque em Mostrar a página. No nosso teste no tamanho de um iPhone 15, na versão de teste do WebKit 27.2 do Playwright, o script da página colada e os estilos do Tailwind rodaram. Não testamos num celular de verdade. Se você salvar o código como arquivo e tocar nele no app Arquivos do iPhone, vai ver uma prévia que não rodou JavaScript no nosso teste no iOS 26.3.

Por que o HTML do ChatGPT aparece como texto quando eu salvo?

Normalmente, o arquivo não é um arquivo de texto simples com um nome que termina em .html. No Windows, mostre as extensões de nome de arquivo no Explorador de Arquivos e renomeie page.html.txt para page.html. No Mac, escolha Formatar > Usar Texto Simples no Editor de Texto antes de colar, e clique em Usar .html ao salvar. No nosso teste, um componente React apareceu como texto até no navegador, então peça HTML e JavaScript puros.

Como transformar o código do ChatGPT num site?

Publique o código numa hospedagem e mande o link que ela der. Na Convika, mude a caixa de upload para Colar código e cole para ter um link de prévia sem conta; depois guarde a página no plano Free e publique. O link abre a página em qualquer navegador, sem conta do ChatGPT nem da Convika. Como publicar o HTML do ChatGPT compara 6 hospedagens.

O Claude tem um botão para rodar o código?

Não há um botão à parte: o Claude roda a página como um artefato, que “abre em sua própria janela ao lado de sua conversa”, segundo a ajuda da Anthropic. Para rodar em outro lugar, você precisa do código. A ajuda cita Exportar para os artefatos criados a partir de um modelo e controles para copiar ou baixar só para os artefatos legados. Para qualquer outro artefato, peça ao Claude que coloque a página inteira num único bloco de código na resposta e cole num visualizador de HTML.

O Gemini tem um botão para rodar o código?

No Canvas, sim: o painel do Canvas mostra o app; Código, no canto superior direito, mostra o código; e Mostrar console mostra os erros. Para uma resposta comum, a ajuda do Google não cita nenhuma prévia. Ela cita Compartilhar e exportar > Exportar para: Replit, que aceita HTML e envia seu comando e a resposta do Gemini para o Replit. O Google avisa que as exportações para contas gratuitas do Replit ficam visíveis para todos.

Por que alguns botões não fazem nada no visualizador de HTML?

O visualizador roda a página num quadro isolado. No nosso teste, alert() não mostrou nenhuma caixa, um link que abre uma aba nova não abriu nada e o localStorage gerou um SecurityError. Um botão que depende de qualquer um desses não faz nada ali. Salve o código como arquivo .html e abra no navegador, ou publique. Arquivos que a página carrega pelo nome, como style.css, não vêm junto com o código colado de jeito nenhum.

Colar o código no visualizador faz upload dele?

Não. O seu navegador lê o código e mostra a página, e nada chega aos servidores da Convika. A própria página continua carregando o que ela usa de outros sites, como fontes, imagens e scripts. O código só vai para a Convika se você apertar Fazer upload desta página e gerar um link, que faz o upload para criar um link privado que funciona por 3 minutos.

Fontes

• Como trabalhar com blocos de escrita e blocos de código no ChatGPT (OpenAI) (conferido em 30 de outubro de 2026)
• Compartilhar conversas e tarefas agendadas no ChatGPT (OpenAI) (conferido em 30 de outubro de 2026)
• O que são artefatos e como usá-los? (Anthropic) (conferido em 30 de outubro de 2026)
• Compartilhar artefatos (Anthropic) (conferido em 30 de outubro de 2026)
• Criar documentos, apps e muito mais com o Canvas (Google) (conferido em 30 de outubro de 2026)
• Exportar respostas dos apps do Gemini (Google) (conferido em 30 de outubro de 2026)
• Trabalhe com documentos HTML usando o Editor de Texto do Mac (Apple) (conferido em 30 de outubro de 2026)
• Extensões de nome de arquivo comuns no Windows (Microsoft) (conferido em 30 de outubro de 2026)