code_blocks Editor HTML/CSS/JS ao Vivo star

Como Funciona

Digite nas abas HTML, CSS e JS e o painel de prévia é atualizado conforme você digita, renderizando o resultado combinado dentro de um iframe isolado (sandbox). O atributo sandbox é definido como allow-scripts sem allow-same-origin, o que é o que realmente torna isso seguro: scripts executados dentro da prévia rodam em uma origem distinta e opaca, então não conseguem ler os cookies, o armazenamento local ou o DOM desta página, e esta página também não consegue acessar o iframe. Esse isolamento é uma fronteira de segurança imposta pelo próprio navegador, não apenas um quadro visual — é o mesmo mecanismo que os sites usam para incorporar com segurança conteúdo de terceiros não confiável (anúncios, widgets, trechos enviados por usuários), sem precisar confiar no código que está dentro.

A edição em si é deliberadamente simples: três áreas de texto, sem realce de sintaxe, sem autocompletar. Essa é uma escolha consciente, não um recurso ausente — uma experiência de edição de código de verdade (identificar palavras-chave, combinar parênteses, autocompletar tags) significa carregar uma biblioteca de editor de terceiros substancial, o que adiciona peso e um atraso de carregamento antes que você consiga digitar um único caractere. Esta ferramenta otimiza para o oposto: abrir a página e começar a digitar imediatamente, com zero dependências e nenhuma etapa de build de qualquer tipo.

Cada tecla pressionada em qualquer uma das três abas dispara uma reconstrução: o HTML atual, o CSS atual envolvido em uma tag <style> e o JS atual envolvido em uma tag <script> são montados em um único documento e escritos no iframe. Não há comparação incremental (diff) nem aplicação de patches — o documento de prévia inteiro é simplesmente substituído, o que é rápido o suficiente nessa escala para parecer instantâneo, mantendo a implementação simples.

Bom Saber

Como tudo — edição e renderização — acontece no seu navegador, não há ida e volta a um servidor nem necessidade de conta. É bem adequado para testar rapidamente um truque de CSS, isolar um bug de JavaScript de uma base de código maior antes de reportá-lo, ou prototipar um pequeno componente antes de copiar o resultado funcional para um projeto real. Nada do que você digita é salvo automaticamente em lugar nenhum, então trate isso como um bloco de rascunho: copie qualquer coisa que queira manter antes de fechar a aba.