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

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.

How to Use the HTML to Jade/Pug Converter

Step 1

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

Step 2

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

Step 3

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

Step 4

Preview the converted code to ensure accuracy.

Step 5

Copy the converted code with a single click.

Frequently Asked Questions

More Development Tools

Git Command Generator

Generate commonly used Git commands to streamline your version control workflow.

SVG to JSX Converter

Convert SVG code to JSX for React effortlessly. Simplify your development workflow with this free tool.

Regex Pattern Generator

Generate and test regular expressions for validation, matching, and text processing effortlessly.

UUID Generator

Generate and validate UUIDs effortlessly. Choose between v1 (timestamp-based) and v4 (random) UUIDs with ease.

Regex Tester

Test regular expressions against input strings. Highlight matches, debug patterns, and analyze regex performance.

HTML Tag Remover

Remove all HTML tags from a block of text to extract plain content. Supports custom cleaning options.