Compiler

Vier Code-Transformationen unter einer Oberfläche

Der Compiler bündelt vier Aufgaben, die im Frontend-Alltag ständig anfallen und für die man sonst je ein eigenes Tool oder ein Build-Setup bräuchte: SASS/SCSS zu CSS kompilieren, sowie HTML, JavaScript und CSS wahlweise minifizieren oder beautifien (also wieder lesbar einrücken). Alles passiert in vier Tabs — SASS/SCSS, HTML, JavaScript, CSS — jeweils mit einem Eingabe- und einem Ausgabe-Editor nebeneinander.

Du fügst deinen Code links ein (oder lädst eine Datei hoch), wählst eine Aktion, und das Ergebnis erscheint rechts — fertig zum Kopieren oder als Datei zum Download. Kein Account, keine Installation, kein Server-Roundtrip: Die eigentliche Verarbeitung läuft komplett in deinem Browser.

Gedacht ist das Tool für alle, die schnell mal etwas umwandeln müssen, ohne dafür eine Toolchain aufzusetzen: Entwicklerinnen und Entwickler, die ein SCSS-Snippet aus der Doku gegenprüfen oder eine Handvoll Zeilen JavaScript verkleinern wollen; Webdesigner, die fremdes, in einer Zeile zusammengequetschtes CSS erst einmal lesbar machen müssen; und alle, die einen schnellen, nachvollziehbaren Zwischenschritt brauchen, bevor Code in ein Projekt wandert.

Was die vier Tabs können

Die vier Tabs sind bewusst unterschiedlich ausgestattet — je nachdem, was für die jeweilige Sprache sinnvoll ist:

SASS/SCSS — Kompilieren. Wandelt SASS- bzw. SCSS-Quellcode in fertiges CSS um. Eine Option steuert den Output Style: Expanded (lesbar, eingerückt) oder Compressed (minifiziert in einer Zeile). Das ist der einzige Tab, der wirklich kompiliert — die anderen drei formatieren oder verkleinern nur.
HTML — Beautify & Minify. Beautify rückt HTML sauber ein (Optionen: Einrücktiefe, Zeilenumbruch-Länge); Minify entfernt Leerraum zwischen Tags und optional die Kommentare.
JavaScript — Beautify & Minify. Beautify formatiert JavaScript lesbar; Minify verkleinert es mit dem etablierten Minifier Terser — inklusive Optionen wie Variablennamen kürzen (Mangle) und console-Aufrufe entfernen.
CSS — Beautify & Minify. Beautify rückt CSS ein; Minify entfernt Kommentare und Leerraum.

Welche Engine hinter welchem Tab steckt und welche Option genau was bewirkt, steht im Manual.

Architektur: alles im Browser

Der Compiler ist ein rein clientseitiges Werkzeug. Die Seite selbst liefert nur die Oberfläche aus; sämtliche Umwandlungen rechnet JavaScript direkt in deinem Browser:

SASS/SCSS kompiliert sass.js (englisch), eine zu JavaScript übersetzte Sass-Engine. Das Compiler-Modul ist rund 4 MB groß und wird erst beim ersten Kompilieren nachgeladen — ein kurzer Hinweis erscheint dann.
Minifizierung von JavaScript übernimmt Terser (englisch).
Beautify für HTML, JavaScript und CSS liefert JS Beautifier (englisch).
Minify für HTML und CSS läuft über schlanke, regelbasierte Eigenroutinen (kein vollwertiger Parser) — leichtgewichtig, aber mit Grenzen, die das Manual benennt.
Ein- und Ausgabe liegen in ACE-Editoren (englisch) mit Syntax-Hervorhebung; deine Eingabe wird pro Tab automatisch im Browser (LocalStorage) zwischengespeichert.

Weil nichts an einen Server geschickt wird, verlässt dein Code den Rechner nicht — relevant, wenn du nicht-öffentliche Snippets verarbeitest.

Jetzt ausprobieren

→ Compiler öffnen — Code einfügen, Tab wählen, Aktion klicken. Jeder Tab startet mit einem Beispiel-Snippet, an dem du das Verhalten sofort sehen kannst.

Vier Code-Transformationen unter einer Oberfläche

Was die vier Tabs können

Architektur: alles im Browser

Jetzt ausprobieren

Verwandte JPKCom-Tools