a11y.skipToMainContent
1

HTML/CSS/JS Sandbox

Escreva HTML, CSS e JavaScript em três editores tabulados e veja uma prévia ao vivo instantaneamente. Ótimo para prototipagem, ensino ou experimentos rápidos.

Preview

Was this tool helpful?
Send output to:
Advertisement

How to use HTML/CSS/JS Sandbox

  1. Escreva ou cole HTML na aba HTML, CSS na aba CSS e JS na aba JS.
  2. Alternar Execução automática para ver as alterações ao vivo à medida que digita, ou clique em Executar para atualizar manualmente a visualização.
  3. Experimentar e iterar — o iframe sandbox mantém seu código isolado.
  4. Clique em Baixar HTML para salvar seu trabalho como um arquivo autônomo.

O que é {nome}?

Esta sandbox combina seu HTML, CSS e JS em um único documento e o torna em um iframe sandboxed usando uma URL blob. A pré-visualização atualiza automaticamente (denunciado 500ms) quando a opção Auto-run estiver ativada, ou manualmente quando você clicar em Executar. Toda execução é isolada no iframe — nenhum script na sandbox pode acessar a página pai.

Use as abas para alternar entre editores. Baixe seu trabalho como um arquivo HTML autônomo. A amostra padrão é uma aplicação de contador simples que você pode modificar ou substituir inteiramente.

Advertisement

FAQ

Isto é como o CodePen ou o JSFiddle?
É uma alternativa leve do lado do cliente. Sem contas, sem servidores, sem passos de compilação. Basta escrever código e ver o resultado instantaneamente. Para projetos complexos com vários arquivos, CodePen ou StackBlitz são melhores opções.
Posso usar bibliotecas externas como React?
Sim — incluir links de CDN no seu HTML (por exemplo, <code><script src="https://unpkg.com/react/umd/react.desenvolvimento.js"></code>). A sandbox executa o que quer que você coloque nos painéis HTML, CSS e JS.
O meu código está salvo?
Não. Tudo corre no teu navegador. Use o botão Baixar HTML para salvar seu trabalho localmente. Não há armazenamento do lado do servidor.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 HTML/CSS/JS Sandbox on Wikipedia·Developer Tools on Wikipedia·HTML/CSS/JS Sandbox on Britannica

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement