Editor de HTML e Executor de Código Online com Pré-visualização ao Vivo
Escreva HTML, CSS e JavaScript e veja a página atualizar enquanto você digita. Grátis e sem necessidade de cadastro.
Edição local — recursos externos podem enviar dados
Área de trabalho do editor de HTML
ProntoAlterações pendentesExecutando…Pré-visualização atualizadaAtualizado com errosPré-visualização não atualizadaExecução automática pausadaA página demorou muito para carregar, então a pré-visualização não foi atualizada. Verifique se há um loop infinito e pressione Executar.A página tentou abrir outro endereço. A navegação é bloqueada na pré-visualização, então a versão anterior continua sendo exibida.Seu código tem mais de 2 MB, o que é muito grande para pré-visualizar ou salvar neste navegador. Faça o download e abra-o no Phoenix Code.A execução automática está desativada para códigos com mais de 1 MB. Pressione Executar para atualizar a pré-visualização.A última execução não foi concluída, possivelmente por causa de um loop infinito. A execução automática está pausada: corrija o código e depois pressione Executar.A saída do console da sua página aparecerá aqui.Editor de código do index.htmlEditor de código do style.cssEditor de código do script.jsEste arquivo é muito grande, por isso o realce de sintaxe e o preenchimento automático estão desativados para manter a digitação rápida.Código copiado como um único arquivo HTML.Não foi possível copiar. Baixe o index.html ou selecione o código e copie-o.Código copiado. No Phoenix Code, feche a tela de boas-vindas se for exibida, substitua o index.html pela sua página copiada, salve e abra a Visualização ao Vivo.Copiar código para continuarAbrir o Phoenix CodeCopiando código…Seu código mudou. Copie-o novamente antes de continuar.index.html baixado, com seu CSS e JavaScript incluídos.Não foi possível criar o download. Em vez disso, use a opção Copiar tudo.Arquivos iniciais restaurados.Este navegador não está salvando seu rascunho. Baixe seu código para guardá-lo.alert() da sua páginaconfirm() retornou false na pré-visualizaçãoprompt() retornou null na pré-visualizaçãoRequisições de rede como fetch são bloqueadas na pré-visualização.Links não abrem na pré-visualização:O envio de formulários é bloqueado na pré-visualização. Manipule o evento submit no script.js para testar seu formulário.Janelas pop-up são bloqueadas na pré-visualização.Não foi possível carregar:A saída do console foi limitada para manter a pré-visualização responsiva.A página relatou um erro desconhecido.Interrompido um loop que executou por mais de um segundo sem pausar. Ele pode nunca terminar.Visualização ao vivo da sua página
HTML, CSS e JavaScriptSeu rascunho está salvo neste navegador
Pronto
CSS e JS carregam automaticamenteEsc, depois Tab, sai do editor
Pressione Control ou Command mais Enter para executar. Quando Tab insere indentação, pressione Escape e depois Tab para mover o foco para fora do editor.
Visualização ao vivo
Sua página aparecerá aqui
Digite no editor ou pressione Executar para renderizá-la.
Console
Como criar um arquivo HTML
Um arquivo HTML é um arquivo de texto simples salvo com a extensão .html. Para criar um, abra um editor de texto, digite o esqueleto da página abaixo, salve o arquivo como index.html e abra-o em um navegador. A página inicial no editor acima já contém este esqueleto, então você também pode editá-la lá e pressionar Baixar.
Abra um editor de texto simples: o Bloco de Notas no Windows, o TextEdit no Mac (escolha Formatar e depois Converter para Texto Simples primeiro), ou um editor de código como o Phoenix Code ou o VS Code (Arquivo e depois Novo Arquivo).
Digite o esqueleto HTML: a linha doctype, depois as tags html, head e body, com um título dentro do head e seu texto dentro do body. Copie o exemplo abaixo para começar.
Salve-o como index.html. No Bloco de Notas, defina 'Salvar como tipo' para 'Todos os Arquivos' primeiro, ou o arquivo se tornará index.html.txt e abrirá como texto simples em vez de uma página da web. Qualquer nome funciona, desde que termine em .html e não tenha espaços.
Abra o arquivo: dê um clique duplo nele e seu navegador renderizará a página. Para criar um arquivo HTML sem salvar nada no seu computador, cole o esqueleto no editor acima e pressione Download.
Os mesmos passos se aplicam a todas as formas de fazer a pergunta. Criar um arquivo em HTML, fazer um documento HTML ou iniciar um novo arquivo .html, tudo significa digitar este esqueleto e salvá-lo com a extensão .html.
<!doctype html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, world</h1>
<p>This is my first web page.</p>
</body>
</html>
Execute HTML, CSS e JavaScript online
Este editor de HTML online oferece três arquivos, index.html, style.css e script.js, com um Live Preview ao lado. Digite ou cole o código e a página é executada automaticamente, ou pressione Executar (Ctrl/Cmd + Enter) para executá-la imediatamente. Ele faz o que as pessoas procuram em um compilador de HTML ou executor de código, embora nada seja compilado: seu navegador renderiza o HTML, aplica o CSS e executa o JavaScript assim como faria em uma página web real.
Um editor de HTML em tempo real com visualização ao vivo
A pré-visualização atualiza cerca de meio segundo depois que você para de digitar. Cada nova versão carrega em segundo plano e substitui a antiga somente quando está pronta. Alterne entre as larguras responsiva, de desktop, de tablet e de celular para verificar um layout. Abra o console para a saída de console.log e erros de JavaScript; clique em um arquivo e linha quando um local estiver disponível.
Teste código HTML em um sandbox privado
Este editor processa seu código e salva seu rascunho no seu navegador. Ele não faz o upload do seu código. A pré-visualização bloqueia links, envios de formulário, pop-ups, fetch e XMLHttpRequest. Scripts, folhas de estilo, imagens e fontes HTTPS ainda podem carregar. O código e as bibliotecas que você executa podem enviar dados através desses recursos, incluindo o conteúdo da página. Execute apenas código em que você confia.
Como executar um arquivo HTML
Cole seu HTML em index.html ou edite a página inicial. Coloque o CSS em style.css e o JavaScript em script.js; ambos são adicionados à página automaticamente.
Veja a pré-visualização ser atualizada enquanto você digita, ou pressione Executar (Ctrl/Cmd + Enter).
Abra o console para verificar se há erros. Clique na localização de um erro para pular para a linha correspondente.
Baixe o arquivo index.html para obter um único arquivo com seu CSS e JavaScript incluídos. Abra-o em qualquer navegador ou no Phoenix Code para continuar desenvolvendo.
Editor de HTML online ou Phoenix Code?
Esta página foi feita para experimentos rápidos e aprendizado. Quando uma página se torna um projeto, o Phoenix Code é um editor de código gratuito e de código aberto para desenvolvimento web. Ele funciona no seu navegador em web.phcode.dev e como um aplicativo de desktop para Windows, Mac e Linux.
Recurso
Este editor online
Phoenix Code
Arquivos
index.html, style.css e script.js
Projetos completos, com pastas e qualquer número de arquivos
Pré-visualização
Pré-visualização ao vivo em sandbox nesta página
Pré-visualização ao vivo que destaca o elemento que você está editando
Salvamento
Um rascunho neste navegador e um arquivo HTML para baixar
Seus arquivos, salvos na pasta do seu projeto
Auxílio à codificação
Autocompletar e um console
Dicas de código, Emmet e validação de HTML, além de Git no aplicativo para desktop
Custo
Gratuito, sem necessidade de cadastro
Edição Community gratuita, com recursos opcionais do Phoenix Pro
Perguntas sobre o editor de HTML
Como executo código HTML online?
Cole seu código em index.html. A pré-visualização o executa automaticamente quando você para de digitar, ou você pode pressionar Executar ou Ctrl/Cmd + Enter para executá-lo imediatamente. O CSS em style.css e o JavaScript em script.js são adicionados à página para você.
Isto é um compilador de HTML?
HTML não é compilado. As pessoas procuram por um compilador de HTML ou executor de código quando querem ver o que seu código faz, e é isso que este editor mostra: seu navegador renderiza o HTML e executa o JavaScript diretamente. Erros de JavaScript aparecem no console; a validade do HTML e do CSS não é verificada.
Posso usar frameworks CSS e bibliotecas JavaScript?
Sim. Vincule-os a partir de uma URL https, por exemplo, um link de CDN do Bootstrap ou Tailwind em index.html. Requisições de rede feitas pelo seu próprio código, como fetch ou XMLHttpRequest, são bloqueadas na pré-visualização.
É gratuito e preciso de uma conta?
É gratuito e não precisa de conta. Esta ferramenta não faz upload do seu código. O código e os recursos externos que você executa podem contatar outros servidores e enviar dados. Um rascunho é mantido neste navegador para que você possa retornar a ele.
Como salvo meu código ou continuo trabalhando no Phoenix Code?
Baixe o index.html para salvar um único arquivo com seu CSS e JavaScript incluídos, ou use Copiar tudo. Para continuar no Phoenix Code, selecione Copiar código para continuar e, em seguida, Abrir Phoenix Code depois que a cópia for bem-sucedida. Feche a tela de boas-vindas, se exibida, abra o index.html em um projeto, substitua seu conteúdo pela página copiada, salve e abra a Visualização ao Vivo. Seu código não é transferido automaticamente.
Qual é o melhor editor de HTML gratuito para Windows, Mac ou Linux?
O melhor é aquele que se adapta à sua forma de trabalhar. O Phoenix Code é um editor de HTML gratuito e de código aberto para Windows, Mac e Linux que também roda no navegador. Ele é o sucessor do Adobe Brackets e vem com Live Preview, sugestões de código e Emmet integrados.
Como eu crio um arquivo index.html?
Crie um novo arquivo de texto simples, cole o esqueleto HTML e salve-o com o nome exato index.html. No Bloco de Notas, defina 'Salvar como tipo' como 'Todos os Arquivos' para que ele não se torne index.html.txt. Servidores web abrem o index.html primeiro, e é por isso que a página inicial de um site usa esse nome. Neste editor, o arquivo inicial já se chama index.html, então ao pressionar Download você obtém um.
Última atualização:
Construa o site inteiro no Phoenix Code
Trabalhe com projetos inteiros e com a Visualização ao Vivo na Community Edition gratuita. O Phoenix Pro adiciona edição visual de texto, imagens e estilos. O aplicativo para desktop inclui uma avaliação Pro de 7 dias; a Community continua gratuita depois.