Visualizador de HTML

Pré-visualiza HTML.

Como usar

Quatro passos: colar, executar, rever, copiar. Tudo fica no navegador.

Cole o conteúdo

Cole o conteúdo

Introduza CSS, HTML, JSON ou outro texto. Nada é enviado.

Execute a ferramenta

Execute a ferramenta

Clique em Converter ou Executar. O resultado aparece na hora.

Reveja a saída

Reveja a saída

Leia o código gerado e as notas antes de usar.

Copie e use

Copie e use

Copie o resultado e cole no seu projeto.

Sobre esta ferramenta

O visualizador mostra um excerto de HTML dentro de um iframe com sandbox, para avaliar a estrutura sem criar um ficheiro à parte. Os scripts ficam isolados, por isso trata-se de uma pré-visualização de marcação e não da execução de uma aplicação.

Exemplo

O exemplo usa estilos inline para que a moldura mostre algo logo.

Entrada

<article style="font-family:system-ui;padding:1rem">
  <h1 style="margin:0 0 .5rem">Preview card</h1>
  <p style="margin:0;color:#334155">Sandboxed HTML viewer example.</p>
</article>

Saída

(rendered in the preview frame)

Dica

Se o resultado parecer despido, o excerto dependia de uma folha de estilos externa que a moldura não carrega.