Free HTML to Jade/Pug Converter

Free
Utility

Convert HTML to clean, structured Jade/Pug or vice versa.

Advertisement

Ad blocked by browser

HTML ↔ Jade/Pug

Quick Tips:
  • • Use class names with dots: .container.fluid
  • • IDs with hash: #header
  • • Attributes in parentheses: (type="text")
  • • Indent child elements
  • • Use | for text content

Examples

Basic Layout

Simple HTML structure with header and content

<div class="container">
  <header class="header">
    <h1 class="title">Welcome</h1>
    <nav class="nav">...

Form Elements

Common form inputs and controls

<form class="contact-form">
  <div class="form-group">
    <label for="name">Name:</label>
    <input type="text" id="name" placeholder="Enter your name" required>...

Nested Structure

Complex nested elements with attributes

<div class="card">
  <div class="card-header">
    <h2 class="card-title">Product</h2>
    <span class="badge">New</span>...

Attributes & Classes

Various ways to write attributes and classes

<div class="wrapper theme-dark" id="main">
  <a href="/" class="link active" data-type="home">
    <i class="icon icon-home"></i>
    <span class="text">Home Page</span>...
01

Convert HTML to Pug & Vice Versa

Quickly transform your HTML markup into clean Jade/Pug syntax and back with a single click!

Two-Way Conversion

Easily convert between HTML and Jade/Pug formats with high accuracy.

Custom Formatting Options

Adjust settings like tab size, class notation, and attribute style for a tailored output.

Live Code Preview

Instantly view your converted code before copying it to ensure accuracy.

One-Click Copy

Copy your converted code instantly and use it in your projects.

Developer-Friendly

Perfect for front-end developers who need quick and efficient HTML-Pug conversions.

Syntax Highlighting

Enhanced readability with syntax highlighting for better coding experience.

6+
Features
99.9%
Reliability
24/7
Available
Free
Always
02

How to Use

Simple 5-step process

1

Step 1

Enter your HTML or Jade/Pug code in the input field.

2

Step 2

Select whether to convert from HTML to Jade/Pug or vice versa.

3

Step 3

Customize settings such as indentation, class notation, and attribute formatting.

4

Step 4

Preview the converted code to ensure accuracy.

5

Step 5

Copy the converted code with a single click.

Quick Start
Begin in seconds
Easy Process
No learning curve
Instant Results
Get results immediately

Frequently Asked Questions

Everything you need to know about our process, pricing, and technical capabilities.

See Full FAQ

Jade (now known as Pug) is a template engine that simplifies writing HTML through indentation-based syntax.

Yes! Our tool allows two-way conversion between HTML and Jade/Pug.

Yes, our HTML to Jade/Pug converter is completely free with no limitations.

Absolutely! The converter preserves attributes, classes, and IDs with customizable settings.

Yes! You can choose between spaces and tabs, and set indentation size as needed.

Yes, inline styles are preserved during the conversion process.

Self-closing tags are handled properly based on Jade/Pug and HTML specifications.

Yes, the tool generates Pug syntax that is compatible with Pug.js for templating.

Yes, you can preview the output before copying it to ensure it meets your needs.

Yes! Our HTML to Jade/Pug converter is optimized for both desktop and mobile users.

Still have questions?

Can't find what you're looking for? We're here to help you get the answers you need.