Os melhores editores de código online

O melhor editor de código online depende de qual destas três tarefas você precisa resolver: um playground de front-end (CodePen, JSFiddle) para demos renderizadas, um ambiente de desenvolvimento no navegador (StackBlitz, CodeSandbox, Replit) para projetos que precisam de um processo Node de verdade, ou um builder baseado em IA (Bolt) para transformar um prompt em um projeto funcional.

Imagine um mantenedor pedindo uma reprodução mínima de um bug. Você manda um link do CodePen e só então percebe que o bug aparece apenas depois de um npm install e de um build com Vite. Um simples relato de bug acaba custando sua tarde inteira.

Este artigo divide as ferramentas nesses três grupos e avalia cada uma com base nos mesmos cinco critérios. Também mostra o que muda com o CodePen 2.0, como é fácil levar seu trabalho para outro lugar e onde seu código realmente fica armazenado. Editores desktop e IDEs em VMs na nuvem, como o GitHub Codespaces, ficaram de fora.

Quais são os três tipos de editor de código online?

Todo editor de código online pertence a um destes três grupos. É o grupo que define o que a ferramenta consegue executar, então escolha primeiro o grupo e depois a ferramenta.

• Playgrounds de front-end (CodePen, JSFiddle): você escreve HTML, CSS e JavaScript, e a página é renderizada em um preview ao vivo. Foram feitos para demos e reproduções pequenas.
• Ambientes de desenvolvimento no navegador: executam um processo Node de verdade, com pacotes instalados e etapa de build. O StackBlitz executa Node dentro da aba usando WebContainers. Os Devboxes do CodeSandbox e o Replit executam os projetos em máquinas remotas.
• Builders baseados em IA (Bolt): um prompt gera um projeto completo, que você então vai refinando.

Comparar o CodePen com o CodeSandbox costuma ser um erro de categoria. O CodePen foi feito para compartilhar uma demo renderizada, enquanto o CodeSandbox foi feito para executar um projeto com etapa de build e pacotes instalados. Ranquear ferramentas de grupos diferentes umas contra as outras gera comparações enganosas.

O que muda com o CodePen 2.0?

O CodePen 2.0 aproxima o CodePen de uma ferramenta de projetos, sem transformá-lo em uma. O post de lançamento do CodePen data o lançamento em 23 de julho de 2026. Ele descreve um único editor que substitui tanto o antigo editor de Pens quanto o antigo editor de Projects, com novos recursos por cima.

Veja o que isso significa se você está acostumado com os Pens clássicos:

• Vários arquivos em um único Pen. Antes, você encadeava três Pens e importava JavaScript dos outros dois. Agora os arquivos ficam dentro de um único Pen. A documentação de Files do CodePen informa que Pens gratuitos são limitados a três arquivos e não podem conter mídia enviada, como imagens. Os planos PRO aumentam o limite de arquivos e permitem arquivos de mídia.
• Pacotes npm no package.json. As dependências são versionadas em um manifesto, em vez de serem coladas como URLs de CDN. Porém, nada é instalado. A documentação de Packages do CodePen explica que o compilador transforma o package.json em um import map, e os pacotes continuam sendo carregados a partir da CDN esm.sh.
• Colaboração. Nos planos pagos, você pode convidar pessoas como editoras. É possível trabalhar em um Pen em conjunto em tempo real ou fazer alterações enquanto os outros estão offline. Usuários PRO também podem abrir um Live Preview em outra aba ou navegador, que é atualizado conforme você edita. O FAQ “What changed” do CodePen aborda os dois recursos.
• Blocks. Novas linguagens e ferramentas são integradas como Blocks. O MJML é um exemplo. A página What’s New descreve os Blocks como a forma pela qual o CodePen adiciona novas tecnologias.
• Deploys. Um clique faz o deploy do Pen em um subdomínio *.codepen.app. Os planos PRO também permitem apontar seu próprio domínio para ele.

Os Pens clássicos continuam existindo. O editor clássico funciona como antes. Converter um Pen existente para o 2.0 é opcional, embora o CodePen tenha dito que pode converter todos os Pens para o 2.0 no futuro.

Nenhum dos recursos confirmados do 2.0 é um runtime de servidor ou um terminal. Para uma reprodução que precisa de um servidor de desenvolvimento Node, o CodePen continua sendo o grupo errado. Para limites dos planos além da quantidade de arquivos, confira a página de preços do CodePen.

As demais ferramentas

JSFiddle, StackBlitz, CodeSandbox, Replit e Bolt são descritos abaixo com os mesmos cinco campos. Em todos eles, a precificação funciona do mesmo jeito: existe um plano gratuito, e os planos pagos acrescentam capacidade e opções de privacidade. Consulte a página de preços de cada fornecedor para os detalhes.

JSFiddle

O que executa: HTML, CSS e JavaScript em um preview no navegador. Plano gratuito: suficiente para snippets públicos. Importação de repositório: nenhuma que se encaixe em um fluxo baseado em repositório. Embed/compartilhamento: você compartilha uma URL. Portabilidade: você copia os painéis manualmente. Use o JSFiddle quando o bug couber em uma única tela.

StackBlitz

O que executa: Node.js na aba do navegador, por meio de WebContainers. A documentação de importação do StackBlitz avisa que tudo o que estiver fora do Node.js não será executado. Isso exclui linguagens como PHP, Python e Java, além de bancos de dados como MySQL e PostgreSQL, que precisam de um programa servidor próprio. Plano gratuito: útil para reproduções públicas. Importação de repositório: abra stackblitz.com/github/{user}/{repo} para carregar qualquer repositório público. O projeto no StackBlitz passa então a acompanhar o repositório, de modo que os novos commits que você enviar ao GitHub também aparecem lá. Embed/compartilhamento: você pode incorporar projetos em documentações e posts de blog, além de adicionar botões “Open in StackBlitz” a um README. Se você precisa de um editor dentro do seu próprio produto, e não de uma demo incorporada, essa é outra tarefa, abordada em Crie seu próprio editor de código com React. Portabilidade: alta quando você parte do GitHub. Use o StackBlitz quando uma reprodução precisar de npm install.

CodeSandbox

O que executa: os Devboxes executam projetos em máquinas remotas. Plano gratuito: disponível, com mais poder computacional nos planos pagos. Importação de repositório: o fluxo de trabalho do CodeSandbox com o GitHub está mudando. A Together AI adquiriu o CodeSandbox e está migrando os produtos do CodeSandbox para sua própria plataforma, então consulte a documentação atual antes de depender de qualquer fluxo de importação. Embed/compartilhamento: workspaces compartilhados. Portabilidade: depende de o projeto estar vinculado a um repositório. Use o CodeSandbox quando uma equipe precisar de um único ambiente remoto compartilhado.

Replit

O que executa: workspaces hospedados na infraestrutura do Replit, que não se limitam a Node. Plano gratuito: adequado para aprendizado e pequenos protótipos. Importação de repositório: a importação do GitHub no Replit abre um repositório público em replit.com/github.com/{user}/{repo}. Para repositórios privados, você conecta sua conta do GitHub em replit.com/import. Secrets e variáveis de ambiente não são copiados. Embed/compartilhamento: você compartilha um link para um app em execução. Portabilidade: o projeto fica no Replit, a menos que você o exporte. Use o Replit quando o backend não for JavaScript.

Bolt

O que executa: os projetos gerados pelo Bolt rodam no navegador sobre WebContainers. O Bolt é feito pelo StackBlitz, e seu repositório open source descreve a stack. Plano gratuito: suficiente para testar um prompt. Importação de repositório: não é seu fluxo principal. Embed/compartilhamento: um preview hospedado. Portabilidade: verifique as opções de exportação do Bolt antes de construir qualquer coisa que você precise manter. Se o que você quer é IA dentro de um editor completo, e não um builder que transforma prompts em apps, veja Editores de código com IA: eles realmente aumentam a produtividade dos desenvolvedores?

Lock-in e exportação

Você consegue sair de uma ferramenta com facilidade se o seu trabalho já estiver em um repositório no GitHub. Você fica preso se o seu trabalho existir apenas como um Pen, um Fiddle ou um projeto de builder de IA hospedado.

A importação do GitHub no StackBlitz mantém o repositório como a cópia principal do seu código, o que o torna a ferramenta mais fácil de abandonar entre as citadas aqui. Projetos que existem apenas na hospedagem exigem trabalho manual para serem extraídos. A exportação do CodePen gera um .zip com seus arquivos-fonte e a saída do último build, mas, para continuar trabalhando localmente, você precisa configurar suas próprias ferramentas de build.

Se o trabalho for importante, comece a partir de um repositório ou faça push para um logo no início. Um projeto portável contém arquivos simples e nada específico de nenhuma ferramenta:

{
  "name": "portable-repro",
  "private": true,
  "type": "module",
  "scripts": { "dev": "vite", "build": "vite build" },
  "devDependencies": { "vite": "^8.3.0" }
}

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Portable repro</title></head>
<body>
  <div id="app"></div>
  <script type="module" src="/main.js"></script>
</body>
</html>

const app = document.getElementById('app');
app.textContent = `Rendered at ${new Date().toISOString()}`;

Faça push desses três arquivos para o GitHub e o projeto abrirá pela URL /github/ do StackBlitz. Ele também roda localmente com npm install && npm run dev.

Privacidade e uso offline

Todos os editores de código online deste artigo rodam no servidor de outra pessoa. Quando o código é executado na aba do navegador, isso muda onde ele é executado, não onde ele é armazenado. O StackBlitz executa seu código na aba, mas ainda salva o projeto no próprio serviço, a menos que o projeto esteja no seu repositório.

Se o código não puder sair da sua máquina, nenhum editor online é a ferramenta certa, e isso inclui os que rodam na aba. Para edições rápidas em arquivos locais, Como usar o Chrome como editor de código e depurador mostra como os Workspaces do DevTools podem ler e gravar diretamente em uma pasta local.

Qual editor de código online você deve usar?

Nenhum editor de código online é o melhor em tudo. Escolha de acordo com a tarefa:

O grupo ao qual uma ferramenta pertence define o que ela consegue executar. A ferramenta que você escolhe dentro desse grupo define a facilidade de sair dela depois. Da próxima vez que você abrir uma aba para criar algo de que vai precisar mais tarde, coloque primeiro em um repositório no GitHub e depois escolha o editor que consegue abri-lo.

Perguntas frequentes

O CodePen 2.0 executa npm install para os pacotes do package.json?

Não. O CodePen 2.0 detecta os pacotes que um Pen usa e os lista em um package.json editável. Em seguida, o compilador do CodePen transforma esse arquivo em um import map que carrega cada pacote a partir da CDN esm.sh. Nada é instalado e não existe pasta node_modules. Você pode adicionar seu próprio import map, e o CodePen dá prioridade às suas entradas em relação às geradas.

O StackBlitz funciona no Firefox e no Safari?

Sim, com limitações. Os WebContainers, o runtime por trás do StackBlitz e do Bolt, funcionam plenamente no Chrome e em navegadores baseados em Chromium. O Firefox tem suporte em beta, assim como o Safari a partir da versão 16.4. Nem o Firefox nem o Safari suportam totalmente o modo de isolamento cross-origin de que os WebContainers precisam, então um preview de servidor dentro do editor pode bloquear assets de terceiros. Abrir o preview em uma janela própria contorna esse problema.

O StackBlitz consegue abrir um repositório privado do GitHub?

Somente com uma assinatura paga do StackBlitz. Repositórios públicos abrem gratuitamente em stackblitz.com/github/USER/REPO, mas importar repositórios privados é um recurso da assinatura. Um link /github/ simples carrega o repositório sem permissão de escrita, e o primeiro salvamento recarrega a página em uma cópia sua. Coloque /fork antes do caminho do GitHub, como em stackblitz.com/fork/github/USER/REPO, para abrir uma cópia nova imediatamente.