Como usar um playground HTML

Passos

1. Comece pelo template inicial ou carregue um projeto de exemplo.
2. Edite a estrutura HTML, os estilos CSS e o comportamento JavaScript.
3. Pressione Executar (Ctrl/Cmd + Enter) para atualizar a pré-visualização sandbox.
4. Abra o painel do console para ler logs, avisos e erros.
5. Use os controles responsivos para verificar o layout em larguras comuns.
6. Formate, copie ou baixe seu trabalho como index.html.

Exemplo

Exemplo — Executar

HTML

<button id="counter">0</button>

CSS

#counter { font-size: 2rem; padding: 16px; }

JavaScript

let count = 0;
document.getElementById("counter").addEventListener("click", (event) => {
  event.currentTarget.textContent = ++count;
});

Cada clique aumenta o contador. Executar novamente reinicia o valor; o armazenamento local salva o código, não o estado do contador.

Dica

A execução básica de HTML, CSS e JavaScript para a pré-visualização ocorre localmente no seu navegador.

Ferramentas relacionadas