Editor HTML Online

Continuar na ferramenta

Mais páginas desta ferramenta

editor de html e css com visualização ao vivo

Editor de HTML e CSS com visualização ao vivo

Digite no painel HTML ou CSS e a prévia refaz a página 450 milissegundos depois da última tecla. Sete modelos prontos servem de ponto de partida, e três botões mostram a mesma página em largura total, de tablet ou de celular.

Como o HTML e o CSS viram a página da prévia

O painel HTML recebe só o que iria dentro do corpo da página, sem doctype, head ou body. O CSS do segundo painel vira uma tag style no head, e o ponto prático é que as regras valem para todo o documento, inclusive para o body, o que permite testar fundo, margens e fontes da página inteira. O navegador monta o documento com meta charset e meta viewport, e por isso as unidades vw e as media queries respondem à largura escolhida na prévia. Ao trocar de Total para Tablet ou Celular, o quadro passa a ter 768 px ou 375 px, e uma regra @media (max-width: 600px) passa a valer sem você redimensionar a janela.
A atualização é por reconstrução: cada execução recria o documento do zero, então estados de JavaScript e posição de rolagem voltam ao início. Em troca, não há resíduo de um teste anterior. A execução automática pode ser desligada para quem quer digitar bastante antes de ver o resultado, e o botão Executar roda a qualquer momento. Os sete modelos (Olá mundo, Flexbox, Cartão, Formulário, Animação, Canvas e Em branco) trocam os três painéis de uma vez, e um atalho de desfazer devolve o que estava antes, porque trocar de modelo sem querer apagaria horas de trabalho.
Tudo roda dentro do navegador, num quadro isolado que não enxerga cookies nem a página que o contém, então testar CSS aqui não afeta o site. O rascunho fica salvo neste aparelho a cada pausa na digitação, sem conta. Para levar o resultado embora, o botão Baixar entrega um único arquivo .html com o CSS dentro de uma tag style, que abre em qualquer navegador e pode ser enviado a quem for revisar o layout.

Números e comportamentos conferidos

Atraso da execução automática

Entrada: digitar e parar
Saída esperada: 450 ms

Tempo de espera depois da última tecla antes de refazer a prévia.

Largura do modo Celular

Entrada: botão Celular
Saída esperada: 375 px

Largura máxima do quadro da prévia.

Largura do modo Tablet

Entrada: botão Tablet
Saída esperada: 768 px

Boa para testar o ponto de quebra mais comum de layouts.

Onde vai o CSS

Entrada: h1 { color: red; }
Saída esperada: tag style dentro do head

Antes do HTML do corpo, valendo para o documento todo.

Modelos disponíveis

Entrada: lista de modelos
Saída esperada: 7

Olá mundo, Flexbox, Cartão, Formulário, Animação, Canvas e Em branco.

FAQ da ferramenta completa

Como testar HTML, CSS e JavaScript online sem instalar nada?

Escreva nos três painéis e a prévia atualiza na hora. Não precisa de conta, servidor nem arquivo: o navegador monta uma página com o seu HTML no corpo, o CSS numa tag style e o JavaScript no fim do corpo, e executa tudo num iframe isolado. O console mostra o que o código imprimir.

Meu código tem acesso aos dados deste site?

Por que alert, confirm e prompt não abrem janela?

Como compartilhar o que eu escrevi?

O link de compartilhamento envia meu código a algum servidor?

Posso usar bibliotecas por CDN e chamar APIs com fetch?

Como baixar a página como arquivo HTML?

A prévia travou. O que fazer?

Posso colar uma página HTML completa?

O que escrevo fica salvo?

Perguntas frequentes

O que digito no painel HTML?

Só o conteúdo do corpo, como um título e um parágrafo. Doctype, head e body são montados pela ferramenta. Se você colar uma página completa, ela é reconhecida e o CSS e o JavaScript dos outros painéis são encaixados nela.

Preciso criar conta para usar?

Não. O editor funciona sem cadastro, e o rascunho é guardado só no armazenamento do seu navegador, neste aparelho.

Por que o estado da página volta ao início a cada mudança?

Porque cada execução recria o documento inteiro, o que garante que o resultado reflita exatamente o código atual. Se isso atrapalhar, desligue a execução ao digitar e use o botão Executar.

Próximos passos

Como o HTML e o CSS viram a página da prévia

O painel HTML recebe só o que iria dentro do corpo da página, sem doctype, head ou body. O CSS do segundo painel vira uma tag style no head, e o ponto prático é que as regras valem para todo o documento, inclusive para o body, o que permite testar fundo, margens e fontes da página inteira. O navegador monta o documento com meta charset e meta viewport, e por isso as unidades vw e as media queries respondem à largura escolhida na prévia. Ao trocar de Total para Tablet ou Celular, o quadro passa a ter 768 px ou 375 px, e uma regra @media (max-width: 600px) passa a valer sem você redimensionar a janela.

A atualização é por reconstrução: cada execução recria o documento do zero, então estados de JavaScript e posição de rolagem voltam ao início. Em troca, não há resíduo de um teste anterior. A execução automática pode ser desligada para quem quer digitar bastante antes de ver o resultado, e o botão Executar roda a qualquer momento. Os sete modelos (Olá mundo, Flexbox, Cartão, Formulário, Animação, Canvas e Em branco) trocam os três painéis de uma vez, e um atalho de desfazer devolve o que estava antes, porque trocar de modelo sem querer apagaria horas de trabalho.

Tudo roda dentro do navegador, num quadro isolado que não enxerga cookies nem a página que o contém, então testar CSS aqui não afeta o site. O rascunho fica salvo neste aparelho a cada pausa na digitação, sem conta. Para levar o resultado embora, o botão Baixar entrega um único arquivo .html com o CSS dentro de uma tag style, que abre em qualquer navegador e pode ser enviado a quem for revisar o layout.

Números e comportamentos conferidos

Atraso da execução automática

Entrada: digitar e parar
Saída esperada: 450 ms

Tempo de espera depois da última tecla antes de refazer a prévia.

Largura do modo Celular

Entrada: botão Celular
Saída esperada: 375 px

Largura máxima do quadro da prévia.

Largura do modo Tablet

Entrada: botão Tablet
Saída esperada: 768 px

Boa para testar o ponto de quebra mais comum de layouts.

Onde vai o CSS

Entrada: h1 { color: red; }
Saída esperada: tag style dentro do head

Antes do HTML do corpo, valendo para o documento todo.

Modelos disponíveis

Entrada: lista de modelos
Saída esperada: 7

Olá mundo, Flexbox, Cartão, Formulário, Animação, Canvas e Em branco.

FAQ da ferramenta completa

Como testar HTML, CSS e JavaScript online sem instalar nada?

Meu código tem acesso aos dados deste site?

Por que alert, confirm e prompt não abrem janela?

Como compartilhar o que eu escrevi?

O link de compartilhamento envia meu código a algum servidor?

Posso usar bibliotecas por CDN e chamar APIs com fetch?

Como baixar a página como arquivo HTML?

A prévia travou. O que fazer?

Posso colar uma página HTML completa?

O que escrevo fica salvo?

Perguntas frequentes

O que digito no painel HTML?

Preciso criar conta para usar?

Não. O editor funciona sem cadastro, e o rascunho é guardado só no armazenamento do seu navegador, neste aparelho.

Por que o estado da página volta ao início a cada mudança?

Porque cada execução recria o documento inteiro, o que garante que o resultado reflita exatamente o código atual. Se isso atrapalhar, desligue a execução ao digitar e use o botão Executar.