- Paste your HTML code into the input editor.
- In the options panel, select your desired indentation style (e.g., 2 spaces, 4 spaces, or tabs).
- Choose whether to use single or double quotes for attributes.
- The equivalent Jade/Pug code is automatically generated in the output editor.
- Copy the converted code for use in your project.
HTML to Jade Converter
Convert HTML (HyperText Markup Language) into Jade/Pug template syntax with configurable formatting options.
Updates as you type (debounced)
HTML input
Paste HTML markup. The conversion runs in your browser.
Options
Match your project’s indentation and attribute quote style.
Jade / Pug output
Paste HTML to generate output.
Start typing on the left — output will update automatically.
How to Use This Tool
Learn More About HTML to Jade Converter
What is Jade/Pug?
Pug (formerly Jade) is a high-performance template engine implemented with JavaScript for Node.js and browsers. It provides a clean, whitespace-sensitive syntax for writing HTML, which can significantly reduce the verbosity of your code. Pug's key features include an indentation-based hierarchy that eliminates the need for closing tags, and attributes defined inside parentheses. It also supports powerful logic like variables, loops, conditional statements, and mixins (reusable blocks of code), making it an excellent choice for building dynamic web applications.
Key Differences Between HTML and Pug
- Tags: HTML uses opening and closing tags (e.g.,
<p>...</p>), while Pug omits closing tags and uses indentation to define structure. - Nesting: HTML nests elements within parent tags. Pug uses indentation to define the same hierarchy, resulting in cleaner code.
- Attributes: In HTML, attributes are written inside the opening tag (
<div class="container">). In Pug, they are placed in parentheses after the tag (div(class='container')). Pug also offers shortcuts for classes (.container) and IDs (#main). - Text: To add plain text in HTML, you place it between tags. In Pug, you place it after a tag and a space, or on a new indented line for block-level text.
The Origin of Jade (Pug)
Pug, originally named Jade, was created by TJ Holowaychuk, a prolific developer in the Node.js community. It was designed as a high-performance template engine inspired by Haml, offering a cleaner and more expressive way to write HTML. The project was renamed to Pug in 2016 to avoid a trademark conflict, but its core philosophy of simplifying HTML generation remains the same.
Created by TJ Holowaychuk, Jade (now Pug) is a Node.js template engine designed to write HTML with a simpler, indentation-based syntax.
- Creator
- TJ Holowaychuk
- Initial Name
- Jade
- Influenced By
- Haml
- Primary Ecosystem
- Node.js
Examples
Convert a Basic HTML Document
See how a standard HTML boilerplate is transformed into clean Pug syntax with 2-space indentation.
Input
An HTML5 boilerplate document is pasted into the input field. The user selects '2 spaces' for indentation and 'double quotes' for attributes.
Output
The equivalent Pug code is generated, showing the `doctype html`, `html`, `head`, and `body` structure with proper indentation and attributes enclosed in parentheses.
Convert an HTML Form with Single Quotes
Convert a complex HTML form with various input types into a more readable Pug format with 4-space indentation.
Input
An HTML `<form>` with `<label>`, `<input>`, and `<button>` tags is provided. The output is configured to use '4 spaces' for indentation and 'single quotes' for attributes.
Output
A nested Pug representation of the form is generated, where attributes like `type`, `name`, and `for` are enclosed in single quotes.
Convert Nested Layout with Tab Indentation
Observe how nested <div> elements with classes and IDs are simplified using Pug's syntax and tabbed indentation.
Input
HTML containing several nested `<div>` elements with `id` and `class` attributes is provided. 'Tabs' is selected as the indentation style.
Output
The corresponding Pug code uses concise `.class` and `#id` syntax, with the element hierarchy defined by tab-based indentation.
Use Cases
- Migrating existing HTML templates into Pug/Jade.
- Generating a starting point for Pug views from static HTML.
- Standardizing indentation and attribute quotes across templates.