HTML to Pug Converter

Convert HTML to Pug template syntax

Tags: convert code html pug template converter

🚀 196,214 total conversions (57 this month)

Practice Python with coding challenges

Solve hands-on problems right in this editor: run the sample tests, submit, and get an AI code review.

All Python challenges
Easy

Average of Three

Average three whole numbers.

BeginnerLearning-pathVariables
Easy

Rectangle Perimeter

Compute the perimeter of a rectangle from its sides.

BeginnerLearning-pathVariables
Hard

Course Schedule Order

Order courses so every prerequisite comes first.

AdvancedGraphsHackathonTopological-sort
No solutions yet
Medium

Island Perimeter

Measure the coastline of land cells in a grid.

AdvancedGridsHackathon
No solutions yet
Medium

K-th Smallest Element

Find the k-th smallest value without fully sorting.

AdvancedCompetitive-programmingSorting
No solutions yet
Hard

Median of Two Sorted Arrays

Find the median of two sorted lists combined.

AdvancedBinary-searchCompetitive-programming
No solutions yet
Medium

Game of Life Step

Advance Conway's Game of Life by one generation.

AdvancedGridsHackathonSimulation
No solutions yet
Hard

Shortest Delivery Tour

Visit every city once and return home as cheaply as possible.

AdvancedBitmasksCompetitive-programmingDynamic-programming
No solutions yet
Hard

Strongly Connected Components

Count groups of nodes that can all reach each other.

AdvancedCompetitive-programmingGraphs
No solutions yet
Hard

Longest Path in a DAG

Find the heaviest path in a task dependency graph.

AdvancedGraphsHackathonTopological-sort
No solutions yet
Hard

Matrix Chain Multiplication

Find the cheapest order to multiply a chain of matrices.

AdvancedCompetitive-programmingDynamic-programming
No solutions yet
Hard

Minimum Window Substring

Find the shortest piece of text containing all required characters.

AdvancedCompetitive-programmingSliding-windowStrings
No solutions yet

What is This Tool?

This free online tool allows you to quickly convert standard HTML into clean, indented Pug templates. It’s ideal for developers using Node.js and modern web frameworks who prefer readable and maintainable code.

How to Use

  1. Paste your HTML code into the editor or type it manually.
  2. Click Convert to generate the corresponding Pug code.
  3. Download, copy, or share the result with a unique link.

You can also sign in with Google or GitHub to save your conversion history for future use.

What is Pug?

Pug is a high-performance template engine for Node.js, inspired by Haml. It replaces traditional HTML with a concise, whitespace-sensitive syntax, improving code clarity and reducing repetition.

Pug is commonly used in web apps built with Express.js and offers advanced features like code reusability, logic embedding, and cleaner indentation.

Learn more at the official Pug documentation.

Pug Syntax Example


doctype html
html(lang="en")
  head
    title= pageTitle
    script(type="text/javascript").
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language
        with a strong focus on performance and features.
    

HTML vs Pug Example

HTML


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pug</title>
    <script type="text/javascript">
      if (foo) bar(1 + 5)
    </script>
  </head>
  <body>
    <h1>Pug - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>Pug is a terse and simple templating language with a strong focus on performance and powerful features.</p>
    </div>
  </body>
</html>
    

Pug


doctype html
html(lang="en")
  head
    title Pug
    script(type="text/javascript").
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      p You are amazing
      p Pug is a terse and simple templating language with a strong focus on performance and powerful features.