Editor de HTML Online

Free

Edite HTML, CSS e JavaScript em três painéis com uma visualização em tempo real em sandbox que atualiza enquanto você digita, além de um download com um clique como arquivo HTML autônomo.

Visualização em tempo real

Atividade recente

Visível para todos. Últimos 20 usos de todos os visitantes, mais recentes primeiro.

Выполнен живой предпросмотр (132 символов HTML, 77 символов CSS, 102 символов JS)

há 18 minutos

Eine Live-Vorschau ausgeführt (132 HTML-Zeichen, 77 CSS-Zeichen, 102 JS-Zeichen)

há 31 minutos

Ran a live preview (27 HTML chars, 42 CSS chars, 151 JS chars)

há 4 horas

Ran a live preview (27 HTML chars, 42 CSS chars, 102 JS chars)

há 4 horas

Ran a live preview (27 HTML chars, 77 CSS chars, 102 JS chars)

há 4 horas

Ran a live preview (132 HTML chars, 77 CSS chars, 102 JS chars)

há 4 horas

Comentários (0)

Achou esta ferramenta útil? Deixe um comentário, compartilhe uma dica ou nos diga como podemos melhorá-la.

Ainda sem comentários. Seja o primeiro a compartilhar sua opinião!

O que esta ferramenta faz

Escreva HTML, CSS e JavaScript em três painéis separados e veja-os combinados em uma única visualização em tempo real que atualiza enquanto você digita, com um download com um clique do resultado como um arquivo HTML autônomo.

Como funciona

A ferramenta monta um documento HTML completo a partir dos seus três painéis (CSS envolvido em uma tag style, seu HTML no body, seu JavaScript em uma tag script no final), e carrega esse documento em um iframe em sandbox usando o atributo srcdoc. O sandbox permite que scripts sejam executados, mas bloqueia a visualização de acessar o DOM, cookies, ou armazenamento desta página, então seu código é executado em um ambiente de navegador realista mas isolado.

Problemas que resolve

Testar rapidamente um trecho de HTML, uma regra CSS, ou um pequeno script sem criar arquivos locais.
Prototipar uma pequena página ou ideia de interface e exportá-la como um arquivo HTML funcional.
Demonstrar ou compartilhar um exemplo de código autocontido que outra pessoa possa colar e executar instantaneamente.

Perguntas frequentes

›É seguro executar JavaScript não confiável na visualização?

A visualização é executada dentro de um iframe em sandbox com scripts permitidos, mas acesso de mesma origem desativado, então o código na visualização não pode ler ou modificar esta página, seus cookies, ou seu armazenamento local. Ainda assim, dentro desse sandbox, pode executar JavaScript livremente, abrir caixas de alerta ou fazer requisições de rede, assim como qualquer outra página web, então continue tratando qualquer código que você cole de uma fonte não confiável como trataria executá-lo em uma nova aba do navegador.

›Como os painéis de HTML, CSS e JavaScript são combinados?

A ferramenta envolve seu CSS em uma tag <style> dentro do head do documento, coloca seu HTML diretamente no body, e anexa seu JavaScript em uma tag <script> no final do body, exatamente como um documento HTML de página única típico, e então carrega esse documento combinado na visualização.

›Posso baixar o que criei como um arquivo real?

Sim, o botão "Baixar como .html" salva exatamente o mesmo documento combinado mostrado na visualização como um único arquivo index.html, pronto para abrir diretamente em um navegador ou enviar para um servidor web.

›A visualização é atualizada automaticamente enquanto eu digito?

Sim, a visualização atualiza automaticamente um curto momento depois que você para de digitar em qualquer um dos três painéis, para que você possa ver o efeito das suas alterações sem clicar em um botão de execução separado.

›Por que a saída do console.log não aparece em nenhum lugar da página?

A visualização é um documento de navegador real e isolado, então a saída do console.log vai para o próprio console daquele documento, não para esta página. Abra as ferramentas de desenvolvedor do seu navegador e selecione o contexto do iframe de visualização para ver a saída do console, ou use alert() para uma verificação visível rápida.

Converta texto entre Unicode e Punycode (RFC 3492), a codificação somente ASCII usada para nomes de domínio internacionalizados, com um modo de domínio completo (sensível a pontos, prefixo xn-- automático) e um modo de rótulo simples, convertendo várias linhas de uma vez.