Neste artigo
O que é a pré-visualização HTML ao vivo?
A pré-visualização HTML ao vivo é um editor de código no navegador que renderiza seu HTML, CSS e JavaScript em tempo real. Enquanto você digita, o painel de saída é atualizado instantaneamente, proporcionando feedback visual imediato sem alternar entre um editor e uma aba do navegador.
A pré-visualização executa dentro de um iframe sandbox com restrições rígidas de segurança. Isso significa que seu código executa em um ambiente isolado — não pode acessar a página principal, cookies ou armazenamento local. Você tem um ambiente seguro para experimentação sem qualquer risco para a aplicação host.
Como funciona a pré-visualização ao vivo
O editor combina seu HTML, CSS e JavaScript em um único documento e o injeta em um iframe sandbox. As atualizações são temporizadas para manter a pré-visualização responsiva sem sobrecarregar o navegador.
- Iframe sandbox — a pré-visualização executa apenas com sandbox="allow-scripts", bloqueando acesso à página principal, cookies, formulários e navegação para isolamento total
- Abas de código separadas — escreva HTML, CSS e JavaScript em painéis dedicados, cada um com edição apropriada para a sintaxe, combinados automaticamente na renderização
- Atualizações temporizadas — as alterações são aplicadas após uma breve pausa na digitação, mantendo a pré-visualização fluida e evitando re-renderizações constantes a cada tecla pressionada
Experimente gratuitamente — sem cadastro
Experimentar pré-visualização HTML ao vivo →Quando usar a pré-visualização HTML ao vivo
A pré-visualização ao vivo é ideal quando você precisa de feedback visual rápido sobre HTML e CSS sem um ambiente de desenvolvimento completo.
- Prototipagem rápida — teste ideias de layout, esquemas de cores e designs de componentes instantaneamente sem configurar ferramentas de build ou servidor de desenvolvimento
- Aprendizagem de HTML e CSS — iniciantes podem ver o efeito de cada tag e propriedade imediatamente, tornando o ciclo de aprendizagem muito mais rápido
- Teste de templates de email — visualize layouts de email HTML com estilos inline para verificar a renderização antes de enviar, já que clientes de email têm suporte CSS limitado
Perguntas frequentes
A pré-visualização é segura? Meu código pode acessar a página principal?
A pré-visualização é totalmente sandbox. O iframe usa sandbox="allow-scripts" sem allow-same-origin, o que significa que seu código pode executar JavaScript, mas não pode acessar o DOM da página principal, cookies, localStorage ou dados de sessão. É o mesmo modelo de segurança usado por plataformas como CodePen e JSFiddle.
Por que allow-same-origin não está incluído no sandbox?
Incluir allow-same-origin com allow-scripts permitiria ao código pré-visualizado escapar completamente do sandbox — poderia acessar cookies da página principal, modificar o DOM ou ler dados sensíveis. Omiti-lo garante isolamento completo. A contrapartida é que localStorage e sessionStorage não estão disponíveis na pré-visualização, mas esta é uma escolha deliberada de segurança.
Posso carregar bibliotecas externas de CSS ou JavaScript na pré-visualização?
Sim. Você pode adicionar tags link e script referenciando URLs de CDN (ex., Bootstrap, Tailwind, jQuery) no seu painel HTML. O iframe sandbox permite requisições de rede para carregar recursos externos. Apenas lembre-se de que scripts externos também executam sob as restrições do sandbox — eles também não podem acessar a página principal.