Seu código roda só no seu navegador, num quadro isolado sem acesso a este site. Código aberto de um link compartilhado também roda, então leia antes se não confiar na origem.
Carrega um esboço animado inicial para a API 2D do <canvas> do HTML5: um loop com requestAnimationFrame, um canvas que se ajusta ao tamanho e formas desenhadas a cada quadro. Mude cores, velocidades ou chamadas de desenho e a animação reinicia enquanto você digita. Bom para arte generativa, jogos simples e ensinar coordenadas e loops.
Como usar
- Escreva HTML, CSS e JavaScript nas abas. Com Auto ligado, o resultado recarrega logo depois que você para de digitar; senão, toque em Executar.
- console.log, warn, error, info e table aparecem no console abaixo do resultado. Erros não tratados mostram a linha; toque para ir até ela.
- Comece por um modelo: página básica, animação com canvas ou exemplo de console JavaScript.
- Copie um link para compartilhar (o código vai comprimido no próprio link) ou baixe tudo como um único .html.
- O resultado roda num iframe isolado sem acesso à mesma origem: não lê este site, seus cookies nem o armazenamento, e nada é enviado.
- Seu código fica salvo só neste navegador. Abrir um link compartilhado carrega aquele código.
- Os links guardam o código depois do # para que nunca chegue a um servidor; código muito longo gera links longos que alguns apps cortam.
- Se você colar um documento HTML completo, o CSS vai para o head e o JavaScript antes de </body>.
Para que serve
Use para testar um truque de CSS antes de levar ao projeto, reproduzir um bug em poucas linhas para um colega ou um fórum, prototipar um componente, ensinar o básico da web ou testar uma API com fetch. Cada aba é uma linguagem e o resultado recarrega logo depois que você para de digitar; desligue a execução automática em scripts pesados e toque em Executar quando quiser.
console.log, info, warn, error e console.table aparecem abaixo do resultado e erros não tratados e promises rejeitadas aparecem com o número da linha, que você toca para ir até o código.
Como o isolamento funciona
Sua página roda num iframe isolado sem acesso à mesma origem, então não consegue ler o armazenamento nem os cookies deste site, e um loop infinito ou uma falha só afetam a prévia. Requisições de rede do seu código saem do seu navegador como as de qualquer site; nada mais é enviado. JavaScript moderno, com async/await e chamadas fetch, funciona como numa página normal.
Compartilhar e salvar
O editor guarda seu último código neste navegador. O link de compartilhamento comprime as três abas na parte da URL depois do #, que os navegadores nunca enviam ao servidor; código muito longo gera links enormes que alguns apps de mensagem cortam. Baixe o .html para ter um arquivo independente que abre em qualquer navegador.
Perguntas frequentes
Preciso de conta para salvar meu código?
Não. O código é salvo automaticamente neste navegador. Para levar a outro aparelho ou compartilhar, copie o link ou baixe o arquivo .html.
Outras pessoas podem ver meu código?
Só se você mandar o link. O código fica no seu navegador e dentro do link depois do #, que não é enviado a nenhum servidor.
Posso usar bibliotecas externas como React ou jQuery?
Sim. Adicione na aba HTML uma tag script ou link apontando para um CDN, como numa página comum. A prévia carrega da rede quando roda.
Por que localStorage ou cookies não funcionam no meu código?
A prévia roda num iframe isolado sem acesso à mesma origem, então armazenamento e cookies ficam bloqueados ou separados. Isso mantém o editor seguro; teste esse tipo de código numa página normal.
Como vejo os erros do meu JavaScript?
Erros não tratados e promises com falha aparecem no console abaixo do resultado, com o número da linha. Toque na mensagem para ir até essa linha na aba JS.
O que acontece se eu colar um documento HTML completo?
O editor mantém seu documento e insere o CSS no head e o JavaScript logo antes de </body>, então páginas completas funcionam do jeito que estão.