⌘ K
html → pug · id/class shorthand · attrs · indent · live

Convert HTML to Pug

Turn verbose HTML into terse Pug (Jade) templates. IDs and classes use the shorthand syntax, other attributes go in parentheses, and indentation expresses nesting.

HTML → Pug
Input
134 B
5 lines
Output
0 B
1 lines
Status
error
see panel
Ratio
0.00×
out/in
input · html
output · pug
Quick Start

How HTML becomes Pug

The browser's DOM parser walks the tree, emitting one element per line. IDs become #id, classes become .a.b, other attributes become (key="value"), and text-only children inline on the parent line.

  1. 01

    Paste HTML

    Any HTML fragment — fragments don't need a root element.

    Parsing is strict-but-tolerant — comments and trailing commas are accepted on input where the source format historically permits them; output stays canonical.

    inputstricttolerantliveparse
    in · sourcehtml · live
    <div class="card">...</div>
    loaded · parsedtarget · ready
  2. 02

    Shorthand emitted

    id="hi" becomes #hi; class="card hero" becomes .card.hero on the tag.

    Conversion preserves type information where the target supports it (numbers stay numeric, booleans stay boolean) so the destination parser never has to re-coerce.

    shorthandtype-preservinglosslesslivememoised
    id · optionsclass · live
    div#title.card
    options applied · liveround-trip
  3. 03

    Attributes in parens

    Other attributes (href, target, data-*) collapse inside (key="value", ...).

    Re-encoding is idempotent: running output back through the same converter produces the same bytes, which keeps round-trips git-friendly.

    attrsidempotentround-tripdiff-cleandeterministic
    () · convertedattrs · ready
    a(href="...", target="_blank")
    converted · livediff-clean
  4. 04

    Copy or download

    Save as .pug — ready for Express, Vue templates or pug-cli builds.

    Copy writes via navigator.clipboard.writeText; downloads use the target’s native MIME so editors apply the right syntax highlighting on open.

    exportclipboardtarget MIMEblobclient-side
    ✓ · copiedready · done
    ✓ Copied
    shipped · ready to shipsuccess
Pro tips

Converting between formats, safely

Pick the strictest source format

Lossy formats hide bugs. Choose JSON or YAML as your source-of-truth, convert downstream as needed.

Round-trip in CI

If your converter is idempotent, your CI can verify A → B → A equals the original. Catches subtle data loss.

Numbers vs strings differ

YAML/TOML have a number type; CSV doesn’t. Quote IDs in CSV to keep leading-zero values intact.

Watch character encoding

Source format may be Latin-1 / Windows-1252; target should be UTF-8. Convert encoding before structure.

Preserve comments where you can

YAML and TOML support comments. Don’t silently drop them — they often encode intent.

Schema-aware beats blind

Use a schema to guide conversion. Field types, required-ness, and defaults survive better with structure.

Related toolsPug to HTMLHTML to JSXSVG to JSXCSS to JS ObjectBootstrap to TailwindInline Styles to CSS
Use Cases

When to convert to Pug

Express, server-side rendering, terse templates.

Express apps

Bring a static HTML mockup into res.render() with Pug views. Type information survives: numbers stay numeric, booleans stay boolean, strings stay strings. The destination parser doesn't have to re-coerce, which avoids the &quot;'true' becomes &quot;true&quot;&quot; bug class.

round-trip safe

Email templating

Pug + pug-html-loader keeps email markup readable. Run output back through the inverse converter to verify idempotent round-trips in CI. A → B → A should produce byte-identical input — if it doesn't, you've found data loss.

type-preserving

Static-site templates

Compact source for 11ty, Bridgetown or hand-rolled static builds. Comments and metadata survive where the target format supports them (YAML, TOML, HCL). The tool doesn't silently drop intent-encoded annotations, which keeps your config self-documenting.

schema-aware

Documentation

Show Pug examples alongside the HTML they emit. Pair with a schema (JSON Schema, OpenAPI, Zod, Pydantic) to catch shape drift on either side. Catch breaking changes at conversion time rather than at runtime in production.

lossless

Legacy migration

Refactor verbose HTML markup into Pug for maintainability. Output respects target-format conventions: quoting in CSV, indent in YAML, brackets in JSON. Existing parsers don't need patches, and the result drops into legacy pipelines unchanged.

diff-clean

Teaching

Demonstrate Pug's terseness with a side-by-side example. Encoding-aware: handles UTF-8 vs UTF-16 vs Latin-1 / Windows-1252 transparently. The character-set surprise that breaks &quot;works on my machine&quot; doesn't apply here.

spec-grade
FAQ

Frequently asked questions

HTML comments are dropped; add Pug comments (// …) manually after pasting.
Doctype declarations aren't emitted. Add doctype html on its own line if your template needs one.
Yes — class="a b c" becomes .a.b.c after the tag name.
Two spaces. Re-indent with your editor if your style guide prefers tabs or four spaces.
No. Parsing and emission run locally in your browser.
Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!