Como executar HTML, CSS e JavaScript no navegador

Cole HTML com CSS e JavaScript no editor e clique em Prévia: o código abre em uma nova janela do navegador, onde a marcação é renderizada e os scripts são executados. É uma forma rápida de ver como um trecho, uma mudança de layout ou um pequeno script de DOM se comporta em um navegador de verdade, sem criar arquivos nem subir um servidor local.

A página colada roda dentro de um quadro em sandbox, separada deste site. Os scripts funcionam e os diálogos também, mas o código não consegue ler o armazenamento nem o DOM desta página, e nada do que você digita é enviado: a prévia acontece inteiramente no seu navegador.

  1. Cole ou digite o código no editor: um documento HTML completo ou um trecho, como uma div com um bloco de estilo e outro de script.
  2. Clique em Prévia. Uma nova janela abre com a página renderizada; se o navegador bloquear pop-ups, a página avisa — permita pop-ups para voritools.com e clique de novo.
  3. Use Selecionar tudo, Copiar e Limpar durante as iterações: Selecionar tudo marca o editor inteiro, Copiar coloca o conteúdo na área de transferência e Limpar esvazia a caixa para começar de novo.
  4. Feche a janela de prévia ao terminar; nem o código nem a prévia ficam salvos, então guarde sua própria cópia do que quiser reaproveitar.

O que acontece ao clicar em Prévia

Como a prévia é isolada

A janela de prévia carrega seu código em um iframe com o atributo sandbox definido como allow-scripts, allow-modals, allow-forms e allow-popups. Por isso os scripts rodam, os diálogos (alert, confirm, prompt) e os controles de formulário funcionam, e os links podem abrir outras janelas, enquanto o quadro é tratado como uma origem opaca.

Essa origem opaca é o ponto principal: uma página dentro do sandbox não alcança o documento pai nem lê o localStorage deste site, então código colado de uma fonte desconhecida não mexe na sua aba do VoriTools. Ela também não consegue levar esta página para outro endereço; o que ela fizer fica no próprio quadro.

O que dá para checar com ela

Para o código que você fornece, a prévia se comporta como uma aba do navegador: o HTML é interpretado, o CSS é aplicado, scripts internos e externos rodam e as mudanças no DOM aparecem na hora. Redimensionar a janela de prévia é uma forma prática de ver media queries e layouts flexíveis se ajustarem.

A ferramenta não adiciona um console de erros próprio: quando um script falha, você vê o que uma página comum mostraria, muitas vezes um quadro em branco ou pela metade. Isso faz da prévia uma boa verificação rápida, e as ferramentas de desenvolvedor do navegador são o lugar de olhar quando algo quebra.

Limites, privacidade e observações práticas

Nada é enviado ao VoriTools: o código é interpretado e executado pelo seu navegador e nenhuma requisição o carrega. Também não há execução no servidor, então código PHP, Python ou de banco de dados não roda aqui.

O editor é simples de propósito — sem realce de sintaxe, carregamento de arquivos ou histórico — e recarregar a página o apaga. Código que depende de cookies ou localStorage não encontra sessão guardada na prévia isolada; e, se o bloqueador de pop-ups impedir a janela, a página mostra uma mensagem em vez da prévia.

Ferramentas recentes: