Die besten Online-Code-Editoren

Welcher Online-Code-Editor der beste ist, hängt davon ab, welche von drei Aufgaben Sie erledigen wollen: einen Frontend-Playground (CodePen, JSFiddle) für gerenderte Demos, eine browserbasierte Entwicklungsumgebung (StackBlitz, CodeSandbox, Replit) für Projekte, die einen echten Node-Prozess benötigen, oder einen KI-first-Builder (Bolt), der aus einem Prompt ein funktionierendes Projekt macht.

Stellen Sie sich vor, ein Maintainer bittet um eine minimale Reproduktion. Sie schicken einen CodePen-Link und stellen dann fest, dass der Bug erst nach npm install und einem Vite-Build auftritt. Ein kleiner Bug-Report hat Sie nun einen ganzen Nachmittag gekostet.

Dieser Artikel ordnet die Tools in diese drei Gruppen ein und bewertet jedes anhand derselben fünf Kriterien. Außerdem geht es darum, was CodePen 2.0 verändert, wie leicht Sie Ihre Arbeit auf eine andere Plattform mitnehmen können und wo Ihr Code tatsächlich landet. Desktop-Editoren und Cloud-VM-IDEs wie GitHub Codespaces werden nicht berücksichtigt.

Welche drei Arten von Online-Code-Editoren gibt es?

Jeder Online-Code-Editor gehört zu einer von drei Gruppen. Die Gruppe bestimmt, was das Tool ausführen kann. Wählen Sie daher zuerst die Gruppe und erst dann das Tool.

• Frontend-Playgrounds (CodePen, JSFiddle): Sie schreiben HTML, CSS und JavaScript, und die Seite wird in einer Live-Vorschau gerendert. Diese Tools sind für Demos und kleine Reproduktionen gedacht.
• Browserbasierte Entwicklungsumgebungen: Sie führen einen echten Node-Prozess mit installierten Paketen und einem Build-Schritt aus. StackBlitz betreibt Node mithilfe von WebContainers direkt im Tab. Die Devboxes von CodeSandbox und Replit führen Projekte auf entfernten Rechnern aus.
• KI-first-Builder (Bolt): Ein Prompt erzeugt ein komplettes Projekt, das Sie anschließend iterativ weiterentwickeln.

Ein Vergleich von CodePen mit CodeSandbox ist meist ein Kategorienfehler. CodePen ist darauf ausgelegt, eine gerenderte Demo zu teilen, CodeSandbox dagegen darauf, ein Projekt mit Build-Schritt und installierten Paketen auszuführen. Wer Tools aus verschiedenen Gruppen gegeneinander in ein Ranking stellt, erhält irreführende Vergleiche.

Was ändert sich mit CodePen 2.0?

CodePen 2.0 rückt CodePen näher an ein Projekt-Tool heran, ohne es zu einem zu machen. Laut CodePens Launch-Post erfolgte der Start am 23. Juli 2026. Beschrieben wird ein einziger Editor, der sowohl den alten Pen-Editor als auch den alten Project-Editor ersetzt und zusätzlich neue Funktionen mitbringt.

Das bedeutet dies für Sie, wenn Sie mit klassischen Pens vertraut sind:

• Mehrere Dateien in einem Pen. Früher haben Sie drei Pens miteinander verkettet und JavaScript aus den beiden anderen importiert. Jetzt liegen die Dateien in einem einzigen Pen. Laut CodePens Dokumentation zu Files sind kostenlose Pens auf drei Dateien begrenzt und können keine hochgeladenen Mediendateien wie Bilder enthalten. PRO-Tarife erhöhen das Dateilimit und erlauben Mediendateien.
• npm-Pakete in package.json. Abhängigkeiten werden versioniert in einem Manifest verwaltet, statt als CDN-URLs eingefügt zu werden. Installiert wird allerdings nichts. CodePens Dokumentation zu Packages erläutert, dass der Compiler package.json in eine Import Map umwandelt und die Pakete weiterhin über das CDN esm.sh geladen werden.
• Zusammenarbeit. In kostenpflichtigen Tarifen können Sie andere als Editoren einladen. Sie können gemeinsam in Echtzeit an einem Pen arbeiten oder Änderungen vornehmen, während die anderen offline sind. PRO-Nutzer können außerdem eine Live-Vorschau in einem anderen Tab oder Browser öffnen, die sich beim Bearbeiten aktualisiert. Beide Funktionen werden in CodePens FAQ „What changed“ behandelt.
• Blocks. Neue Sprachen und Tools werden als Blocks eingebunden, zum Beispiel MJML. Die Seite What’s New beschreibt Blocks als den Weg, über den CodePen neue Technologien integriert.
• Deployments. Mit einem Klick wird der Pen auf einer Subdomain unter *.codepen.app bereitgestellt. In PRO-Tarifen können Sie zusätzlich Ihre eigene Domain darauf verweisen lassen.

Klassische Pens gibt es weiterhin. Der klassische Editor funktioniert wie bisher. Die Umstellung eines bestehenden Pens auf 2.0 ist optional, allerdings hat CodePen angekündigt, künftig möglicherweise alle Pens auf 2.0 umzustellen.

Keine der bestätigten Funktionen von 2.0 ist eine Server-Runtime oder ein Terminal. Für eine Reproduktion, die einen Node-Dev-Server benötigt, gehört CodePen nach wie vor zur falschen Gruppe. Tariflimits jenseits der Dateianzahl finden Sie auf CodePens Preisseite.

Die übrigen Kandidaten

JSFiddle, StackBlitz, CodeSandbox, Replit und Bolt werden im Folgenden jeweils anhand derselben fünf Kriterien beschrieben. Das Preismodell ist bei allen gleich aufgebaut: Es gibt einen kostenlosen Tarif, und kostenpflichtige Tarife bieten mehr Kapazität und zusätzliche Datenschutzoptionen. Details finden Sie auf der Preisseite des jeweiligen Anbieters.

JSFiddle

Was läuft: HTML, CSS und JavaScript in einer Browser-Vorschau. Kostenloser Tarif: ausreichend für öffentliche Snippets. Repo-Import: nichts, was in einen Repo-Workflow passt. Einbetten/Teilen: Sie teilen eine URL. Portabilität: Sie kopieren die Inhalte der Panels manuell heraus. Nutzen Sie JSFiddle, wenn der Bug auf einen Bildschirm passt.

StackBlitz

Was läuft: Node.js im Browser-Tab, über WebContainers. StackBlitz’ Dokumentation zum Import weist darauf hin, dass alles außerhalb von Node.js nicht läuft. Damit scheiden Sprachen wie PHP, Python und Java aus, ebenso Datenbanken wie MySQL und PostgreSQL, die ein eigenes Serverprogramm benötigen. Kostenloser Tarif: nützlich für öffentliche Reproduktionen. Repo-Import: Öffnen Sie stackblitz.com/github/{user}/{repo}, um ein beliebiges öffentliches Repo zu laden. Das StackBlitz-Projekt folgt dann dem Repo, sodass neue Commits, die Sie zu GitHub pushen, auch dort erscheinen. Einbetten/Teilen: Sie können Projekte einbetten, etwa in Dokumentationen und Blogbeiträge, und „Open in StackBlitz“-Buttons in eine README aufnehmen. Wenn Sie statt einer eingebetteten Demo einen Editor in Ihrem eigenen Produkt benötigen, ist das eine andere Aufgabe, die in Create your own Code Editor with React behandelt wird. Portabilität: hoch, wenn Sie von GitHub aus starten. Nutzen Sie StackBlitz, wenn eine Reproduktion npm install erfordert.

CodeSandbox

Was läuft: Devboxes führen Projekte auf entfernten Rechnern aus. Kostenloser Tarif: vorhanden, mit mehr Rechenleistung in kostenpflichtigen Tarifen. Repo-Import: Der GitHub-Workflow von CodeSandbox befindet sich im Wandel. Together AI hat CodeSandbox übernommen und überführt die Produkte von CodeSandbox auf die eigene Plattform. Prüfen Sie daher die aktuelle Dokumentation, bevor Sie sich auf einen Import-Ablauf verlassen. Einbetten/Teilen: geteilte Workspaces. Portabilität: hängt davon ab, ob das Projekt auf einem Repo basiert. Nutzen Sie CodeSandbox, wenn ein Team eine gemeinsame Remote-Umgebung benötigt.

Replit

Was läuft: gehostete Workspaces auf der Infrastruktur von Replit, die nicht auf Node beschränkt sind. Kostenloser Tarif: gut geeignet zum Lernen und für kleine Prototypen. Repo-Import: Replits GitHub-Import öffnet ein öffentliches Repo unter replit.com/github.com/{user}/{repo}. Für private Repos verbinden Sie Ihr GitHub-Konto unter replit.com/import. Secrets und Umgebungsvariablen werden nicht übernommen. Einbetten/Teilen: Sie teilen einen Link zu einer laufenden App. Portabilität: Das Projekt verbleibt in Replit, sofern Sie es nicht exportieren. Nutzen Sie Replit, wenn das Backend nicht in JavaScript geschrieben ist.

Bolt

Was läuft: Die von Bolt generierten Projekte laufen im Browser auf WebContainers. Bolt stammt von StackBlitz, und das Open-Source-Repo beschreibt den Stack. Kostenloser Tarif: ausreichend, um einen Prompt auszuprobieren. Repo-Import: nicht der Haupt-Workflow. Einbetten/Teilen: eine gehostete Vorschau. Portabilität: Prüfen Sie die Exportoptionen von Bolt, bevor Sie etwas bauen, das Sie behalten möchten. Wenn Sie eher KI in einem vollwertigen Editor suchen als einen Builder, der Prompts in Apps verwandelt, lesen Sie AI-Powered Code Editors: Are They Actually Improving Developer Productivity?

Lock-in und Export

Sie können ein Tool problemlos verlassen, wenn Ihre Arbeit bereits in einem GitHub-Repository liegt. Festgefahren sind Sie, wenn Ihre Arbeit nur als gehosteter Pen, Fiddle oder KI-Builder-Projekt existiert.

Beim GitHub-Import von StackBlitz bleibt das Repository die maßgebliche Kopie Ihres Codes. Deshalb lässt sich StackBlitz von allen hier vorgestellten Tools am leichtesten wieder verlassen. Rein gehostete Projekte erfordern manuellen Aufwand beim Herauslösen. CodePens Export liefert eine .zip-Datei mit Ihren Quelldateien und der Ausgabe des letzten Builds. Um lokal weiterzuarbeiten, müssen Sie jedoch Ihre eigenen Build-Tools einrichten.

Wenn die Arbeit wichtig ist, starten Sie von einem Repo aus oder pushen Sie frühzeitig in eines. Ein portables Projekt besteht aus einfachen Dateien ohne toolspezifische Bestandteile:

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

Pushen Sie diese drei Dateien zu GitHub, und das Projekt lässt sich über die /github/-URL von StackBlitz öffnen. Lokal läuft es ebenfalls mit npm install && npm run dev.

Datenschutz und Offline-Nutzung

Jeder Online-Code-Editor in diesem Artikel läuft auf dem Server eines Drittanbieters. Wenn Code im Browser-Tab ausgeführt wird, ändert das, wo er ausgeführt wird, nicht aber, wo er gespeichert wird. StackBlitz führt Ihren Code im Tab aus, speichert das Projekt aber dennoch im eigenen Dienst, sofern es nicht in Ihrem Repository liegt.

Wenn Code Ihren Rechner nicht verlassen darf, ist kein Online-Editor das richtige Werkzeug, auch keiner von denen, die im Tab laufen. Für schnelle Änderungen an lokalen Dateien zeigt How to use Chrome as a Code Editor and Debugger, wie DevTools Workspaces einen lokalen Ordner direkt lesen und beschreiben können.

Welchen Online-Code-Editor sollten Sie verwenden?

Einen Gesamtsieger unter den Online-Code-Editoren gibt es nicht. Entscheiden Sie je nach Aufgabe:

Die Gruppe, zu der ein Tool gehört, bestimmt, was es ausführen kann. Das Tool, das Sie innerhalb dieser Gruppe wählen, bestimmt, wie leicht Sie es wieder verlassen können. Wenn Sie das nächste Mal einen Tab öffnen, um etwas zu bauen, das Sie später noch brauchen, legen Sie es zuerst in einem GitHub-Repository an und wählen Sie dann den Editor, der es öffnen kann.

FAQs

Führt CodePen 2.0 npm install für die Pakete in package.json aus?

Nein. CodePen 2.0 erkennt die Pakete, die ein Pen verwendet, und listet sie in einer bearbeitbaren package.json auf. Der CodePen-Compiler wandelt diese Datei anschließend in eine Import Map um, die jedes Paket über das CDN esm.sh lädt. Es wird nichts installiert, und es gibt keinen node_modules-Ordner. Sie können eine eigene Import Map hinzufügen; CodePen gibt Ihren Einträgen dann Vorrang vor den generierten.

Funktioniert StackBlitz in Firefox und Safari?

Ja, mit Einschränkungen. WebContainers, die Runtime hinter StackBlitz und Bolt, funktionieren vollständig in Chrome und Chromium-basierten Browsern. Firefox wird im Beta-Status unterstützt, Safari ab Version 16.4 ebenfalls. Weder Firefox noch Safari unterstützen den von WebContainers benötigten Cross-Origin-Isolation-Modus vollständig, sodass eine Server-Vorschau im Editor Assets von Drittanbietern blockieren kann. Öffnen Sie die Vorschau in einem eigenen Fenster, um dieses Problem zu umgehen.

Kann StackBlitz ein privates GitHub-Repository öffnen?

Nur mit einer kostenpflichtigen StackBlitz-Mitgliedschaft. Öffentliche Repos lassen sich kostenlos unter stackblitz.com/github/USER/REPO öffnen, der Import privater Repos ist jedoch eine Funktion der Mitgliedschaft. Ein einfacher /github/-Link lädt das Repo ohne Schreibzugriff, und beim ersten Speichern wird die Seite neu geladen und in Ihre eigene Kopie überführt. Setzen Sie /fork vor den GitHub-Pfad, etwa stackblitz.com/fork/github/USER/REPO, um sofort eine neue Kopie zu öffnen.