The Best Online Code Editors

The best online code editor depends on which of three jobs you have: a front-end playground (CodePen, JSFiddle) for rendered demos, an in-browser dev environment (StackBlitz, CodeSandbox, Replit) for projects that need a real Node process, or an AI-first builder (Bolt) for turning a prompt into a working project.

Picture a maintainer asking for a minimal repro. You send a CodePen link, then realise the bug only shows up after npm install and a Vite build. A small bug report has now cost you an afternoon.

This article sorts the tools into those three groups and scores each one on the same five criteria. It also covers what CodePen 2.0 changes, how easily you can take your work elsewhere, and where your code actually goes. Desktop editors and cloud VM IDEs such as GitHub Codespaces are left out.

What Are the Three Kinds of Online Code Editor?

Each online code editor belongs to one of three groups. The group decides what the tool can run, so choose the group first and the tool second.

• Front-end playgrounds (CodePen, JSFiddle): you write HTML, CSS and JavaScript, and the page renders in a live preview. They are built for demos and small repros.
• In-browser dev environments: these run a real Node process with installed packages and a build step. StackBlitz runs Node inside the tab using WebContainers. CodeSandbox’s Devboxes and Replit run projects on remote machines.
• AI-first builders (Bolt): a prompt produces a whole project, which you then iterate on.

Comparing CodePen with CodeSandbox is usually a category mistake. CodePen is built for sharing a rendered demo, while CodeSandbox is built for running a project with a build step and installed packages. Ranking tools from different groups against each other produces misleading comparisons.

What Does CodePen 2.0 Change?

CodePen 2.0 moves CodePen closer to a project tool without turning it into one. CodePen’s launch post dates the launch to 23 July 2026. It describes one editor that replaces both the old Pen editor and the old Project editor, with new features on top.

Here is what that means if you are used to classic Pens:

• Multiple files in one Pen. You used to chain three Pens together and import JavaScript from the other two. Now the files live inside a single Pen. CodePen’s Files docs say free Pens are limited to three files and cannot hold uploaded media such as images. PRO plans raise the file limit and allow media files.
• npm packages in package.json. Dependencies are versioned in a manifest instead of being pasted in as CDN URLs. Nothing is installed, though. CodePen’s Packages docs explain that the compiler turns package.json into an import map, and the packages still load from the esm.sh CDN.
• Collaboration. On paid plans you can invite people as editors. You can work on a Pen together in real time, or make changes while the others are offline. PRO users can also open a Live Preview in another tab or browser, and it refreshes as you edit. CodePen’s “What changed” FAQ covers both features.
• Blocks. New languages and tools plug in as Blocks. MJML is one example. The What’s New page describes Blocks as the way CodePen adds new technology.
• Deploys. One click deploys the Pen to a *.codepen.app subdomain. PRO plans can also point your own domain at it.

Classic Pens have not gone away. The classic editor still works as before. Converting an existing Pen to 2.0 is optional, although CodePen has said it may convert all Pens to 2.0 in future.

None of the confirmed 2.0 features is a server runtime or a terminal. For a repro that needs a Node dev server, CodePen is still the wrong group. For plan limits beyond file counts, check CodePen’s pricing page.

The Rest of the Field

JSFiddle, StackBlitz, CodeSandbox, Replit and Bolt are each described below with the same five fields. For all of them, the pricing works the same way: there is a free tier, and paid plans add capacity and privacy options. See each vendor’s pricing page for the details.

JSFiddle

What runs: HTML, CSS and JavaScript in a browser preview. Free tier: enough for public snippets. Repo import: none that fits a repo workflow. Embed/share: you share a URL. Portability: you copy the panels out by hand. Use JSFiddle when the bug fits on one screen.

StackBlitz

What runs: Node.js in the browser tab, through WebContainers. StackBlitz’s import docs warn that anything outside Node.js will not run. That rules out languages such as PHP, Python and Java, and databases such as MySQL and PostgreSQL that need their own server program. Free tier: useful for public repros. Repo import: open stackblitz.com/github/{user}/{repo} to load any public repo. The StackBlitz project then follows the repo, so new commits you push to GitHub show up there too. Embed/share: you can embed projects in docs and blog posts, and add “Open in StackBlitz” buttons to a README. If you need an editor inside your own product rather than an embedded demo, that is a different job, covered in Create your own Code Editor with React. Portability: high when you start from GitHub. Use StackBlitz when a repro needs npm install.

CodeSandbox

What runs: Devboxes run projects on remote machines. Free tier: available, with more compute on paid plans. Repo import: CodeSandbox’s GitHub workflow is changing. Together AI acquired CodeSandbox and is shifting CodeSandbox’s products to its own platform, so check the current docs before relying on any import flow. Embed/share: shared workspaces. Portability: depends on whether a repo backs the project. Use CodeSandbox when a team needs one shared remote environment.

Replit

What runs: hosted workspaces on Replit’s infrastructure, which are not limited to Node. Free tier: fine for learning and small prototypes. Repo import: Replit’s GitHub import opens a public repo at replit.com/github.com/{user}/{repo}. For private repos, you connect your GitHub account at replit.com/import. Secrets and environment variables are not copied over. Embed/share: you share a link to a running app. Portability: the project lives in Replit unless you export it. Use Replit when the backend is not JavaScript.

Bolt

What runs: the projects Bolt generates run in the browser on WebContainers. Bolt is made by StackBlitz, and its open-source repo describes the stack. Free tier: enough to try a prompt. Repo import: not its main workflow. Embed/share: a hosted preview. Portability: check Bolt’s export options before you build anything you need to keep. If what you want is AI inside a full editor rather than a builder that turns prompts into apps, see AI-Powered Code Editors: Are They Actually Improving Developer Productivity?

Lock-In and Export

You can leave a tool easily if your work already lives in a GitHub repository. You get stuck if your work exists only as a hosted Pen, Fiddle or AI-builder project.

StackBlitz’s GitHub import keeps the repository as the main copy of your code, which makes it the easiest tool here to leave. Hosted-only projects need manual work to extract. CodePen’s export gives you a .zip with your source files and the output of the last build, but to keep working locally you have to set up your own build tools.

If the work matters, start from a repo or push to one early. A portable project contains plain files and nothing specific to any tool:

{
  "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()}`;

Push these three files to GitHub and the project opens through StackBlitz’s /github/ URL. It also runs locally with npm install && npm run dev.

Privacy and Offline Use

Every online code editor in this article runs on someone else’s server. When code runs in the browser tab, that changes where it executes, not where it is stored. StackBlitz runs your code in the tab, but it still saves the project to its own service unless the project lives in your repository.

If code must not leave your machine, no online editor is the right tool, and that includes the ones that run in the tab. For quick edits to local files, How to use Chrome as a Code Editor and Debugger shows how DevTools Workspaces can read and write a local folder directly.

Which Online Code Editor Should You Use?

No online code editor wins overall. Choose by the task:

The group a tool belongs to decides what it can run. The tool you pick within that group decides how easily you can leave. Next time you open a tab to build something you will need later, put it in a GitHub repository first and then choose the editor that can open it.

FAQs

Does CodePen 2.0 run npm install for the packages in package.json?

No. CodePen 2.0 detects the packages a Pen uses and lists them in an editable package.json. The CodePen compiler then turns that file into an import map that loads each package from the esm.sh CDN. Nothing is installed and no node_modules folder exists. You can add your own import map, and CodePen gives your entries priority over the generated ones.

Does StackBlitz work in Firefox and Safari?

Yes, with limits. WebContainers, the runtime behind StackBlitz and Bolt, work fully in Chrome and browsers built on Chromium. Firefox has beta support, and so does Safari from version 16.4. Neither Firefox nor Safari fully supports the cross-origin isolation mode WebContainers need, so a server preview inside the editor can block third-party assets. Opening the preview in its own window gets around this.

Can StackBlitz open a private GitHub repository?

Only with a paid StackBlitz membership. Public repos open free at stackblitz.com/github/USER/REPO, but importing private repos is a membership feature. A plain /github/ link loads the repo without write access, and your first save reloads the page into your own copy. Put /fork before the GitHub path, as in stackblitz.com/fork/github/USER/REPO, to open a fresh copy straight away.