Metodologia

1. Arquitetura do editor

O espaço de trabalho usa três editores de texto para HTML, CSS e JavaScript com margens de numeração de linhas, tratamento de indentação por tabulação, controles de tamanho de fonte e quebra de linha opcional.

2. Processamento de HTML

O HTML do painel HTML é colocado no body de um documento gerado. A ferramenta não executa HTML como interface da página principal.

3. Injeção de CSS

O CSS é inserido em um elemento style no head do documento gerado para que as regras se apliquem apenas ao documento de pré-visualização.

4. Execução de JavaScript

JavaScript é colocado em um elemento script dentro do documento de pré-visualização. Ele roda no contexto de navegação do iframe após Run.

5. Renderização em iframe

O documento combinado é atribuído a iframe.srcdoc, criando um novo documento de pré-visualização sem navegar a página principal.

6. Isolamento sandbox

O iframe usa um atributo sandbox (scripts permitidos para a pré-visualização). APIs DOM da página principal não são expostas para execução de código do usuário.

7. Tratamento do console

Uma pequena ponte dentro da pré-visualização encaminha console.log/info/warn/error e erros de tempo de execução ao pai via postMessage para exibição.

8. APIs do navegador

O que os scripts podem fazer depende da política do navegador e das permissões do sandbox. Algumas APIs se comportam de forma diferente em iframes do que em páginas de nível superior.

9. Armazenamento local

O estado do editor pode ser gravado em chaves de localStorage delimitadas a esta origem para que uma atualização não apague o trabalho em andamento.

10. Limitações

Não há compilação no servidor para HTML/CSS/JS padrão. Pipelines de build complexos, pacotes privados e APIs de dispositivo privilegiadas estão fora do escopo.

11. Considerações de privacidade

A montagem da pré-visualização é do lado do cliente. A persistência local permanece no navegador, a menos que você exporte ou copie o conteúdo para outro lugar.