HTML to Pug Converter

You joined an Express project that renders Pug and someone handed you a chunk of plain HTML: a Bootstrap card, a landing page section, the footer of the old site. Rewriting it by hand means deleting every closing tag and counting indentation line by line, and two stray spaces are enough to wreck the layout. Paste the HTML on one side and the Pug shows up on the other as you type.

The conversion runs on a small custom parser, not the browser DOM. The id and classes come out in shorthand (div#c1.card.active), other attributes go inside parentheses, and void tags like img, br and input never open a block. An element holding only text stays on one line (h2 Hi); mixed text and tags become piped lines. One catch: the DOCTYPE line is not turned into doctype html, it lands as plain text for you to delete.

Close every tag before pasting. A list item left without its closing tag is valid HTML, but here the next item ends up nested inside the previous one. Script and style blocks with content do not survive either, as the note under the field says. Vue and Alpine attributes lose their prefix: @click becomes click and :class is read as a plain class. Nothing leaves your browser, the pasted markup is never uploaded.