Pular para o conteúdo
ToolMug

Use ↑ ↓ para navegar, Enter para abrir, Esc para fechar.

Playground de HTML, CSS e JavaScript

Escreva HTML, CSS e JavaScript à esquerda e veja o resultado atualizar à direita, com um console abaixo mostrando a saída de console.log e erros de script. Útil para aprender front-end, testar um estilo ou uma interação, ou mostrar uma demonstração para alguém — e você pode baixar tudo como um único arquivo HTML.

Roda no seu navegador — nada do que você digita é enviado

Console

    O código é executado em um sandbox isolado, sem acesso aos dados deste site, e nada é enviado. O download é um único arquivo HTML combinado. Tab aplica recuo no editor; pressione Esc e depois Tab para tirar o foco.

    Como usar

    1. Alterne entre os editores de HTML, CSS e JavaScript pelos botões acima e escreva seu código.
    2. A pré-visualização é atualizada automaticamente quando você para de digitar, ou desative isso e clique em Executar.
    3. Confira o console para ver a saída e os erros, depois clique em Baixar HTML para salvar sua página.

    Opções explicadas

    Sandbox
    A pré-visualização roda em um sandbox isolado, que não consegue ler os cookies ou o armazenamento deste site nem abrir diálogos.
    Console
    Mostra a saída de console.log, warn e error, além de erros não capturados com o número da linha, mantendo as últimas 200 entradas.
    Download
    Combina as três partes em um único arquivo HTML, com os estilos em uma tag style e o script no final do body.

    Como a página é montada

    Os três editores são combinados em um único documento, nesta ordem. O mesmo layout é o que você recebe ao clicar em Baixar HTML, exceto que o pequeno script que envia a saída do console para a área abaixo da pré-visualização fica de fora do download.

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* your CSS */
</style>
</head>
<body>
<!-- your HTML -->
<script>
// your JavaScript
</script>
</body>
</html>

    Como o script vem depois do seu HTML, você pode usar document.getElementById imediatamente, sem esperar o carregamento da página. No editor de HTML você escreve apenas o que pertence ao body, e não as tags html, head ou body em si. A pré-visualização é um iframe que só tem permissão para executar scripts, e é por isso que caixas de diálogo alert e o acesso aos cookies deste site são bloqueados.

    Perguntas frequentes

    Posso usar bibliotecas externas?

    Sim. Adicione uma tag script ou link apontando para um CDN, como o jsDelivr, no editor de HTML.

    Por que o alert não aparece?

    O sandbox bloqueia diálogos, então alert e confirm não fazem nada. Use console.log em vez disso.

    Meu código é salvo?

    Não é salvo nem enviado. Baixe o arquivo HTML antes de fechar a página.

    Privacidade

    Esta ferramenta funciona inteiramente no seu navegador. Seus arquivos e textos são processados no seu dispositivo e nunca são enviados aos nossos servidores.

    Ferramentas relacionadas