About

Jade (now Pug) is an indentation-sensitive template language that compiles to HTML. Manual conversion between Jade and HTML is error-prone. A misplaced indent shifts an entire subtree of elements, breaking document structure without any visible syntax error. This tool performs real-time bidirectional conversion: Jade/Pug markup to valid HTML, and standard HTML back to minimal Jade notation. It parses CSS-style selectors (div#id.class), attribute blocks, nested hierarchies, text nodes, and self-closing (void) elements. The converter handles implicit div tags, pipe-text continuation, and block-text syntax. Note: advanced Pug features like mixins with arguments, JavaScript expressions inside templates, includes, and extends require a full Node.js runtime and are outside scope here.

Formulas

Jade/Pug uses indentation-based nesting. The parser operates on a line-by-line basis with the following grammar:

line → indent ⋅ tag ⋅ selectors ⋅ attrs ⋅ text

Where indent = number of leading spaces (each 2 spaces = 1 nesting level), tag is an HTML element name (defaults to div if omitted), selectors is a sequence of #id and .class tokens parsed via pattern match(/([#.][\w-]+)/g), and attrs are key-value pairs inside parentheses parsed via a state-machine tokenizer.

depth = spacesindentSize

The reverse (HTML → Jade) walks the DOM tree via DOMParser, computes depth from tree position, extracts id and class into selector shorthand, and reconstructs minimal Jade notation. Void elements (br, hr, img, input, meta, link, etc.) are detected from a static set of 16 tag names per the HTML5 specification.

Reference Data

Jade/Pug Syntax	HTML Output	Description
`div`	`<div></div>`	Basic tag
`div.foo`	`<div class="foo"></div>`	Class shorthand
`div#bar`	`<div id="bar"></div>`	ID shorthand
`.foo`	`<div class="foo"></div>`	Implicit div with class
`#bar`	`<div id="bar"></div>`	Implicit div with ID
`a(href="/") Home`	`<a href="/">Home</a>`	Attributes + inline text
`input(type="text", name="q")`	`<input type="text" name="q">`	Void (self-closing) element
`p.` (followed by indented text)	`<p>block text</p>`	Block text (dot syntax)
`\| Plain text`	`Plain text`	Pipe text (literal text node)
`// Comment`	`<!--Comment-->`	HTML comment
`//- Comment`	(nothing)	Silent comment (not output)
`doctype html`	`<!DOCTYPE html>`	Doctype declaration
`div#a.b.c`	`<div id="a" class="b c"></div>`	Combined ID + multiple classes
`br`	`<br>`	Void element (no closing tag)
`img(src="x.png", alt="X")`	`<img src="x.png" alt="X">`	Void element with attributes
`ul` → (indented) `li Item`	`<ul><li>Item</li></ul>`	Nesting via indentation
`h1= title`	`<h1>#{title}</h1>`	Buffered code (kept as placeholder)
`meta(charset="utf-8")`	`<meta charset="utf-8">`	Void meta tag
`script.` (indented JS)	`<script>...</script>`	Inline script block
`style.` (indented CSS)	`<style>...</style>`	Inline style block

Frequently Asked Questions

This converter handles static Jade syntax: tags, nesting, classes, IDs, attributes, text, comments, doctypes, pipe text, and block text. It does not evaluate JavaScript expressions, mixin definitions with parameters, includes, extends, template inheritance, conditionals (if/else/unless), or iteration (each/for). These features require a full Pug compiler runtime. Buffered code lines (e.g., h1= variable) are preserved as literal placeholder text.

The parser auto-detects the indent unit from the first indented line encountered. If the first indent is a tab character, all subsequent indentation is measured in tabs. If it is spaces, the number of spaces on that first indented line becomes the indent unit (commonly 2 or 4). Mixing tabs and spaces in a single document will produce incorrect nesting and a parsing error.

Yes. The converter extracts id and class attributes from elements and writes them as Jade selector shorthand (div#myId.myClass). If the tag is div and it has an id or class, the div tag name is omitted (implicit div). Void elements omit closing tags. Attributes beyond id/class are placed in parentheses. Whitespace-only text nodes are discarded.

The converter uses the browser's native DOMParser to parse HTML. Browsers are extremely tolerant of malformed HTML and will auto-correct missing closing tags, reorder misplaced elements, and insert implied elements like <tbody>. The resulting Jade output reflects the browser's corrected DOM, not the original source. This can be useful for discovering structural errors in your markup.

Interpolation tokens like #{variable} are treated as literal text strings in the output HTML. They are not evaluated. The converter preserves them verbatim so you can see where dynamic content would appear, but no variable substitution occurs. For live Pug compilation with data, use the Node.js pug package.

Inline tag nesting (e.g., a: img(src="x.png")) is supported via colon syntax - each colon-separated segment becomes a nested child. Multiline attributes spread across lines with a trailing opening parenthesis are merged by the parser until the closing parenthesis is found. The attribute parser handles single quotes, double quotes, and unquoted boolean attributes.