Jade to HTML Converter Online — Free Pug Compiler

Compile Jade/Pug indent-based templates to standard HTML markup. Resolve tag.class, tag#id, and attribute shorthand. 100% in your browser — no upload, no account.

Input Pug/Jade

HTML Output

What is a Jade to HTML Converter?

A Jade to HTML converter compiles Pug (formerly Jade) template syntax — which uses indentation instead of closing tags — into standard HTML markup. Indent levels become nesting depth, tag.class becomes <tag class="class">, and tag#id becomes <tag id="id">. The result runs in any browser with no Node.js or Pug runtime.

Pug is concise — a 30-line Pug template often expands to 60+ lines of HTML — but it requires a Node.js build step at runtime. When you need plain HTML for a static host, an email campaign, a CMS that wants raw markup, or a non-Node hosting environment, ahead-of-time compilation is the answer. The OpenFormatter converter runs entirely in your browser: paste Pug, click Compile, copy the HTML.

How to convert Jade to HTML — 4 steps

Paste your Pug template. Drop a .pug or .jade file into the Input panel, or click Load Sample to try a demo layout.
Click Compile. The converter walks the indent tree client-side and emits properly nested HTML5.
Inspect the output. Verify class and id attributes, attribute order, and the close-tag positions in the right-hand panel.
Copy and deploy. Click Copy and paste into your static site, email template, or CMS — no Pug runtime needed.

Sample transformation

Pug input

section.hero
  h1#title Welcome
  p.lead Build faster
  a(href="/start", class="btn") Get started

HTML output

<section class="hero">
  <h1 id="title">Welcome</h1>
  <p class="lead">Build faster</p>
  <a href="/start" class="btn">Get started</a>
</section>

Notice how each indent level produces one HTML nesting level, and how shorthand selectors (.hero, #title, (href=...)) become standard HTML attributes.

Indent-Aware Compilation

Every indent level becomes one HTML nesting level. The compiler tracks an open-tag stack and emits matching closers when indentation decreases.

Shorthand Resolution

tag.class, tag#id, and (attr=value) shorthand are expanded into standard HTML class, id, and key="value" attributes.

Client-Side Only

Templates compile in JavaScript inside your browser. Proprietary layouts and internal copy never leave the device.

Common use cases

check_circleCompiling Pug templates to HTML for non-Node.js hosting (Netlify, Cloudflare Pages, S3)
check_circleExporting Pug email templates to plain HTML for Mailchimp, SendGrid, or Postmark
check_circlePreviewing Pug snippets without spinning up a Node.js dev server
check_circleMigrating legacy Jade templates to plain HTML when phasing out Pug
check_circleGenerating static HTML for CMSes that accept raw markup but not template engines
check_circleSharing rendered output with designers, stakeholders, or QA without runtime tooling
check_circleSanity-checking the HTML output of a Pug snippet before committing
check_circleTeaching newcomers how Pug indentation maps to HTML nesting

Pug vs HTML: when to compile ahead of time

Pug is excellent for authoring — short, readable, DRY — but the runtime cost of a template engine is real. Every page render means parsing Pug, walking the AST, and producing HTML. For static content that does not change between requests, ahead-of-time compilation eliminates that cost: you ship a small HTML file, the browser renders it, done. The OpenFormatter Jade-to-HTML converter is the simplest way to do that one-shot compilation without installing the pug npm package or wiring up a build script.

More HTML tooling

Format, validate, view, and convert HTML with the rest of OpenFormatter's toolkit — all browser-side.

HTML to Jade HTML Formatter HTML Validator

Frequently Asked Questions

What is the difference between Jade and Pug?

They are the same template language. Jade was renamed to Pug in 2016 after a trademark dispute with a Canadian company that owned the Jade name. Any document written in Jade syntax compiles identically with the modern pug npm package — the keywords, indentation rules, and shorthand selectors are unchanged.

How does Jade indentation translate to HTML nesting?

Pug uses whitespace instead of closing tags. Each indent level becomes one level of HTML nesting. The converter detects the indent step (commonly 2 spaces) and emits matching </tag> closers when indentation decreases. Mixing tabs and spaces breaks parsing — pick one and stick to it.

Does the converter handle Pug class and id shorthand?

Yes. div.card becomes <div class="card">, h1#hero becomes <h1 id="hero">, and a.btn.primary becomes <a class="btn primary">. Standalone .card with no tag defaults to <div class="card"> per the Pug specification.

Can it compile Pug mixins, includes, or extends?

No. File-based directives (include, extends, block) require a file system to resolve, which a browser-based tool cannot access. For mixin and inheritance compilation, run the pug CLI locally or use a Node.js build step. This converter handles the indent-to-HTML transformation that 90% of Pug snippets need.

What happens to Pug interpolation like #{variable}?

Interpolation tokens like #{name} or !{html} require runtime variables. This converter outputs them as literal text in the HTML, so you can review the structure. To produce final HTML with values substituted, run pug.compile() in Node.js with a locals object.

Is my template uploaded to your servers?

No. Jade-to-HTML compilation runs entirely in your browser. Templates containing proprietary layouts, internal copy, or product names never leave your device. Open DevTools Network tab and click Run — no requests are made.

Why does my Pug fail with "unexpected token"?

The two most common causes are mixed tabs and spaces (Pug forbids mixing) and inconsistent indent depth (a child indented 3 spaces under a parent indented 2 spaces). Check your editor settings — most editors can replace tabs with spaces and show a visible indent guide.

Can the converted HTML be used without a Node.js server?

Yes. The output is plain HTML5 — no Pug runtime, no Node.js, no build step. Drop it into any web server, static host, CDN, or email template. This is the main reason developers compile Pug ahead of time: serve a small HTML file, not a runtime template engine.