O visualizador acima é a ferramenta inteira. Cole à esquerda, veja à direita. Serve para a página que o ChatGPT, o Claude ou o Gemini te entregou, um trecho de tutorial ou um e-mail em HTML que você quer conferir antes de enviar.
Como usar o visualizador
- Cole o HTML no lado esquerdo, ou clique em Abrir arquivo, ou solte um arquivo
.htmlali. - Veja a prévia. Ela atualiza um instante depois que você para de digitar.
- Confira no celular. Largura de celular mostra a página com 390 pixels.
- Mexendo num script? Desligue Rodar sozinho e use Rodar (ou Ctrl ou Cmd mais Enter), para um laço digitado pela metade não travar a aba.
- Mande. Quando ficar certo, peça o link logo abaixo.
No celular os dois lados viram abas: HTML e Prévia.
Rodar HTML, CSS e JavaScript online
Os scripts rodam. Blocos <style>, SVG, jogos em canvas e gráficos também. Se a página carrega uma biblioteca de CDN (Tailwind, Chart.js, Three.js), a prévia carrega junto, desde que você esteja online.
Duas coisas para saber:
- Arquivos ao lado do HTML não carregam. Um
<img src="foto.jpg">aponta para um arquivo no seu computador que o visualizador não vê. Use o endereço completo da imagem ou coloque a imagem dentro do HTML. Numa conta do Hostus dá para subir imagens, vídeo e fontes ao lado da página. - O que a página salva é temporário. Uma página que usa
localStoragefunciona, mas esquece tudo quando você edita o código ou recarrega.
Abrir um arquivo HTML no celular
Celular abre mal arquivo .html. No iPhone, o app Arquivos abre numa prévia rápida, e a Apple não garante que os scripts da página rodem ali. Abra esta página no celular, toque em Abrir arquivo, escolha o arquivo e vá para Prévia.
É seguro colar meu HTML aqui?
O código roda só no seu navegador, dentro de um quadro isolado. Esse quadro não lê este site, os cookies nem suas outras abas, e não consegue mudar a página em que você está. Nada vai para um servidor enquanto você cola e confere. O HTML só sai do seu navegador se você pedir o link.
O visualizador nunca carrega código a partir de um endereço. Não existe link que abra esta página já com o HTML de outra pessoa dentro.
Qual visualizador usar
| Ferramenta | Melhor para | O que sobra no fim |
|---|---|---|
| Visualizador do Hostus | Uma página inteira que você já tem, vinda de uma IA ou de um arquivo | Um link da página, que você manda, corrige no mesmo endereço e vê quem leu |
| CodePen ou JSFiddle | Escrever código do zero, com HTML, CSS e JS separados | Um pen ou fiddle com o código ao lado do resultado |
| W3Schools Tryit | Aprender uma tag ou propriedade de cada vez | Nada para guardar |
| Seu navegador (Arquivo, Abrir) | Olhar rápido no computador | Só você vê |
Da prévia para um link
Digite seu e-mail embaixo do visualizador e peça o link. A gente manda um link de acesso, e a página fica esperando na sua conta grátis do Hostus. De lá você pode:
- Mandar como
sua-pagina.hostus.page. Qualquer pessoa abre, sem conta. - Corrigir depois e manter o mesmo link.
- Ver quem abriu e até onde leu.
- Receber o que as pessoas digitam num formulário da página, sem configurar nada.
Daqui vão páginas de até 1 MB. Páginas maiores vão pelo painel.