Htmly
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Estúdio Vela — Design & Sites</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="topo">
    <span class="marca">Estúdio Vela</span>
    <button id="tema" class="botao-fantasma">Modo escuro</button>
  </header>

  <main>
    <section class="hero">
      <span class="eyebrow">Portfólio 2026</span>
      <h1>Design que faz a sua ideia <span class="destaque">acontecer</span></h1>
      <p class="sub">Identidade visual, sites e materiais de marca para quem está começando algo novo.</p>
      <a class="botao" href="#servicos">Ver serviços</a>
    </section>

    <section id="servicos" class="cards">
      <article class="card">
        <h2>Identidade</h2>
        <p>Logo, cores e tipografia que contam a história da sua marca.</p>
      </article>
      <article class="card">
        <h2>Sites</h2>
        <p>Páginas rápidas e responsivas, prontas para aparecer no Google.</p>
      </article>
      <article class="card">
        <h2>Social</h2>
        <p>Templates de posts para manter tudo com a mesma cara.</p>
      </article>
    </section>
  </main>

  <footer class="rodape">
    <p>© <span id="ano"></span> Estúdio Vela — feito com HTML, CSS e JavaScript.</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>
Resultadoindex.html100%

Editor de HTML online, direto no navegador

Escreva HTML, CSS e JavaScript em vários arquivos, com syntax highlighting (o código colorido por linguagem), e veja o resultado enquanto digita. Sem instalar nada, sem criar conta.

Como usar o editor HTML online

  1. 1

    Escreva ou cole o código

    Use o explorador para criar páginas HTML, arquivos CSS e scripts. O editor destaca cada linguagem com cores, numera as linhas e fecha chaves e aspas sozinho.

  2. 2

    Acompanhe o resultado ao vivo

    O painel ao lado mostra a página aberta no editor, já com o CSS e o JavaScript aplicados. Alterne entre celular, tablet e desktop.

  3. 3

    Baixe ou publique

    Baixe o projeto pronto ou clique em Publicar no HTMLy para colocar o site no ar em segundos, com todos os arquivos e endereço próprio.

O que é um editor HTML online?

Um editor HTML online é um editor de código que roda no navegador: você escreve ou cola HTML, CSS e JavaScript e vê a página pronta ao lado, sem instalar programa nenhum. A diferença para um bloco de notas é o apoio de editor de verdade: cores que separam tags, atributos e valores, numeração de linhas e indentação, que tornam o erro visível antes de virar dor de cabeça. É também o que muita gente procura como compilador HTML online: HTML não é compilado, mas a entrega é a mesma, código de um lado e a página renderizada do outro.

Ele resolve os casos em que abrir um ambiente completo seria exagero: ajustar uma página que a IA gerou, corrigir um detalhe no HTML de um email, montar uma landing page simples ou estudar HTML vendo o efeito de cada mudança na hora. Quando terminar, o mesmo editor baixa o projeto ou publica o site na internet.

Vários arquivos, como um projeto de verdade

O explorador de arquivos organiza o site do jeito que ele existe fora do editor: páginas HTML separadas, uma folha de estilos, scripts, SVGs. O resultado ao vivo mostra a página aberta no editor com o CSS e o JavaScript já aplicados, e a publicação envia todos os arquivos juntos. Os links entre as páginas funcionam no site publicado, sem você precisar juntar nada na mão.

Syntax highlighting de HTML, CSS e JavaScript

Cada arquivo reconhece a própria linguagem: tags e atributos no .html, seletores e propriedades no .css, funções e variáveis no .js. As cores não são enfeite — elas mostram na hora quando uma aspa ficou aberta ou uma tag não fechou, os dois erros mais comuns em código copiado de um chat de IA.

Feito para ajustar HTML gerado por IA

ChatGPT, Claude e Gemini geram páginas inteiras em um arquivo só, e quase sempre falta um detalhe: trocar um texto, uma cor, um telefone. Voltar ao chat para cada ajuste é lento, e às vezes a IA reescreve o que já estava bom. Cole o código aqui, faça o ajuste na mão vendo o resultado, e pronto. Se você ainda não tem o código, o guia de criar site com IA mostra como gerar uma página completa em qualquer assistente.

Confira em telas de celular, tablet e desktop

Os botões acima do editor simulam a largura de um celular (375px), um tablet (768px) e um desktop. Mais da metade das visitas de um site típico vem do celular, e o layout estourando a largura é o defeito mais comum em página gerada por IA. Confira antes de publicar.

Do editor para a internet

Terminou de editar? O botão "Publicar no HTMLy" coloca todos os arquivos do projeto no ar em segundos, com endereço próprio: basta informar seu email, sem criar conta. Se você só quer visualizar um HTML pronto, sem mexer no código, a ferramenta de teste resolve na hora; e para subir um projeto que já existe no seu computador, use a hospedagem de sites grátis do HTMLy.

Perguntas frequentes

O editor HTML é grátis?
Sim, 100% gratuito. Você edita e baixa os arquivos sem limite e sem criar conta; para publicar um site de teste, basta informar seu email.
Qual é o melhor editor de HTML online?
Depende do tamanho do projeto. Para montar páginas com HTML, CSS e JavaScript vendo o resultado na hora, um editor no navegador como este resolve sem instalar nada. Para projetos grandes, com dezenas de arquivos e controle de versão, um editor instalado como o VS Code é mais adequado.
Preciso instalar algo para editar HTML?
Não. O editor roda inteiro no navegador, no computador ou no celular. Escreva, edite, baixe o projeto ou publique.
Posso criar um site com várias páginas e arquivos?
Sim. O explorador de arquivos permite criar páginas HTML, folhas de estilo e scripts separados, como um projeto de verdade. O resultado ao vivo mostra uma página por vez, a que está aberta no editor; a publicação envia todos os arquivos juntos, com os links entre as páginas funcionando normalmente no site publicado.
O editor funciona com CSS e JavaScript?
Sim. O syntax highlighting reconhece cada linguagem no seu arquivo, e o resultado ao lado aplica o CSS e executa o JavaScript em um ambiente isolado (sandbox) por segurança. Recursos como alertas e envio de formulários só funcionam no site publicado.
Como salvo o que eu editei?
Dois caminhos: o botão Baixar gera o arquivo .html pronto (ou um .zip com todos os arquivos do projeto), e o botão Publicar no HTMLy coloca o site no ar com link próprio. O código não fica salvo em nenhum servidor: se fechar a página sem baixar nem publicar, o conteúdo se perde.
Posso editar um HTML que a IA gerou?
Sim, esse é o uso mais comum. Cole o código que o ChatGPT, o Claude ou o Gemini gerou, ajuste textos, cores e links vendo o resultado, e publique quando ficar pronto, sem voltar ao chat para cada detalhe.
Posso publicar o site depois de editar?
Sim. O botão Publicar no HTMLy coloca todos os arquivos do projeto no ar em segundos, com endereço próprio. Basta informar seu email, sem criar conta. O site de teste expira em 1 hora; criando uma conta gratuita, ele fica no ar permanentemente.
O editor é visual (WYSIWYG)?
Não. Aqui você edita o código vendo o resultado ao vivo ao lado. Se prefere editar clicando direto no texto da página, sem tocar em código, publique o site e use o modo visual do editor do HTMLy no painel, gratuito em todos os planos.
Existe compilador de HTML online?
HTML não é uma linguagem compilada — o navegador interpreta o código direto. O que se procura num "compilador HTML online" é exatamente o que este editor faz: você escreve ou cola o código e vê a página renderizada na hora, com CSS e JavaScript funcionando, direto no navegador.

Do editor para o ar em 30 segundos

Publicar agora