Free HTML to Jade/Pug Converter.

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

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>...

How it works

Five steps.

  1. 01

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

  2. 02

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

  3. 03

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

  4. 04

    Preview the converted code to ensure accuracy.

  5. 05

    Copy the converted code with a single click.

Features

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.

FAQ

Questions.

Can't find an answer? Send us your question.

What is Jade/Pug?

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

Can I convert Pug back to HTML?

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

Is this tool free to use?

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

Does it support attributes and classes?

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

Can I customize the indentation style?

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

Does this tool support inline styles?

Yes, inline styles are preserved during the conversion process.

What happens to self-closing tags?

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

Is this converter compatible with Pug.js?

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

Can I preview the converted code?

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

Is this tool mobile-friendly?

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

Related tools

More Web Development tools.

All 57 Web Development tools →

Built by Infyways

Need more than a tool.

These utilities are made by the Infyways studio. When a free tool is not enough, we build the real thing.