Free HTML to Jade/Pug Converter
Convert HTML to clean, structured Jade/Pug or vice versa.
HTML ↔ Jade/Pug
- • 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
Follow these easy steps to get started with HTML to Jade/Pug Converter and achieve your goals quickly.
Enter your HTML or Jade/Pug code in the input field.
Select whether to convert from HTML to Jade/Pug or vice versa.
Customize settings such as indentation, class notation, and attribute formatting.
Preview the converted code to ensure accuracy.
Copy the converted code with a single click.
Frequently Asked Questions
Find answers to commonly asked questions about our tools and services.
Still have questions?
Can't find what you're looking for? We're here to help you get the answers you need.