Playground de HTML, CSS e JS

O que faz

Este playground é um pequeno editor de código online para experimentos de front-end. Escreva HTML, CSS e JavaScript em três abas com realce de sintaxe e a prévia é atualizada enquanto você digita, como no CodePen ou no JSFiddle, mas sem precisar de conta. Um console embutido mostra a saída de console.log() e os erros com o número da linha no seu JavaScript, para você depurar sem abrir as ferramentas de desenvolvedor. Isso é útil no celular ou em um computador emprestado.

Use-o para testar um layout CSS, reproduzir um bug para um colega, experimentar um trecho do Stack Overflow, ensinar um iniciante ou rascunhar um protótipo rápido.

Como usar

1. Digite nas abas HTML, CSS e JS, ou clique em Exemplo para começar com uma pequena demo de contador. Um ponto em uma aba indica que ela tem código.
2. A prévia roda automaticamente 0,6 segundo depois que você para de digitar. Desative Executar automaticamente para scripts pesados e clique em Executar ou pressione Ctrl+Enter quando estiver pronto.
3. Acompanhe o Console para ver logs, avisos e erros; a linha mais recente fica sempre no topo. Objetos, arrays, Maps, Sets e elementos do DOM são exibidos de forma compacta e legível.
4. Use Compartilhar para enviar o código a alguém. Baixar ZIP salva index.html, style.css e script.js como arquivos separados, prontos para um projeto de verdade; Baixar HTML salva tudo em um único arquivo index.html que abre em qualquer navegador.

Seu código fica guardado neste navegador, então continua lá quando você voltar. A tecla Tab indenta com dois espaços.

Exemplo

HTML:

<button id="go">Click me</button>

JavaScript:

document.querySelector('#go').addEventListener('click', () => {
  console.log('clicked at', new Date().toLocaleTimeString())
})

Cada clique adiciona uma linha ao console. Se você errar a grafia de um nome, o console mostra um ReferenceError em vermelho com a linha da aba JS onde ele aconteceu.

Como funciona

Os três painéis são combinados em um único documento HTML e carregados em um iframe com o atributo sandbox, então o código não consegue ler os cookies nem o armazenamento deste site. Um script minúsculo adicionado ao frame repassa as chamadas de console e os erros não capturados para a página, e nada sai do seu dispositivo.