Does this send my template anywhere?

No. Rendering runs entirely in your browser using the official `pug` npm package.

Does this support extends or include?

No. Only self-contained templates are supported, since there's no filesystem to resolve other template files against.

Does it support Pug features like conditionals and loops?

Yes, `pug.render()` compiles the full Pug template language: tags, attributes, conditionals (`if`/`else`), loops (`each`), interpolation, and comments. What's missing is resolving `extends`/`include` of separate template files, since there's no filesystem to load them from.

Is the output HTML formatted or minified?

Formatted. This tool renders with Pug's `pretty` option, so tags are indented for readability. A production Express app usually wouldn't set that, since pretty-printing adds whitespace and a small runtime cost.

Pug Compiler - Compile Pug to HTML Online

Overview

Introduction

Pug's indentation-based syntax needs to render to plain HTML before a browser can use it.

This tool renders Pug templates to HTML directly in your browser using the official Pug compiler.

What Is Pug Compiler?

A Pug-to-HTML renderer using `pug.render()`, the same engine that powers server-side Pug rendering in Express and other Node frameworks.

It renders self-contained templates with no external includes or extends.

How Pug Compiler Works

Pug parses the indentation-based template syntax and renders it to a plain HTML string.

A syntax error is reported with its line and column.

When To Use Pug Compiler

Use it to quickly preview what a Pug template renders to without setting up a local Node/Express project.

It's also handy for checking how Pug's attribute shorthand, conditionals, or loops render before wiring the template into an Express app.

Often used alongside HTML Formatter and Sass Compiler.

Features

Advantages

Runs entirely client-side.
Uses the official Pug compiler, so rendered output matches server-side Pug rendering.
Reports the line and column of a syntax error, useful given how much Pug's syntax depends on indentation.

Limitations

No `extends`/`include` of other template files, since there's no filesystem for the compiler to resolve paths against.

Examples

Simple template

Input

div.card
  h1 Hello
  p World

Output

<div class="card">
  <h1>Hello</h1>
  <p>World</p>
</div>

Pug's shorthand class syntax and indentation-based nesting compile to standard HTML tags.

Best Practices & Notes

Best Practices

Keep templates self-contained (no extends/include) since this tool renders a single pasted string.
Define any variables your template references directly inside it (e.g. with `- var name = "Ada"`) before pasting, since no external locals are passed in.

Developer Notes

Uses `pug.render(input, { pretty: true })` from the `pug` package, dynamically imported.

Pug Compiler Use Cases

Previewing what a Pug template renders to
Converting a small self-contained Pug file to static HTML

Common Mistakes

Pasting a template with `extends` or `include` and expecting it to resolve, since no filesystem is available.
Referencing a template variable (like `#{user.name}`) without defining it inline first; no external locals are passed in, so an undefined variable raises a reference error at render time.

Tips

Inline any partials you'd normally include from another file before pasting.
Use Pug's unbuffered code lines (`- var x = ...`) at the top of the template to stand in for the locals a real render call would normally supply.

Pug Compiler