devpack
EnglishDeutschFrançaisEspañolPortuguês (Brasil)
Auditoria do site

Editor Online de HTML, CSS e JavaScript

Um playground de código leve: edite HTML, CSS e JavaScript lado a lado, veja o resultado na hora, leia a saída do console e baixe sua página como um único arquivo HTML.

Atualizado em
Modelo
Console

Seu código é salvo automaticamente neste navegador. A pré-visualização roda em um frame com sandbox, sem acesso a este site.

Seus dados nunca saem do seu computador. Todo o processamento acontece localmente no navegador.

Como usar: Editor HTML Online

  1. Escreva a marcação em HTML, os estilos em CSS e os scripts em JavaScript.
  2. A pré-visualização atualiza enquanto você digita (desative a Execução automática para scripts pesados e clique em Executar ou pressione Ctrl+Enter).
  3. Confira a saída de console.log e os erros abaixo da pré-visualização.
  4. Clique em Baixar .html para salvar tudo em um único arquivo.

Um playground rápido de HTML

Às vezes você só precisa testar um trecho de código: verificar como uma propriedade CSS se comporta, depurar um layout, prototipar um componente ou testar um código de tutorial. Este editor oferece os três painéis clássicos e uma pré-visualização ao vivo, sem contas, projetos ou etapas de build. Seu trabalho fica salvo no navegador (local storage), então continua lá quando você voltar.

Como a pré-visualização é isolada

O resultado roda em um <iframe sandbox> sem a permissão allow-same-origin. Assim, a página ganha uma origem própria e exclusiva: os scripts podem rodar, usar alertas e formulários, mas não conseguem ler os cookies nem o storage deste site. É a mesma abordagem usada pelo CodePen e pelo JSFiddle.

Dicas

  • Tab insere dois espaços em vez de sair do editor.
  • Carregue bibliotecas de um CDN com uma tag normal no painel HTML, por exemplo <script src="https://cdn.jsdelivr.net/npm/…"></script>.
  • Erros de execução e promises rejeitadas aparecem no painel do console com o número da linha.
  • O arquivo baixado contém seu HTML, CSS e JS em um só documento, pronto para abrir localmente ou enviar.

Além do playground

Organize o código com o formatador de HTML, o formatador de CSS e o formatador de JavaScript, ou reduza-o para produção com o minificador de HTML e o minificador de JavaScript.

Também pesquisado como: visualizar html online, preview html ao vivo, editor de código html css js, testar código html online, renderizar html online, playground html css javascript, alternativa ao jsfiddle.

Ferramentas que combinam com: Editor HTML Online

  • Markdown para HTML — Escreva ou cole Markdown e obtenha HTML limpo na hora, com pré-visualização ao vivo sanitizada, tabelas no estilo GitHub, listas de tarefas e blocos de código cercados.
  • Minificador CSS — Cole uma folha de estilos para reduzi-la na hora.
  • Formatador SQL — Cole uma query — ou um script de migração inteiro — e receba um SQL legível, com uma cláusula por linha, joins alinhados e palavras-chave com caixa consistente, seguindo a gramática do seu banco.
  • Testador de Expressões Regulares — Digite um padrão e veja as correspondências serem destacadas em tempo real no seu texto de teste.

Perguntas frequentes

Meu código é salvo?
Sim, automaticamente no local storage deste navegador. Ele não é enviado para nenhum servidor; limpe os dados do site ou clique em um modelo para começar do zero.
Posso usar bibliotecas externas?
Sim — adicione tags <script> ou <link> apontando para um CDN no painel HTML.
É seguro executar código não confiável aqui?
A pré-visualização roda em um iframe com sandbox e origem própria, então não consegue acessar este site. Ainda assim, o código roda no seu navegador, então execute apenas o que você se sente à vontade para rodar.
Oferece suporte a TypeScript, SCSS ou React JSX?
Não — a pré-visualização roda apenas HTML, CSS e JavaScript puros. Compile outras linguagens antes.
Posso instalar o Editor HTML Online como um aplicativo da web e usá-lo offline?
Sim. O Editor HTML Online é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.

Ferramentas relacionadas

localFormatador HTMLCole HTML minificado ou bagunçado e receba um código limpo e com indentação consistente, incluindo os…localFormatador JavaScriptDesminifique e deixe legível JavaScript, JSON ou JSX com a indentação e o estilo de chaves que você…localFormatador de CSSTransforme uma folha de estilo minificada em CSS legível, com uma propriedade por linha e blocos @media…localMinificador de HTMLReduza páginas e templates HTML removendo comentários e espaços em branco desnecessários, minificando…localMarkdown para HTMLEscreva ou cole Markdown e obtenha HTML limpo na hora, com pré-visualização ao vivo sanitizada, tabelas no…localMinificador CSSCole uma folha de estilos para reduzi-la na hora. Você verá o tamanho original e o minificado, a…