Introduction to Pug

Pug is a template engine implemented in JavaScript that allows you to dynamically generate HTML, like Thymeleaf in Java and Twig in PHP. Its syntax is inspired by Haml. It is therefore minimalist and based on indentations. I have never used pug but my first impressions are rather mixed.

Previously « Jade »

Before, Pug was called Jade. Only Jade has become a registered trademark and as the domain of the trademark is very close (both refer to the software world), the people in charge of the repository on Github have chosen to rename it.

Command to install Pug

npm install pug-cli -g 


yarn global add pug-cli

To compile a file (example: example.pug into example.html), we use:

pug -P example.pug
here are the different options of the pug command

The Syntax

The names of tags in Pug are represented by selectors inspired by CSS syntax. In addition, its indentation dependent syntax makes it more condensed, more readable and less prone to problems of the absence of a closing tag.

   <!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="fontawesome-free-5.15.1-web/css/all.css" rel="stylesheet">
        <link rel="stylesheet" href="../css/marmiton.css">


    <div class="bloc">

        <a href="">
            <div class="image_bloc">

                <img src="https://assets.afcdn.com/recipe/20171113/74835_w300h400c1cx2646cy1780.jpg" alt="">



        <div class="wraper">
            <span class="contenu_bloc_circle"></span>
            <a href="" class="contenu_icon">
                <i class="far fa-heart  icon_heart"></i>
            <a class="bloc_contenu" href="">
                <div class="contenu_bloc">
                    <div class="bloc_text">
                        <div class="bloc_titre">
                                Velouté potimarron-marron simple et goûteux




        <div class="type_bloc">Recette du jour</div>



Nothing new in the above code now let’s pugified it.

doctype html
  meta(name='viewport', content='width=device-width, initial-scale=1.0')
  title Marmiton
  link(href='fontawesome-free-5.15.1-web/css/all.css', rel='stylesheet')
  link(href='https://fonts.googleapis.com/css2?family=Raleway:ital,wght@1,200&family=Sansita+Swashed:wght@300&display=swap', rel='stylesheet')
  link(rel='stylesheet', href='../css/marmiton.css')
      img(src='https://assets.afcdn.com/recipe/20171113/74835_w300h400c1cx2646cy1780.jpg', alt='')
              | Velouté potimarron-marron simple et goûteux
  .type_bloc Recette du jour

A div tag is implicitly added when it is not associated with the css selector. We used dots in our css for a class, yes? Pug too! No more need to write the div. Make sure to wrap these attributes well as href. With that we have a full pug component, full of all the syntactic warmth you could possibly want in pug. The result here will be exactly the same as our original HTML component. It’s pretty darn quick to write too.


Tag attributes look similar to HTML (with optional commas), but their values are just regular JavaScript.

a(href='//needemand.com') Needemand
a(class='veillepug' href='//needemand.com') Needemand
a(class='veillepug', href='//needemand.com') Needemand

gives in html

<a href="//needemand.com">Needemand</a>
<a class="veillepug" href="//needemand.com">Needemand</a>
<a class="veillepug" href="//needemand.com">Needemand</a>

Multiline Attributes

If you have many attributes, you can also spread them across many lines:


gives in html

<input type="checkbox" name="agreement" checked="checked" />


You’re all set with learning pug’s condensed syntax, now let’s get into some more complex features. Variables are handy little buggers which let you store values ​​and reuse them later on. This is really useful for stuff like your page title or link.

- var url = 'pug-test.html';
- var pageTitle = 'Veille technologie pug'
a(href='/' + url) Link
- url = 'https://example.com/'
a(href=url) Another link
h1 #{pageTitle} 

In pug we use - var to declare a variable, and = to assign a value. To reference those variables, we can use interpolation - a way to tell pug that the following text is actually a variable .

<a href="/pug-test.html">Link</a>
<a href="https://example.com/">Another link</a>
<h1>Veille technologie pug </h1>

Install the htmlPugConverter on VSCode

Open the extension manager and find the htmlPugConvertor extension developed by waynehong. This extension is based on the html2pug and pug converters. Start the installation

install of pughtml on vscode

The extension allows

  • pug2html to convert Pug code to HTML.
  • html2pug to convert HTMl code to Pug code.

The conversion of the Pug or HTML is done by selecting the code beforehand then by calling the VSCode palette (CMD + Shift + P) then pug

convert with plugin


Pug is a powerful tool that makes coding faster. We have seen here that a tiny fraction of these possibilities. you will find more information on the official site of pug which includes other more interesting functionality such as the conditional, iteration or even case statement which is a shorthand for Java’s switch statement.




Ahmed Alidjinou


Laisser un commentaire