CodeUtility
Making your developer's life easier!

HTML to Pug Converter

Convert HTML to Pug template syntax

Tags: convert code html pug template converter

🚀 196,216 total conversions (59 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

Dot Product of Two Vectors

Multiply two vectors element by element and add the results: the core operation of every neuron.

You'll learn VectorsDot product
Neural networksaimachine learning
Python C++ C#
1 solved
View solutions (1)
Easy

Distance Between Points

Compute the straight-line distance between two points.

You'll learn Pythagorean theoremSquare roots
BeginnerFunctionsLearning-pathmath
Python C++ C#
1 solved
View solutions (1)
Easy

Count Pairs With a Sum

Count pairs of positions whose values add up to a target.

You'll learn Pairs of indexesAvoiding double counts
ArraysBeginnerLearning-pathNested-loops
Python C++ C#
1 solved
View solutions (1)
Easy

Average of Three

Average three whole numbers.

You'll learn ArithmeticDivision
BeginnerLearning-pathVariables
Python C++ C#
1 solved
View solutions (1)
Easy

Rectangle Perimeter

Compute the perimeter of a rectangle from its sides.

You'll learn ArithmeticReturn values
BeginnerLearning-pathVariables
Python C++ C#
1 solved
View solutions (1)
Easy

Join Customers and Orders

Join customers with their orders like a LINQ Join and report each customer's total spend.

You'll learn LINQ JoinGrouping
ArraysSorting
Python C++ C#
0 solved
No solutions yet
Easy

To-Do List

Keep a list of tasks: add them, mark them done, remove them and report what is still pending.

You'll learn Typed collectionsRecords
BeginnerSimulationStrings
Python C++ C#
0 solved
No solutions yet
Easy

Linked List Operations

Simulate a linked list: add at either end, remove from the front or by value, and reverse it.

You'll learn Linked listsSimulation
Data-structuresSimulation
Python C++ C#
0 solved
No solutions yet
Easy

Sum a Flat JSON Object

Parse a flat JSON object whose values are integers and add up the values.

You'll learn JSON parsingString splitting
ParsingStrings
Python C++ C#
0 solved
No solutions yet
Easy

WhenAll Total Time

Find how long a program takes when each group of tasks runs together with Task.WhenAll and groups run one after another.

You'll learn Async/awaitTask.WhenAll
ArraysBeginner
C++ Python C#
0 solved
No solutions yet
Medium

Parallel Task Completion Order

Run tasks concurrently with at most k at a time and report the order in which they finish.

You'll learn ConcurrencyPriority queues
SimulationSorting
Python C++ C#
0 solved
No solutions yet
Medium

Min Stack

Build a stack that reports its smallest element instantly after any push or pop.

You'll learn StacksRunning minimum
Data-structuresStacks
Python C++ C#
0 solved
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.