Salvamento automático no navegador
As alterações são salvas após uma breve pausa na digitação. Os projetos e as preferências ficam neste navegador. O indicador de salvamento mostra se as últimas alterações já foram salvas.
Ferramentas relacionadas
Como usar o editor de código
Não foi possível carregar o vídeo. Você pode seguir as instruções abaixo.
O vídeo mostra a interface em inglês.
No computador, abra “Modelos” e escolha, por exemplo, “Calculadora”. O modelo cria um projeto separado. No celular, comece no arquivo index.html existente. Use as abas para alternar entre HTML, CSS e JavaScript.
Um editor web para o projeto inteiro
Projetos separados
Separe seus testes de CSS da próxima página web. Cada projeto tem seus próprios arquivos e pastas. Alterne entre eles na janela “Projetos”.
Arquivos e pastas
Crie subpastas e arraste arquivos para elas. Fixe o explorador de arquivos como janela flutuante para manter a estrutura do projeto ao lado do código.
Mostrar mais 3Mostrar menos
Três layouts da área de trabalho
No modo “Visualização dividida”, você edita um arquivo por vez. “Painéis empilhados” organiza os arquivos da pasta atual um abaixo do outro, e “Várias janelas” os abre em painéis separados. Redimensione os painéis para dar mais espaço ao código ou à prévia.
Prévia em tempo real e console
A prévia é atualizada após uma breve pausa na digitação. Abra “Console” para ver mensagens, avisos e erros de JavaScript ou digitar um comando para executar na prévia.
Preferências do editor
Escolha a aparência “Escuro”, “Claro” ou “Sistema” e ajuste a fonte e a indentação. Ative ou desative a quebra de linha, a numeração e o fechamento automático de tags ou parênteses.
Perguntas frequentes
Como funciona o salvamento automático?
O projeto é salvo no IndexedDB deste navegador três segundos após a última edição. As preferências são salvas quando você as altera. Antes de fechar a página, espere aparecer “Salvo”. O armazenamento do navegador pode ser apagado ou ficar indisponível, por isso exporte os projetos importantes como backup em ZIP. O histórico de desfazer e a posição do cursor não são mantidos entre visitas.
Posso trabalhar em vários projetos?
Sim. Clique em “Projetos” na barra de ferramentas para criar, alternar, renomear ou excluir projetos. Cada projeto mantém seus próprios arquivos, pastas e conteúdo.
Como organizo os arquivos em pastas?
Abra o seletor de pastas à esquerda da barra de ferramentas para ver “Pastas e arquivos”. O botão de mais ao lado de uma pasta adiciona um arquivo ou uma subpasta, e o lápis renomeia um item. Você pode arrastar arquivos para pastas e fixar o explorador como janela flutuante.
Quais layouts estão disponíveis?
Em “Layout”, escolha “Visualização dividida”, “Painéis empilhados” ou “Várias janelas”. O primeiro modo usa um editor com abas de arquivos. O segundo organiza os arquivos da pasta atual um abaixo do outro, e o terceiro os abre em painéis separados. Você pode redimensionar, minimizar ou maximizar os painéis. Fechar o painel de um arquivo pede confirmação e exclui esse arquivo.
Mostrar mais 5Mostrar menos
Quais linguagens o editor aceita?
Você pode criar arquivos HTML, CSS, JavaScript, JSON, XML, Python, Java, C, C++, PHP e texto simples. Os nove primeiros tipos têm realce de sintaxe. PHP e texto simples são exibidos sem esse realce. HTML, CSS e JavaScript também oferecem preenchimento automático com Ctrl+Space.
Posso executar Python, Java ou C++ aqui?
Não. Você pode editar esses arquivos com realce de sintaxe, mas a prévia só executa HTML, CSS e JavaScript. Para executar Python, Java, C ou C++, use um ambiente com o interpretador ou compilador adequado.
Meu código fica privado?
O editor mantém os arquivos do projeto neste navegador e não os envia a um servidor para edição. Porém, a prévia executa seu código. Scripts, fontes, imagens externas ou requisições de rede presentes nele podem acessar outros serviços. Execute apenas código em que você confia.
Como escrevo HTML, CSS e JavaScript e vejo o resultado?
Comece com index.html, style.css e script.js ou carregue um modelo. No HTML, referencie style.css com um elemento link e script.js com um elemento script. A prévia usa essas referências para carregar os arquivos locais. Ela é atualizada após uma breve pausa na digitação, e “Console” mostra a saída do JavaScript.
É uma alternativa gratuita ao CodePen?
Sim, para testar HTML, CSS e JavaScript sem uma conta. Você tem prévia em tempo real, arquivos separados, console, salvamento local e exportação ZIP. O editor não publica uma página compartilhável do projeto nem oferece colaboração em tempo real.
Detalhes técnicos
Realce de sintaxe
O CodeMirror 5 realça a sintaxe de HTML, CSS, JavaScript, JSON, XML, Python, Java, C e C++. Você também pode criar arquivos PHP e de texto simples, exibidos sem realce. Esse recurso facilita a edição do código. A execução na prévia se limita a HTML, CSS e JavaScript.
Salvamento automático e armazenamento
Após três segundos sem edição, o editor grava os arquivos e a estrutura de pastas no IndexedDB. As preferências são armazenadas separadamente. O projeto guarda o arquivo e a pasta selecionados, mas não o histórico de desfazer nem a posição do cursor. Reabrir a cópia local depende da disponibilidade do armazenamento e da preservação dos dados do navegador.
Mostrar mais 4Mostrar menos
Recursos do editor
O CodeMirror oferece números de linha, indentação, fechamento automático, recolhimento de código e busca com expressões regulares. A fonte pode ter de 12 a 24 pixels, e a tabulação pode ocupar 2, 4 ou 8 espaços. Escolha a aparência “Escuro”, “Claro” ou “Sistema”. A última opção segue as configurações do dispositivo.
Arquivos e projetos
Cada projeto contém arquivos de texto e uma estrutura virtual de pastas. A exportação cria um ZIP do projeto atual e preserva os caminhos das pastas. Para trazer código de outro lugar, crie os arquivos e cole o conteúdo. Não é possível importar arquivos ZIP.
Prévia em tempo real e console
A prévia exibe um documento HTML em um iframe com restrições de segurança. As referências a folhas de estilo e scripts locais são convertidas em URLs de dados. Recursos externos ainda podem ser carregados pela rede. Uma edição agenda a atualização após 500 milissegundos. O console recebe mensagens e erros da prévia e envia a ela os comandos JavaScript digitados.
Layouts
“Visualização dividida” usa abas de arquivos em um único editor. “Painéis empilhados” organiza os editores da pasta atual um abaixo do outro, e “Várias janelas” abre painéis separados ao lado da prévia. A escolha do layout é salva localmente, mas nem todas as posições dos painéis ou estados de edição são restaurados.