Automatisch im Browser speichern
Nach einer kurzen Schreibpause werden deine Änderungen gespeichert. Projekte und Einstellungen bleiben in diesem Browser. Die Speicheranzeige zeigt, ob die letzten Änderungen bereits gesichert sind.
Ähnliche Tools
So verwendest du den Code-Editor
Das Video konnte nicht geladen werden. Du kannst weiterhin der Anleitung unten folgen.
Das Video zeigt die englische Oberfläche.
Öffne am Computer „Vorlagen“ und wähle zum Beispiel „Taschenrechner“. Die Vorlage erstellt ein separates Projekt. Beginne auf dem Smartphone in der vorhandenen Datei index.html. Über die Datei-Tabs wechselst du zwischen HTML, CSS und JavaScript.
Ein Web-Editor für dein ganzes Projekt
Getrennte Projekte
Halte dein CSS-Experiment von der nächsten Webseite getrennt. Jedes Projekt hat eigene Dateien und Ordner. Im Fenster „Projekte“ wechselst du zwischen ihnen.
Dateien und Ordner
Erstelle verschachtelte Ordner und ziehe Dateien hinein. Du kannst den Dateibrowser als schwebendes Fenster anheften, damit der Projektbaum neben deinem Code sichtbar bleibt.
3 weitere anzeigenWeniger anzeigen
Drei Arbeitsbereich-Layouts
Mit „Geteilte Ansicht“ bearbeitest du jeweils eine Datei. „Gestapelte Ansicht“ zeigt die Dateien des aktuellen Ordners untereinander, „Mehrere Fenster“ in separaten Panels. Passe die Panelgrößen an, um Code oder Vorschau mehr Platz zu geben.
Live-Vorschau und Konsole
Die Vorschau wird nach einer kurzen Schreibpause aktualisiert. Unter „Konsole“ siehst du JavaScript-Ausgaben, Warnungen und Fehler. Dort kannst du auch Befehle in der Vorschau ausführen.
Editor-Einstellungen
Wähle „Dunkel“, „Hell“ oder „System“ und passe Schrift und Einrückung an. Zeilenumbruch, Zeilennummern sowie das automatische Schließen von Tags und Klammern lassen sich einzeln ein- und ausschalten.
Häufige Fragen
Wie funktioniert das automatische Speichern?
Drei Sekunden nach der letzten Bearbeitung wird das Projekt in IndexedDB in diesem Browser gespeichert. Einstellungen werden direkt bei einer Änderung gespeichert. Warte vor dem Schließen der Seite auf den Status „Gespeichert“. Der Browserspeicher kann gelöscht werden oder nicht verfügbar sein. Exportiere wichtige Projekte deshalb als ZIP-Sicherung. Der Rückgängig-Verlauf und die Cursorposition bleiben zwischen Besuchen nicht erhalten.
Kann ich an mehreren Projekten arbeiten?
Ja. Über „Projekte“ in der Werkzeugleiste kannst du Projekte erstellen, wechseln, umbenennen oder löschen. Jedes Projekt enthält eigene Dateien, Ordner und Inhalte.
Wie organisiere ich Dateien in Ordnern?
Öffne die Ordnerauswahl links in der Werkzeugleiste, um „Ordner und Dateien“ anzuzeigen. Mit dem Plus neben einem Ordner fügst du eine Datei oder einen Unterordner hinzu. Über das Stiftsymbol benennst du einen Eintrag um. Dateien lassen sich in Ordner ziehen und der Dateibrowser als schwebendes Fenster anheften.
Welche Layouts stehen zur Verfügung?
Wähle unter „Layout“ zwischen „Geteilte Ansicht“, „Gestapelte Ansicht“ und „Mehrere Fenster“. Die erste Ansicht verwendet einen Editor mit Datei-Tabs. Die zweite ordnet die Dateien des aktuellen Ordners untereinander an, die dritte öffnet sie in separaten Panels. Du kannst die Panels vergrößern, verkleinern, minimieren oder maximieren. Wenn du ein Datei-Panel schließt und die Nachfrage bestätigst, wird die Datei gelöscht.
5 weitere anzeigenWeniger anzeigen
Welche Sprachen werden unterstützt?
Du kannst Dateien für HTML, CSS, JavaScript, JSON, XML, Python, Java, C, C++, PHP und einfachen Text erstellen. Die ersten neun Typen haben Syntaxhervorhebung. PHP und einfache Textdateien werden ohne Sprachhervorhebung angezeigt. Für HTML, CSS und JavaScript gibt es außerdem Autovervollständigung mit Ctrl+Space.
Kann ich hier Python, Java oder C++ ausführen?
Nein. Du kannst diese Dateien mit Syntaxhervorhebung bearbeiten, aber die Vorschau führt nur HTML, CSS und JavaScript aus. Für Python, Java, C oder C++ brauchst du eine Umgebung mit dem passenden Interpreter oder Compiler.
Bleibt mein Code privat?
Der Editor speichert Projektdateien in diesem Browser und lädt sie zum Bearbeiten nicht hoch. Die Vorschau führt jedoch deinen Code aus. Externe Skripte, Schriften, Bilder oder Netzwerkanfragen darin können andere Dienste kontaktieren. Führe nur Code aus, dem du vertraust.
Wie bearbeite ich HTML, CSS und JavaScript mit Vorschau?
Beginne mit index.html, style.css und script.js oder lade eine Vorlage. Verweise im HTML mit einem link-Element auf style.css und mit einem script-Element auf script.js. Die Vorschau lädt deine lokalen Dateien über diese Verweise. Nach Änderungen wird sie bei einer kurzen Schreibpause aktualisiert. JavaScript-Ausgaben erscheinen unter „Konsole“.
Ist das eine kostenlose Alternative zu CodePen?
Ja, wenn du HTML, CSS und JavaScript ohne Konto ausprobieren möchtest. Du erhältst eine Live-Vorschau, mehrere Dateien, eine Konsole, lokale Projektspeicherung und ZIP-Export. Der Editor veröffentlicht jedoch keine teilbare Projektseite und bietet keine Zusammenarbeit in Echtzeit.
Technische Details
Syntaxhervorhebung
CodeMirror 5 hebt die Syntax von HTML, CSS, JavaScript, JSON, XML, Python, Java, C und C++ hervor. Du kannst auch PHP- und einfache Textdateien erstellen, die ohne Hervorhebung angezeigt werden. Die Hervorhebung erleichtert das Bearbeiten. Ausführen kann die Vorschau nur HTML, CSS und JavaScript.
Automatisches Speichern und Datenhaltung
Nach einer dreisekündigen Bearbeitungspause schreibt der Editor Dateien und Ordnerstruktur in IndexedDB. Einstellungen werden separat gespeichert. Das Projekt merkt sich die ausgewählte Datei und den Ordner, aber weder den Rückgängig-Verlauf noch die Cursorposition. Ob sich die lokale Kopie wieder öffnen lässt, hängt von der Verfügbarkeit des Speichers und davon ab, ob Browserdaten gelöscht wurden.
4 weitere anzeigenWeniger anzeigen
Editor-Funktionen
CodeMirror bietet Zeilennummern, Einrückung, automatisches Schließen, Code-Faltung und Suche mit regulären Ausdrücken. Die Schriftgröße reicht von 12 bis 24 Pixeln, die Tabulatorbreite kann 2, 4 oder 8 Leerzeichen betragen. Als Darstellung stehen „Dunkel“, „Hell“ und „System“ zur Wahl. Die letzte Option folgt den Geräteeinstellungen.
Dateien und Projekte
Jedes Projekt enthält Textdateien und einen virtuellen Ordnerbaum. Der Export erstellt ein ZIP des aktuellen Projekts und erhält die Ordnerpfade. Um Code von anderswo zu übernehmen, lege die Dateien an und füge ihren Inhalt ein. ZIP-Archive lassen sich nicht importieren.
Live-Vorschau und Konsole
Die Vorschau zeigt ein HTML-Dokument in einem iframe mit Sandbox-Beschränkungen. Verweise auf lokale Stylesheets und Skripte werden in Daten-URLs umgewandelt. Externe Ressourcen können weiterhin über das Netzwerk geladen werden. Eine Änderung plant die Aktualisierung nach 500 Millisekunden. Die Konsole empfängt Ausgaben und Fehler aus der Vorschau und sendet JavaScript-Befehle an sie.
Layouts
„Geteilte Ansicht“ verwendet Datei-Tabs in einem Editor. „Gestapelte Ansicht“ ordnet die Editoren für Dateien des aktuellen Ordners untereinander an. „Mehrere Fenster“ öffnet separate Datei-Panels neben der Vorschau. Die Layout-Auswahl wird lokal gespeichert, aber nicht jede Panelposition oder jeder Bearbeitungszustand wird wiederhergestellt.