Visualizador HTML

Visualizador HTML - Editor Sandbox Online HTML CSS JavaScript

Um visualizador HTML profissional e ambiente sandbox para testar código HTML, CSS e JavaScript em tempo real. Recursos incluem editor em tela dividida, visualização ao vivo, saída de console, modo tela cheia, modelos e mais. Perfeito para aprender desenvolvimento web, prototipagem, testar trechos de código e compartilhar exemplos.

O que é um Visualizador/Sandbox HTML?

Um Visualizador HTML (também chamado de sandbox ou playground) é um ambiente interativo onde você pode escrever e testar código HTML, CSS e JavaScript com feedback visual instantâneo. É útil para:

- Aprender desenvolvimento web
- Testar trechos de código
- Prototipagem de designs
- Depurar problemas HTML/CSS
- Compartilhar exemplos de código
- Experimentar novos recursos
- Demonstrações rápidas e provas de conceito

Similar ao CodePen, JSFiddle e outros editores de código online, mas mais simples e executa inteiramente no seu navegador.

Como usar este Visualizador HTML?

Usar o visualizador é simples:

1. Escolha uma aba: HTML, CSS ou JavaScript
2. Escreva seu código no editor
3. Clique em 'Executar Código' ou habilite 'Execução automática' para visualização instantânea
4. Veja o resultado no painel de Visualização
5. Verifique a aba Console para logs e erros JavaScript
6. Use modelos para começar rapidamente
7. Alterne para tela cheia para espaço de trabalho maior

Dicas:
- Habilite Execução automática para atualizações em tempo real enquanto digita
- Use modelos para aprender padrões comuns
- Verifique o Console para erros JavaScript
- Baixe seu código quando terminar

Quais são os recursos do editor?

O editor foca em um fluxo de trabalho rápido e sem atritos:

Edição de Código:
- Abas separadas de HTML, CSS e JavaScript
- A tecla Tab insere uma indentação de 4 espaços
- Ctrl/Cmd+Enter executa o código
- Salvamento automático no seu navegador (localStorage) para o trabalho sobreviver a um recarregamento

Recursos de Visualização:
- Visualização ao vivo em um iframe isolado e sandbox
- Execução automática ou manual
- Console ao vivo que captura logs e erros em tempo de execução
- Barra de viewport responsiva (Celular 375px, Tablet 768px, Desktop ou largura personalizada)
- Modo de visualização em tela cheia

Opções de Layout:
- Divisão horizontal (editor e visualização lado a lado)
- Divisão vertical (editor em cima, visualização embaixo)

Outros Recursos:
- Modelos pré-construídos
- Bibliotecas externas via CDN (CSS e JavaScript)
- Baixar como um único arquivo HTML completo

Como testo breakpoints responsivos / mudo a largura do viewport?

Use a barra de viewport acima da visualização. Clique em Celular (375px), Tablet (768px) ou Desktop (largura total), ou digite qualquer largura personalizada em pixels e clique em Aplicar. O iframe de visualização é limitado a essa largura e centralizado, para você verificar breakpoints responsivos e media queries sem redimensionar o navegador inteiro. A largura escolhida é lembrada para a próxima vez.

Posso usar bibliotecas externas?

Sim! Você pode usar bibliotecas externas incluindo-as no seu HTML:

Bibliotecas CSS:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

Bibliotecas JavaScript:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

CDNs Comuns:
- jsDelivr: cdn.jsdelivr.net
- cdnjs: cdnjs.cloudflare.com
- unpkg: unpkg.com

Você pode incluir:
- Frameworks CSS (Bootstrap, Tailwind, Bulma)
- Bibliotecas JavaScript (jQuery, Vue, React)
- Bibliotecas de ícones (Font Awesome)
- Qualquer recurso CDN público

Qual é a diferença entre Execução automática e execução Manual?

Dois modos de execução estão disponíveis:

Execução automática (Tempo real):
- Código executa automaticamente enquanto você digita
- Atualizações instantâneas de visualização
- Ótimo para experimentos rápidos
- Atualiza com pequeno atraso (debounced)
- Pode ficar lento com código complexo
- Melhor para trabalho HTML/CSS

Execução Manual:
- Código executa apenas quando você clica em 'Executar Código'
- Mais controle sobre execução
- Melhor performance para código complexo
- Previne loops infinitos acidentais
- Melhor para desenvolvimento JavaScript
- Recomendado para aprendizado

Você pode alternar entre modos a qualquer momento usando a caixa de seleção Execução automática.

Como funciona o Console?

A aba Console captura saída JavaScript:

O que mostra:
- Saída de console.log()
- Mensagens de console.error()
- Avisos de console.warn()
- Informações de console.info()
- Erros e exceções em tempo de execução

Recursos:
- Mensagens codificadas por cores por tipo (log, error, warn)
- Timestamps para cada mensagem
- Botão de limpar console
- Preserva histórico durante sessão
- Mostra números de linha de erro

Exemplos:
console.log('Olá Mundo');
console.error('Isto é um erro');
console.warn('Mensagem de aviso');

O console ajuda você a depurar código JavaScript e ver o que seu código está fazendo.

Por que meu console.log não aparece?

Agora aparece. A visualização injeta um hook de console antes de qualquer JavaScript seu rodar, então mesmo um console.log('x') simples no nível superior sem setTimeout é capturado e exibido na aba Console. Se ainda não aparecer nada: garanta que seu código está na aba JavaScript (não comentado), clique em Executar Código (ou habilite Execução automática) e abra a aba Console. Erros não capturados aparecem em vermelho com o número da linha.

Como depuro erros JavaScript com números de linha?

Qualquer erro não capturado ou rejeição de promise não tratada é reportado na aba Console em vermelho, precedido pelo número da linha onde ocorreu (por exemplo, 'Error at line 12: ...'). Escreva seu script na aba JavaScript, execute-o e mude para o Console. O selo de erro na aba Console também mostra quantos erros a última execução produziu, e ele se limpa automaticamente na próxima execução limpa.

Suporta módulos ES, async/await e fetch?

Sim. async/await, Promises e a API fetch() funcionam porque seu código roda em um iframe real do navegador. Requisições de rede estão sujeitas à política CORS do servidor de destino, como qualquer página web. Para módulos ES, adicione type="module" à sua própria tag script dentro do painel HTML (o painel JavaScript injetado automaticamente roda como script clássico). Módulos ES externos podem ser carregados de uma CDN que ofereça builds +esm, como o jsDelivr.

Quais recursos e limitações devo conhecer?

Suportado:
- HTML, CSS e JavaScript ao vivo com visualização instantânea
- Console ao vivo (logs, avisos, erros com números de linha)
- Bibliotecas CSS e JavaScript externas de qualquer CDN público
- Larguras de viewport responsivas (Celular, Tablet, Desktop, px personalizado)
- Baixar o resultado como um único arquivo HTML autônomo
- Salvamento automático no localStorage

Limitações:
- A visualização roda em um iframe sandbox (flags sandbox: allow-scripts, allow-modals, allow-forms, allow-popups, allow-same-origin). Algumas APIs do navegador que exigem uma origem de nível superior completa podem ser restritas.
- Requisições cross-origin ainda obedecem ao CORS.
- Não há salvamento na nuvem nem URL para compartilhar; use Baixar para guardar ou compartilhar seu trecho.

Posso salvar ou compartilhar meu código?

Você pode salvar e compartilhar seu trabalho:

Opções de Salvamento:
- Baixar como arquivo HTML completo (inclui CSS e JS)
- Copiar código para área de transferência
- Salvar manualmente no seu navegador (Ctrl+S funciona em editores)
- Usar localStorage do navegador (código persiste ao atualizar)

Compartilhamento:
- Copiar código e compartilhar via email, chat, etc.
- Baixar e anexar às mensagens
- Incluir em documentação
- Colar em outras ferramentas

Nota: Esta ferramenta não fornece armazenamento na nuvem ou URLs para compartilhamento. Para compartilhamento hospedado permanente, use plataformas como CodePen, JSFiddle ou GitHub Gists.

O que são Modelos?

Modelos são exemplos de código pré-construídos para ajudá-lo a começar:

Modelos Disponíveis:
- Em Branco: Editor vazio para começar do zero
- HTML Básico: Estrutura HTML5 simples
- Iniciador Bootstrap: Configuração do framework Bootstrap 5
- Layout Flexbox: Exemplo de CSS Flexbox
- CSS Grid: Exemplo de layout grid moderno
- Animação CSS: Demonstração de animação interativa

Modelos são ótimos para:
- Aprender novos conceitos
- Começar projetos rapidamente
- Entender padrões de código
- Testar frameworks
- Obter inspiração

Você pode carregar um modelo e modificá-lo para suas necessidades.

Meu código está seguro e privado?

Sim, seu código é completamente seguro e privado:

- Todo código executa inteiramente no seu navegador
- Nenhum código é enviado para qualquer servidor
- Não armazenamos, registramos ou rastreamos seu código
- Sem armazenamento na nuvem ou bancos de dados
- Sem análise de conteúdo do código
- Funciona offline após carregamento da página

Recursos de segurança:
- Visualização executa em iframe isolado (sandbox)
- Acesso limitado à página pai
- Sem acesso ao seu sistema de arquivos
- JavaScript executa em contexto isolado

Melhores práticas:
- Não inclua chaves de API ou senhas reais
- Teste com dados de exemplo
- Seja cauteloso com entrada do usuário
- Valide e sanitize dados

A ferramenta é projetada para experimentação e aprendizado seguros.

Quais são os atalhos de teclado?

Atalhos de teclado úteis:

Edição:
- Tab: Inserir uma indentação de 4 espaços
- Ctrl/Cmd+A: Selecionar tudo
- Ctrl/Cmd+C: Copiar
- Ctrl/Cmd+V: Colar
- Ctrl/Cmd+Z: Desfazer
- Ctrl/Cmd+Y: Refazer

Execução:
- Ctrl/Cmd+Enter: Executar código (quando o foco está em um editor)

Nota: Alguns atalhos de nível do navegador podem variar por navegador e sistema operacional.

Principais Recursos

• Escreva HTML, CSS e JavaScript em editores com abas
• Visualização ao vivo com atualizações instantâneas
• Modo de execução automática para visualização em tempo real
• Modo de execução manual para execução controlada
• Layout em tela dividida (horizontal ou vertical)
• Visualização responsiva de viewport (Celular 375px, Tablet 768px, Desktop, largura personalizada)
• Modo de visualização em tela cheia
• Console ao vivo capturando logs, avisos e erros com números de linha
• Múltiplos modelos pré-construídos
• Bibliotecas externas via CDN (CSS e JavaScript)
• Baixar como um único arquivo HTML completo
• Salvamento automático no localStorage do navegador
• Iframe isolado para execução segura
• Suporte a modo escuro
• 100% do lado do cliente - sem servidor necessário
• Funciona offline após carregamento inicial
• Design responsivo para todos os dispositivos
• Sem registro ou login necessário