HTML to Pug

Convert HTML to Pug template syntax

Tags: convert code html pug template converter

Introduction

This online converter tool helps you easily convert HTML into Pug templates. It’s a convenient solution for developers who want to create cleaner, more maintainable code using the Pug template engine.

How to Use This Tool

  1. Paste your HTML code directly into the editor or type it in.
  2. Click the Convert button to generate the Pug template.
  3. After the conversion, you can:
    • Download the Pug result.
    • Save or share it with others using a unique link.
    • Sign in with Google or GitHub to save your converted templates to your account for future use.

What is Pug?

Pug is a high-performance template engine inspired by Haml and implemented in JavaScript. It is commonly used with Node.js and modern browsers.

Known for its clean and minimal syntax, Pug makes it easier to write templates while maintaining readability and simplicity. It’s an excellent choice for developers building web applications.

Learn more about Pug at the official Pug documentation .

Pug Syntax

      
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 powerful features.
      
    

Examples

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= pageTitle
    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.