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 du sonst je ein eigenes Tool oder ein Build-Setup bräuchtest: SCSS und Sass mit Dart Sass 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, als Datei zum Download oder per Use output as input als neue Eingabe für den nächsten Schritt. 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 SCSS oder Sass in der eingerückten Syntax mit Dart Sass in fertiges CSS um — inklusive Modulsystem mit @use, sass:math und sass:color. Die Syntax erkennt das Tool automatisch (oder du legst sie fest), der Output Style wählt zwischen Expanded (lesbar, eingerückt) und Compressed (minifiziert in einer Zeile). Warnungen und @debug-Ausgaben listet das Tool unter den Editoren auf, Fehler markiert es direkt in der Eingabezeile. 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 fasst Leerraum zusammen, verkleinert eingebettete <style>-Blöcke und entfernt auf Wunsch die Kommentare — ohne die Darstellung zu verändern: <pre>, <textarea> und <script> bleiben unangetastet.
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 Leerraum und — abschaltbar — Kommentare, lässt aber Strings und /*! … */-Lizenzkommentare stehen (bis auf die Zeichenfolge ;}, siehe Manual).

Dazu kommen in jedem Tab dieselben Helfer: Datei-Upload, Download unter dem Namen der hochgeladenen Datei (nach einem Minify mit .min), Copy, Use output as input für Ketten wie „beautifien, bearbeiten, minifizieren" und ein Clear mit Rückfrage. Eingaben und Optionen merkt sich das Tool im Browser.

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 Dart Sass (öffnet in neuem Tab) (englisch) in seiner reinen JavaScript-Fassung (npm-Paket sass). Das Compiler-Modul ist gzip-komprimiert rund 0,9 MB groß und wird erst beim ersten Kompilieren nachgeladen — ein kurzer Hinweis erscheint dann.
Minifizierung von JavaScript übernimmt Terser (öffnet in neuem Tab) (englisch).
Beautify für HTML, JavaScript und CSS liefert JS Beautifier (öffnet in neuem Tab) (englisch).
Minify für HTML und CSS läuft über schlanke Eigenroutinen, die bewusst nur Leerraum und Kommentare anfassen, wo das die Darstellung nicht ändert — Details im Manual.
Ein- und Ausgabe liegen in ACE-Editoren (öffnet in neuem Tab) (englisch) mit Syntax-Hervorhebung; deine Eingabe und deine Optionen werden 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