Pug in HTML, wenn Sie das Markup vor dem Einfügen wirklich sehen wollen
Pug (und die ältere Jade-Syntax) tauscht spitze Klammern gegen Einrückung. Das ist angenehm – bis zwanzig verschachtelte Zeilen vor Ihnen liegen und Sie prüfen müssen, ob `nav.main-nav` drei Ebenen höher korrekt geschlossen wurde. Üblich ist die `pug`-CLI auf einem Rechner mit Node. Diese Seite erledigt den Kompilierungsschritt im Tab, den Sie ohnehin offen haben. Snippet einfügen, `.pug` oder `.jade` hochladen, rechts das HTML beim Bearbeiten mitlesen. Die Umwandlung läuft nach dem Laden der Seite lokal – nichts wird zur Transformation an einen Server geschickt. Was diese Werkbank von einem Einmal-Konverter unterscheidet, ist die Vorschau: Sie wechseln vom Quelltext zur gerenderten Ansicht der Seite und finden Layout-Fehler, bevor das HTML im CMS, im E-Mail-Tool oder im Repo des Teams landet.
Visuelle Umwandlung schlägt Einrückung im Kopf nachrechnen
Die meisten Pug-zu-HTML-Hilfen liefern ein Textfeld und einen Download-Link. Für ein fünfzeiliges Fragment reicht das. Sobald Sie Navigations-Markup, eine Karten-Grid oder einen Footer mit gemischtem Text und Links prüfen, wird es eng. Hier bleiben Quelle und Ergebnis gleichzeitig sichtbar. Einrückung ändern, HTML-Panel beobachten, auf Vorschau wechseln, wenn Abstände und Hierarchie zählen – nicht nur, ob irgendwo ein `</div>` steht. Die Statusleiste unter dem Editor zeigt, ob die Vorlage parst. Bei Fehlern kommt die Compiler-Meldung zur betroffenen Stelle – statt eines stillen leeren Panels. Live-HTML plus gerenderte Ansicht in einer Sandbox: genau das ist der praktische Unterschied. Sie exportieren kein Markup blind und öffnen es erst in einer zweiten App, um zu sehen, ob die Seite stimmt.
Ein paar Grenzen gleich vorweg, damit Sie keine Zeit verlieren. Das Tool kompiliert das Pug, das Sie einfügen oder importieren, im Browser. Es liest keinen Projektordner – `include`, `extends` und externe Partials fallen weg. Mixins, Bedingungen, Schleifen sowie `style.`- und `script.`-Blöcke in derselben Datei verhalten sich wie bei einer lokalen Kompilierung. Schreiben Sie mehrzeiliges JavaScript am Dateianfang – etwa Arrays mit Menüpunkten –, nutzen Sie eine einzelne `-`-Zeile und rücken den JavaScript-Block darunter ein. Pug wertet nur die erste Zeile nach `-` als Code; setzt man ein Array in der nächsten Einrückungsebene ohne dieses Muster fort, interpretiert der Parser die Zeilen als Markup. Die Fehlermeldung wirkt oft kryptisch, bis man die Regel kennt.
Zurück zum KonverterGerenderte Vorschau, nicht nur Quelltext
Der Tab Vorschau lädt Ihr kompiliertes HTML in einem isolierten iframe. Überschriften, Listen und Links erscheinen so, wie der Browser sie zeichnet – hilfreich, wenn die Einrückung allein nicht verrät, ob ein Abschnitt am richtigen Platz gelandet ist.
Nebeneinander beim Syntax-Fix
Links Pug, rechts HTML. Kleine Änderungen – Attribut umbenennen, fehlender Punkt bei einer Klasse – sind sofort sichtbar, bevor Sie kopieren oder herunterladen.
Keine Installation für die schnelle Übergabe
Brauchen Sie nur Markup für ein Ticket oder einen einmaligen Landing-Block, entfällt `npm install pug` und ein lokales Skript. Importieren, umwandeln, kopieren, weiter.
Pug in HTML umwandeln und die Seite prüfen, nicht nur die Tags
Bearbeitung nebeneinander, gerenderte Vorschau des HTML, Rohmarkup zum Kopieren und Export – ohne Upload Ihrer Quelle auf einen Server.
Visuelle Umwandlung, der Sie vor dem Einfügen vertrauen können
Das Layout ist bewusst schlicht: links Pug, rechts die Ausgabe. Während Sie tippen, aktualisiert sich das HTML-Panel. Vorschau zeigt das Dokument als Seite – Navigationsleisten, Kartenraster, Footer-Spalten – statt die Struktur nur aus eingerückter Kurzsyntax abzuleiten. So fallen Fehler auf, die beim Überfliegen von spitzen Klammern durchrutschen: fehlender Wrapper, Klasse am falschen Element, Text neben dem Link statt darin. Roh-HTML bleibt einen Klick entfernt, wenn Sie Attribute prüfen, ein Fragment fürs CMS kopieren oder mit einer bestehenden Datei vergleichen wollen. Sie sind weder auf Vorschau noch auf Quelltext festgelegt – der Ablauf entspricht dem, wie Vorlagen in der Praxis geprüft werden.
Pug in HTML umwandeln: So nutzen Sie diese Seite
Pug-Quelle hinzufügen
In die linke Spalte einfügen oder per Hochladen eine `.pug`- oder `.jade`-Datei wählen. Die Einrückung definiert die Verschachtelung – Tabs und Leerzeichen dürfen innerhalb der Datei nicht mischen. Variablen oder Arrays in ungepuffertem JavaScript (`-`): mehrzeiligen Code unter eine alleinstehende `-`-Zeile setzen und den Skriptblock darunter einrücken.
HTML lesen und Vorschau öffnen
Rechts startet die gerenderte Vorschau der kompilierten Seite. Tab HTML zeigt die literalen Tags. Zeigt das Eingabefeld einen Fehler, zuerst diese Zeile korrigieren – Vorschau und Export bleiben gesperrt, bis die Vorlage parst.
Kopieren, herunterladen oder im Playground weiterarbeiten
Kopieren, wenn das Ziel ein anderes Tool oder ein CMS-HTML-Block ist. Download speichert eine `.html`-Datei. Vorschau/HTML visuell bearbeiten schickt die aktuelle Ausgabe an den Playground der Startseite, wenn Sie über Pug hinaus visuell nachbearbeiten wollen.
Pug in HTML: Fragen, die in der Praxis auftauchen
Pug in HTML verwandeln – und vorher wirklich gesehen haben
Bearbeitung nebeneinander, gerenderte Vorschau, Kopieren und Download – gratis, ohne Konto.
Pug in HTML
- Visuelle Umwandlung: Pug und HTML nebeneinander
- Gerenderte HTML-Vorschau vor dem Export
- Kopieren, Download oder Playground
- Läuft lokal im Browser nach dem Laden
Nur eigenständige Vorlagen – kein `include` oder `extends` von der Festplatte.
