HTML in Pug (Jade) umwandeln

HTML-Code in ein eingerücktes Pug-Template umwandeln, die Sprache hieß früher Jade

Erstellt von Ahmet Bilgiç · Zuletzt aktualisiert: 27. September 2026

Eingabe

Ausgabe

Ihre Daten bleiben bei Ihnen. Die Umwandlung läuft im Browser; nichts wird an einen Server gesendet.

Hat dieses Werkzeug geholfen?

So funktioniert es

Sie haben fertiges HTML, etwa einen Entwurf aus der Gestaltung, und Ihre Express- oder andere Node.js-Anwendung rendert Pug-Templates. Fügen Sie das HTML links ein; die Pug-Fassung erscheint sofort rechts. Aus <div class="karte" id="bestellung"> wird .karte#bestellung: Ein div mit Klasse oder ID braucht keinen Tag-Namen, weil div in Pug der Standard ist. Weitere Attribute stehen in Klammern, etwa a(href='/', target='_blank'). Eine einzelne Textzeile bleibt neben ihrem Tag (p Hallo); Text mit fetten Wörtern oder Links wird auf Zeilen verteilt, die mit | beginnen. Der Inhalt von script, style und pre bleibt Zeichen für Zeichen erhalten. Die Ergebniszeile nennt, wie viele Tags zu wie vielen Pug-Zeilen wurden.

Dieses Werkzeug ist auch als html in pug umwandeln, html zu pug konverter, html to jade, html in jade umwandeln, html to pug bekannt.

Was ist Pug (Jade)?

Pug ist eine HTML-Template-Sprache, die vor allem mit Node.js eingesetzt wird. Schließende Tags schreibt man nicht; die Einrückung zeigt, welches Element in welchem steckt. Weil Variablen, Schleifen und Bedingungen möglich sind, bauen Server wie Express damit Seiten. Bis 2016 hieß die Sprache Jade, daher tauchen in älteren Projekten noch .jade-Dateien auf.

Was ist Klassen- und ID-Kurzschreibweise?

In Pug folgt die Klasse mit einem Punkt und die ID mit einer Raute direkt auf den Tag-Namen: section.inhalt#haupt. Fehlt der Tag-Name, nimmt Pug ein div an; .karte allein bedeutet also <div class="karte">. Die Punktschreibweise erlaubt nur Buchstaben, Ziffern, Bindestrich und Unterstrich; Klassen mit Doppelpunkt oder Schrägstrich kommen in das class-Attribut in Klammern.

Was ist der Unterschied zwischen HTML und Pug?

HTML umschließt jedes Element mit einem öffnenden und einem schließenden Tag, der Browser liest es direkt. Pug beschreibt dieselbe Struktur über die Einrückung, kennt keine schließenden Tags und kürzt häufige Teile wie Klassen und IDs ab. Eine Pug-Datei wird auf dem Server zu HTML übersetzt, bevor sie den Browser erreicht; dafür lassen sich Variablen, Schleifen und gemeinsame Bausteine leicht einbauen. HTML ist also das Ergebnis, Pug das Rezept dafür.

Drei Stellen, auf die Sie achten sollten

Leerzeichen: Pug setzt zwischen Zeilen kein Leerzeichen. Bei gemischtem Text wie "Hallo <b>Welt</b>" lässt das Werkzeug das Leerzeichen am Ende der |-Zeile stehen, damit die Wörter nicht zusammenkleben. Löschen Sie diese Leerzeichen beim Nachbearbeiten nicht.

Raute und geschweifte Klammer: Pug wertet #{...} und #[...] im Text als Code aus. Steht "#{" in Ihrem HTML, schreibt das Werkzeug \#{, und Pug gibt es als normalen Text aus.

Klassen mit Sonderzeichen: Tailwind-Klassen wie md:flex oder w-1/2 passen nicht in die Punkt-Kurzschreibweise. Das Werkzeug verschiebt sie in ein Attribut class='md:flex'; Pug fasst beide Schreibweisen zu einem class-Wert zusammen.

Warum es keine Umwandlung von Pug in HTML gibt

Für den Rückweg braucht man den Pug-Compiler selbst, und der ist zusammen mit seinem JavaScript-Parser zu groß für die 2-MB-Grenze dieser Seite. Die Seite wandelt deshalb nur in eine Richtung um.

Eine .pug-Datei übersetzen Sie mit dem Paket pug in Ihrem Projekt in HTML; so rendert Ihr Server sie ohnehin.

Nicht geschlossene Tags

Browser verzeihen nicht geschlossene Tags, Pug liest die Struktur aber nur aus der Einrückung. Das Werkzeug übernimmt den Inhalt eines offenen Tags vollständig, muss die Verschachtelung jedoch erraten. In diesem Fall ergänzt die Ergebniszeile "nicht geschlossenes Tag gefunden"; prüfen Sie dann die Einrückung.

Häufige Fragen

Sind Jade und Pug dasselbe?

Ja. Die Template-Sprache Jade wurde 2016 wegen eines Markenrechtsproblems in Pug umbenannt. Die Syntax ist nahezu gleich; die Ausgabe dieses Werkzeugs nutzt die Grundsyntax, die in aktuellem Pug und in älteren Jade-Dateien funktioniert.

Warum wurde & im Attribut zu &?

Pug maskiert Attributwerte beim Rendern selbst. Bliebe & stehen, würde Pug es ein zweites Mal maskieren und auf der Seite stünde &amp;. Das Werkzeug schreibt den entschlüsselten Wert; das erzeugte HTML entspricht Ihrem Original.

Bleiben Kommentare erhalten?

Ja. Ein HTML-Kommentar wird zu einem Pug-Kommentar mit //, den Pug wieder als HTML-Kommentar ausgibt. Soll der Kommentar gar nicht auf der Seite erscheinen, ändern Sie // in //-.

Wird mein Code hochgeladen?

Nein. HTML-Parser und Pug-Ausgabe laufen beide in Ihrem Browser; der eingefügte Code verlässt diese Seite nicht.