⌘ K
pug → html · indent-aware · shorthand · attrs · live

Render Pug as HTML

Indentation-aware Pug parser that emits clean, semantic HTML. ID and class shorthand expand to attributes, parenthesised attribute lists become space-separated key/value pairs.

Pug → HTML
Input
126 B
7 lines
Output
184 B
9 lines
Status
ready
live
Ratio
1.46×
out/in
input · pug
output · html
<div class="card">
  <h1 id="title">Hello</h1>
  <p>Some text</p>
  <a href="https://example.com" target="_blank">Visit</a>
  <ul>
    <li>First</li>
    <li>Second</li>
  </ul>
</div>
Quick Start

How rendering works

Each non-blank line becomes one element. Indentation expresses nesting, the tag-id-class shorthand maps directly to attributes, and explicit (key=\"value\", …) lists round out anything the shorthand can't express.

  1. 01

    Paste Pug

    Lines starting with | are plain text appended to the parent 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 · sourcepug · live
    div.card
  h1 Hello
    loaded · parsedtarget · ready
  2. 02

    Shorthand expanded

    #hi becomes id="hi"; .card.hero becomes class="card hero".

    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
    #. · optionsattrs · live
    <div id="hi" class="card hero">
    options applied · liveround-trip
  3. 03

    Attributes parsed

    Parenthesised key=value pairs become attribute strings on the opening tag.

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

    attrsidempotentround-tripdiff-cleandeterministic
    () · convertedtag · ready
    a(href="...") → <a href="...">
    converted · livediff-clean
  4. 04

    Copy or download

    Save as .html — paste into a static site, an Express render or a documentation page.

    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 toolsHTML to PugHTML to JSXSVG to JSXBootstrap to TailwindInline Styles to CSSCSS to JS Object
Use Cases

When to render Pug

Express, static sites, prototypes.

Express previews

Render a snippet to HTML without booting Express. 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

Static-site builds

Snapshot a Pug page for a CDN drop or sanity check. 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

Designer hand-off

Show non-Pug stakeholders what the markup will look like. 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

Embed runnable Pug examples and their HTML side by side. 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

Migrations

Lift Pug pages out of an Express app into a static site. 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 how indentation maps to HTML nesting. 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

No — this is a single-file, indentation-only renderer. Pre-process includes with the official pug CLI for full template features.
Not yet — Pug logic (each, if, mixin) isn't interpreted. Plain markup only.
Spaces. Keep your indentation consistent throughout — mixed indents confuse the stack-based parser.
All elements get an explicit closing tag. HTML void elements still render correctly in browsers.
No. Parsing and rendering run entirely 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!