Pug to HTML Converter
Convert Pug (formerly Jade) templates to clean HTML instantly in your browser. Supports variables, mixins, loops, conditionals, and attribute shorthand — no server required.
How to Use Pug to HTML Converter
How to Use the Pug to HTML Converter
Step 1: Enter Your Pug Template
Paste or type your Pug template into the input field. You can use the example buttons to load pre-built samples:
- Basic Elements — standard HTML structure using Pug shorthand
- Variables & Loops —
- vardeclarations,eachloops,if/elseblocks - Mixins — reusable component definitions with
+mixin(args)calls - Forms & Attributes — form elements with
type,placeholder,required, and more
Step 2: Get the HTML Output
The converter renders your Pug template to HTML in real time. The output panel shows formatted, indented HTML that is ready to paste into any project.
Step 3: Copy or Download
Click Copy HTML to copy the output to your clipboard, or Download .html to save it as a file.
Use the Pretty Print / Minify toggle to switch between readable indented HTML and compact single-line output.
Supported Pug Features
- Tags —
div,p,span,a,img, and any HTML element - Shorthand —
.class-nameand#idon any tag (defaults todiv) - Attributes —
a(href="/about" target="_blank")syntax - Inline text —
h1 Hello Worldorp= variableName - Pipe text —
| plain textlines - Variables —
- var name = "value"declarations with#{name}interpolation - Each loops —
each item in itemswith optionalelsebranch - Conditionals —
if,else if,elseblocks - Mixins — define with
mixin name(arg), call with+name(value) - Doctype —
doctype htmlrenders<!DOCTYPE html> - Comments —
// visible commentand//- silent comment - Void elements —
input,img,br,hr,meta,linkrender without closing tags
Tips
- Indentation is significant — use consistent spaces (2 or 4) or tabs
- Mix shorthand freely:
div.container#mainbecomes<div class="container" id="main"> - Mixin arguments are passed positionally:
+button("Submit", "primary") - Use
!=instead of=to render unescaped HTML in a variable
Frequently Asked Questions
Most Viewed Tools
Screen Size Converter
Calculate screen width and height from diagonal size and aspect ratio. Convert between inches and centimeters for displays, TVs, and monitors with instant dimension calculations.
Use Tool →Reorder PDF Pages
Drag and drop to rearrange PDF pages in any order. Upload your PDF, preview all pages as thumbnails, drag pages to reorder them, and download the rearranged PDF. Fast, visual, and privacy-focused.
Use Tool →DPI Calculator
Calculate DPI (dots per inch), image dimensions, and print sizes. Convert between pixels and physical dimensions for printing and displays.
Use Tool →Paper Size Converter
Convert between international paper sizes (A4, Letter, Legal) with dimensions in mm, cm, and inches. Compare ISO A/B series and North American paper standards.
Use Tool →Fuel Consumption Converter
Convert between MPG (miles per gallon), L/100km (liters per 100 kilometers), and other fuel efficiency units. Compare car fuel economy across different measurement systems.
Use Tool →CSV Splitter
Split large CSV files into smaller files by number of rows. Process large datasets in manageable chunks instantly.
Use Tool →Product Schema Generator
Generate JSON-LD Product schema markup for SEO. Add product details like name, price, brand, rating, and availability to create structured data for rich search results.
Use Tool →Large Text File Viewer
View and search large text files up to 200MB in your browser. Features virtual scrolling, line numbers, search functionality, and file statistics. Perfect for log files, CSV, JSON, and code files.
Use Tool →Related Development Tools
QR Code Generator
FeaturedCreate custom QR codes for URLs, text, and contact info
Use Tool →XML to TOON Converter
Convert XML to TOON (Token Oriented Object Notation) and reduce LLM token usage. XML is the most verbose format — savings can exceed 50%. Free, browser-based.
Use Tool →Ruby Formatter
Format and clean up Ruby code instantly in your browser. Fix indentation, align end blocks, and normalize string quotes — no server required.
Use Tool →Parquet to CSV Converter
Convert Apache Parquet files to CSV format instantly in your browser. No uploads, no server — all processing is 100% client-side.
Use Tool →CSS to SCSS Converter
Convert plain CSS to SCSS/Sass instantly. Automatically nests child selectors under their parents, extracts repeated hex colors as $variables, and preserves @media blocks — no server required.
Use Tool →Kotlin Formatter
Format Kotlin code instantly in your browser. Fix indentation, enforce opening-brace-on-same-line style, and add trailing commas to function parameters and class bodies — no server required.
Use Tool →YAML to JSON Converter
Convert YAML data to JSON format instantly. Supports nested objects, arrays, and multi-level structures. Output as pretty-printed or minified JSON. 100% client-side and free.
Use Tool →Swift Formatter
Format Swift code instantly in your browser. Fix indentation, enforce opening-brace-on-same-line style, and normalize spacing around operators — no server required.
Use Tool →Share Your Feedback
Help us improve this tool by sharing your experience