Code-Werkstatt

Für ein schnelles Experiment brauchst du kein Projekt anzulegen. Kein npm install, kein Konfig-Wust, keine Wartezeit. Die Code-Werkstatt läuft komplett in deinem Browser: Du tippst in drei Editor-Tabs - HTML, CSS und JavaScript - und die Vorschau rendert bei jeder Änderung live mit. Ideal für den Moment, in dem du eine Idee einfach nur ausprobieren willst.

Die Editoren bringen Syntaxhervorhebung und eine aufgeräumte Monospace-Darstellung mit, damit Code auch bei etwas mehr Zeilen lesbar bleibt. Über die Layout-Modi entscheidest du, wie viel Platz du wo brauchst: Editor und Vorschau nebeneinander (horizontal), untereinander (vertikal), oder du blendest eine Seite ganz aus und nutzt den vollen Fensterbereich nur zum Schreiben oder nur zum Anschauen.

Die eingebaute Konsole fängt deine console.log-Ausgaben ab und zeigt sie direkt neben der Vorschau an - inklusive Fehlermeldungen, wenn dein JavaScript stolpert. So debuggst du ohne den Umweg über die Entwicklertools des Browsers und siehst sofort, an welcher Stelle etwas hakt.

Der eigentliche Zeitsparer ist die Vorlagen-Bibliothek. Über 20 Presets decken typische Web-Bausteine ab und sind bewusst im werkzeu.ge-Geist gehalten: ein MwSt-Live-Rechner, eine deutsche Adress- und PLZ-Validierung, ein IBAN-Formatierer, ein Briefkopf-Generator für Geschäftsbriefe, ein CSS-Gradient-Generator, ein Passwort-Generator, ein ELSTER-XML-Viewer und mehr. Du lädst eine Vorlage, siehst sofort funktionierenden Code und baust von dort weiter.

Weil alles clientseitig läuft, verlässt kein Zeichen deinen Rechner. Dein Code wird nicht an einen Server geschickt, nicht geloggt, nicht gespeichert, wenn du es nicht selbst anstößt. Das macht die Werkstatt schnell und datensparsam - und du kannst auch sensiblen Prototypen-Code bedenkenlos ausprobieren.

Die Code-Werkstatt ersetzt keine vollwertige IDE für ein großes Projekt, und das soll sie auch nicht. Sie ist der digitale Notizzettel für Web-Code: schnell offen, schnell getippt, schnell verworfen oder weitergebaut. Für Snippets, Lernübungen, kleine Demos und das schnelle Nachschlagen, wie eine bestimmte CSS- oder JS-Sache eigentlich funktioniert, ist genau das der richtige Ort.