Prévia de HTML online: teste HTML, CSS e JavaScript
Quer conferir um trecho de HTML sem criar um projeto inteiro? Escreva ou cole o código na ferramenta e acompanhe o resultado na prévia. Você pode experimentar estilos, estrutura de páginas e pequenos scripts antes de levá-los ao seu site.
Como usar o editor com prévia
Abra a ferramenta pelo botão acima, escreva sua marcação HTML no campo de edição e observe a área de visualização ao lado. Para mudar cores, tamanhos e espaçamentos, acrescente um bloco de estilo CSS ou atributos de classe. Se estiver aprendendo, experimente alterar um elemento por vez para entender o efeito de cada propriedade.
A visualização usa um iframe com sandbox. Isso permite executar exemplos de JavaScript sem dar ao código de teste acesso ao documento principal do FileBito. Mesmo assim, não cole senhas, tokens ou códigos privados em exemplos desconhecidos. Referências a imagens, fontes e bibliotecas externas podem exigir conexão e dependem das políticas do navegador.
O que você pode testar
Estrutura e semântica
Confira títulos, parágrafos, listas, links e elementos de seção antes de integrar ao seu projeto.
Layout responsivo
Teste regras CSS, alinhamento e espaçamento. Depois, valide também o resultado em diferentes telas.
Componentes pequenos
Crie botões, cartões e avisos sem precisar abrir um editor externo para cada mudança.
Experimentos com scripts
Observe o comportamento de eventos e interações simples em uma área de execução isolada.
Perguntas frequentes
Posso visualizar CSS e JavaScript?
Sim. A prévia renderiza HTML, estilos CSS e scripts no iframe isolado.
O código acessa a página principal?
Não. A prévia usa iframe com sandbox e origem isolada, sem acesso aos dados do site.
Posso salvar o código digitado?
Copie seu código para um arquivo com extensão .html. O editor não salva versões automaticamente.
Consigo usar bibliotecas externas?
É possível referenciar bibliotecas externas no HTML, desde que a rede e as políticas do navegador permitam o carregamento.
A prévia substitui testes em produção?
Não. Teste o resultado também no ambiente final para verificar responsividade, fontes e dependências.
Ferramentas relacionadas
Depois de testar, copie o conteúdo do editor para seu projeto. A ferramenta mostra o comportamento do código no navegador, mas não substitui a validação de acessibilidade, desempenho ou compatibilidade do site final.
Antes de salvar o resultado
A prévia HTML permite experimentar uma estrutura ou um trecho de estilo e ver o resultado rapidamente.
Teste também em telas menores e verifique a acessibilidade. Evite colar scripts desconhecidos em ambientes onde haja dados ou sessões importantes.