handyman
Hazuu Tools

HTML to PUG Converter

Convert HTML to clean Pug (Jade) template syntax — paste, convert, and copy instantly.

Input HTML
Output Pug
Converted Pug will appear here...
info

About HTML to PUG Converter

HTML to Pug Converter transforms standard HTML markup into Pug (formerly Jade) template syntax — the indentation-based language used in Node.js, Express, and many full-stack JavaScript frameworks. Instead of closing tags and angle brackets, Pug uses two-space indentation to express nesting. The converter handles the full vocabulary: element names, IDs and classes written as shorthand selectors (#id and .class), arbitrary attributes in parentheses, inline text, text-pipe blocks, comments, self-closing void elements, and the doctype declaration.

You would reach for this tool when migrating a legacy HTML front-end to a Pug-based Express project, when integrating a designer-supplied HTML mockup into an existing .pug view layer, or when learning Pug syntax by comparing known HTML with its equivalent output. The fragment mode is particularly useful for converting partial templates or component snippets: it skips the outer html and body wrappers and outputs only the inner markup, so the result drops directly into an existing layout file.

Every conversion runs entirely in your browser using the native DOMParser. No HTML is uploaded, stored, or transmitted, which means proprietary templates, internal dashboards, and client work remain on your machine. The tool is free with no account, no rate limit, and no file-size cap. Performance depends only on your device, not a remote server.

star

Key Features

check_circle

ID and class shorthand

IDs and classes are written as #id and .class directly on the selector. A div with only classes or an ID omits the tag name entirely, matching how experienced Pug developers write components.

check_circle

Attribute preservation

Non-class, non-id attributes — href, src, type, data-*, aria-* — are collected and rendered in Pug parenthesized syntax, with boolean attributes (e.g. disabled) kept as bare names.

check_circle

Fragment mode

Toggle Fragment mode to strip the outer html and body wrapper and output only the inner content. This is the right default when you are converting partial templates or UI components rather than full documents.

check_circle

Self-closing void elements

Void elements such as img, br, hr, input, meta, and link are rendered without child blocks, matching the Pug convention and preventing invalid output.

check_circle

Comment passthrough

HTML comments are converted to Pug unbuffered comments (//) so developer notes survive the conversion and stay at the correct indentation level.

check_circle

100% client-side and private

The DOMParser runs locally in your browser tab. No network request is made, which makes it safe for proprietary templates, internal tooling, and client codebases.

help

How to Use

01

Paste HTML

Copy your HTML code and paste it into the left input pane.

02

Convert

Click "Convert" to transform your HTML into Pug template syntax.

03

Copy Result

Use the copy button to grab your Pug output.

code_blocks

Example

A navigation snippet showing how IDs, classes, attributes, nested elements, and inline text are converted to Pug shorthand.

HTML input
<nav id="main-nav" class="nav sticky">
  <a href="/" class="logo">Acme</a>
  <ul class="links">
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
  <!-- skip to content -->
  <button type="button" disabled>Menu</button>
</nav>
Pug output
#main-nav.nav.sticky
  a.logo(href="/") Acme
  ul.links
    li
      a(href="/about") About
    li
      a(href="/contact") Contact
  // skip to content
  button(type="button", disabled) Menu
lightbulb

Common Use Cases

  • arrow_circle_right

    Migrating Express views from EJS or plain HTML

    When switching an existing Express app to Pug views, convert each .html or .ejs file and drop the output into the views/ directory. The converter preserves all routing-critical attributes so hrefs and form actions survive intact.

  • arrow_circle_right

    Integrating designer mockups into a Pug project

    Designers often deliver static HTML files. Convert the markup to Pug and paste it directly into the relevant layout or include file, keeping class names and data attributes exactly as specified.

  • arrow_circle_right

    Learning Pug by example

    Paste any HTML snippet you already understand and compare it line-by-line with the Pug output. Seeing how nested divs, class lists, and attribute groups map to Pug syntax builds fluency faster than reading documentation alone.

  • arrow_circle_right

    Converting Bootstrap or Tailwind HTML snippets

    Documentation and theme sites distribute components as plain HTML. Convert utility-class-heavy markup to Pug without losing any classes, then drop the block into a mixin or include.

  • arrow_circle_right

    Generating partial templates for server-side rendering

    Use fragment mode to convert only the inner markup of a widget or card component. The output is ready to include in a larger Pug layout without extra wrapper elements.

quiz

Frequently Asked Questions

What is HTML to PUG Converter? expand_more
HTML to PUG Converter is a free online tool that transforms HTML markup into Pug (formerly Jade) template syntax. Pug is a popular template engine used with Node.js and Express that uses indentation instead of closing tags for a cleaner, more concise syntax.
What is fragment mode? expand_more
Fragment mode skips the outer html and body wrapper elements and only converts the inner content. This is useful when you are converting HTML snippets or partial templates rather than full HTML documents. Fragment mode is enabled by default.
Is my data secure? expand_more
Yes. All conversion happens entirely in your browser using JavaScript. No data is sent to any server, ensuring your HTML code remains completely private and secure.
Does it handle CSS classes and IDs? expand_more
Yes. The converter uses Pug shorthand notation for IDs and classes. A div with id="main" class="container active" becomes #main.container.active and the div tag name is omitted when an ID or class is present.
What HTML elements are supported? expand_more
All standard HTML elements are supported, including nested elements, attributes, comments, text content, and self-closing tags like img, br, hr, input, meta, and link. The tool preserves attribute values and converts them to Pug parenthesized syntax.
How does this differ from the HTML to Text converter? expand_more
HTML to Text strips all markup and returns only the readable words a browser would display — it is for extracting copy. HTML to Pug keeps the full structure of the document and re-expresses it in Pug indentation syntax, which you then use in a template engine.
How does this differ from the HTML to Markdown converter? expand_more
HTML to Markdown targets content authors: headings become # headers, links become [text](url), and the result is human-readable prose markup. HTML to Pug targets developers: every element, attribute, and nesting level is preserved so the output can be rendered by a Pug template engine.
Can it convert a full HTML document including the doctype? expand_more
Yes. Disable Fragment mode and paste a complete HTML document. The converter emits doctype html at the top and then recursively converts the html, head, and body trees into indented Pug.