Loading...
Convert PUG templates to HTML (requires pug package)
Convert Pug template to HTML instantly with our free online Pug to HTML converter. This tool helps developers transform Pug template syntax into HTML markup for web development and Node.js applications. Simply paste your Pug code and get HTML output in real-time.
Requires pug package - basic conversion only. Install with: npm install pug
Pug (formerly Jade) is a high-performance template engine heavily influenced by Haml. It uses indentation-based syntax to generate HTML more efficiently.
Pug to HTML converter transforms Pug template syntax into standard HTML markup. Pug (formerly Jade) is a clean, whitespace-sensitive template engine that compiles to HTML with features like mixins, includes, and template inheritance.
Parse Pug's indentation-based syntax, process template features (mixins, includes, extends, conditionals, loops), and generate properly formatted HTML. Handle interpolation, attributes, and text content.
Pug features: tag.class#id shorthand, (attributes), indentation nesting, = for output, - for code, | for text, mixins (+name), includes (include file), extends/block for inheritance. Compiles at build time or runtime.
Render Pug templates to HTML.
res.render("template", data)Compile Pug to static HTML files.
Generate HTML emails from Pug.
Preview Pug components as HTML.
// Pug with mixins and inheritance:
//- layout.pug
doctype html
html
head
title #{pageTitle}
block styles
body
block content
block scripts
//- page.pug
extends layout
block styles
link(rel="stylesheet" href="page.css")
block content
mixin card(title, content)
.card
.card-header= title
.card-body= content
h1= pageTitle
each item in items
+card(item.title, item.description)
// With data: { pageTitle: "My Page", items: [{title: "Card 1", description: "Desc 1"}] }
// HTML output:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="page.css">
</head>
<body>
<h1>My Page</h1>
<div class="card">
<div class="card-header">Card 1</div>
<div class="card-body">Desc 1</div>
</div>
</body>
</html>Pug supports template inheritance (extends/block), reusable mixins, loops, and variable interpolation.
Use Pug to HTML converter when developing Express.js apps, building static sites with Pug, testing templates, or learning Pug syntax.
Use include path/to/file.pug to include another template. The included file is inserted at that point. Use extends for layout inheritance with block placeholders.