Visualizador de HTML
Pré-visualiza HTML.
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.
Como usar
Cole o excerto, execute a pré-visualização e observe a moldura. Serve bem para blocos de email ou esboços de componentes estáticos que quer confirmar em segundos.
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.
Bom saber
Os scripts correm na pré-visualização?
Não. A moldura está isolada sem permissão de scripts, por isso mostra apenas marcação e CSS. Teste o comportamento numa página real.
As classes Tailwind aparecem na pré-visualização?
Não por defeito: a moldura não tem folha de estilos, logo as classes utilitárias nada fazem até acrescentar um <link> para CSS compilado ou colá-lo num bloco <style>. O script Play CDN do Tailwind não pode correr porque os scripts estão bloqueados.