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.
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.