HTML Preprocessor

Learn via video course
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
Start Learning
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
Start Learning
Topics Covered


Over time, writing HTML and CSS can seem a little tedious, as many of the same tasks need to be repeated. For example, tasks like closing tags in HTML or repeatedly looking up hexadecimal color values in CSS. These disparate tasks, while typically small, add up to quite an inefficiency. Fortunately, these and a few other inefficiencies have been recognized, and preprocessor solutions have risen to the challenge, like indentation and no opening and closing tags, etc.


A preprocessor is a program that converts one data input form into another input data form. In the case of HTML and CSS, Haml and Sass are among the more popular preprocessor languages.

Note: Haml renders in HTML and Sass renders in CSS.

In trying to solve some of the most common problems, Haml and Sass found many additional ways to improve HTML and CSS, not only to eliminate inefficiencies but also to find ways to make website building easier and more logical. The popularity of preprocessors has also spawned various frameworks to support them, one of the most popular beings, Compass.

Here are some of the most used HTML preprocessors: -

  • Pug
  • Haml
  • Slim
  • Handlebars
  • Nunjucks

Let's discuss them in detail.


Pug (previously called Jade) is a preprocessor that simplifies the challenge of writing long HTML codes. It additionally provides a ton of functionality, which includes JavaScript objects, conditionals, loops, mixins, and templates.

Example: Let's look at the Syntax of Pug, which is not that different from HTML. It doesn't have opening and closing tags as well as it uses indentation for nesting HTML tags.


The example shows that the syntax is arguably a load purifier to examine. It could be an actual time-saver while running with quite a few variations in HTML (particularly frameworks that include Bootstrap, Foundation, etc.).


  • Clean Syntax - One of the distinguishing capabilities of Jade is its smooth syntax. Elements are created with CSS selector syntax, which makes the template constant together along with your fashion sheet and JavaScript detail selector library.
  • Reusability - you can reuse Jade templates in Scala, PHP, Ruby, Python, JavaScript, and Java.


  • The structure is decided through the indentation. That way, the indentation errors will destroy the result; frequently, it isn't easy to discover the error. Indentation errors are easily added through copy-pasting, by rearranging code, and through working in a group where every person doesn't use the identical indentation style. (E.g tabs vs. spaces.)


Haml, called HTML abstraction markup language, is a markup language with the single purpose of providing the capacity to write down beautiful markup. Serving as its very own markup language, code written in Haml is later processed to HTML.

Haml promotes DRY(Don't Repeat yourself, i.e., removing all the unnecessary repetition of code) and properly structured markup, supplying a pleasant experience for anybody having to write down or read it.

Let's understand a basic HAML code for the header:

In the following example, we will create a heading using HAML and also write the same code in HTML.

Now let's understand it with the HTML code and compare the difference.


From the above example, we can see that the readability of code is easy and the length of code in HAML is reduced syntactically than in HTML.


It is easy to learn as lots of resources are available online.


Haml makes use of indentation to outline structure instead of closing tags. Though this, in maximum cases, makes code extra efficient to write, it can sometimes cause problems. Bringing changes to one area can cause an error or alter the structure of the code. The rendering time with Haml is slower than its competitors.


Slim is a template language whose purpose is to lessen the view syntax to the critical components without turning it into cryptic. It commenced as an exercise to peer how a lot can be eliminated from a standard HTML template (<, >, remaining tags, etc...).

Here is the syntax of how Slim works.

From the above example, we can see that there are no opening or closing tags used.


  • The Slim syntax doesn't require many unique symbols, making it tough to read. Instead, it's very easy and readable syntax even for humans who haven't worked on it before.
  • Slim's documentation is properly prepared and detailed, each idea is very well defined, and it's highly beneficial for each customer, even for those who are beginners.
  • Slim is minimal, and that may be an issue in case you need to begin from there. It can be smoothly extended or even help famous programs which are used in Laravel (like IlluminateDatabase (eloquent)).
  • Allows to quickly create the code, available for a mess around or trying out. Especially useful if you don't have an auto-complete or auto-close plugin.


Slim's use of indentation in its syntax and the reality that it would not use any HTML tags could make it appear a bit odd to designers, who are no longer used to this type of syntax.


Handlebars offer the power essential to allow you to construct semantic templates efficaciously without frustration.

Handlebars generally look like as shown in the following syntax:

We use{{where some content is added in between}}.

Let's add name and age in these double curly brackets. The following defines two handlebar expressions: name and age.

Handlebars are largely suited for Mustache templates. In maximum cases, it's far viable to change out Mustache with Handlebars and maintain the use of your new templates.


  • By layout logic-less templates pressure you to split worries, consequently assisting you to keep away from destiny issues with refactoring. It additionally permits templates for use with more than one programming language without changes.
  • Handlebars is to be had as a JavaScript library, a Django module in addition to Java, Ruby, Scala & PHP libraries. This means that you could use it for frontend and backend templates in the language of your choice.


Handlebars don't seem to have many text editors that support things like auto-complete, syntax highlighting, or error checking for it.


Another {{token-based system}} with all the logic, looping, and variable manipulation that different engines provide. But similarly, it helps a few extra superior web page composition factors, e.g. block inheritance, includes, format inheritance, custom tags, and macros — all genuinely best for a CMS( Content Management System) in which pages are normally composed of a chain of “building blocks”.

Here is the template for Nunjunks.

From the above template, we see that nunjunks have both opening and closing tags that are block and end blocks.


  • Async support
  • Extensive format inheritance
  • Macros support
  • Plain vintage college includes
  • Filters support
  • White area control
  • Operating on undeniable HTML, no large white area
  • Could be used for matters aside from HTML, e.g., config files, JSON.
  • Custom tags support


No streaming support

Comparing HTML Preprocessor Features

Let's check what features these HTML preprocessors support.

  • ✅ - Support
  • ❌ - Doesn't Support.
  • ⚠️ - It supports but have certain issues.
TemplatingIncludesLocal VariablesLoopsLogicFiltersMathSlotsHTML Special Syntax
Pug lets you use other languages) within Pug.
(Specific for whitespace removal)
If we can access ruby code and write custom helpers, we can do it.
It is a part of private API.
Only when we register a partial ahead of time.

Pros and Cons of using HTML preprocessors

Let's understand the advantages and disadvantages of using preprocessors.


  • Makes our code looks cleaner and makes them easy for the programmer to read and understand the code.
  • The code is well indented, which improves the appearance of the code.
  • Preprocessors generally use DRY, i.e., Don't Repeat Yourself, where the code is not repeated again and again.


  • There are very few text editors that support preprocessors. So, it is not used prominently.
  • Indentation destroys the results due to errors. These errors generally occur due to copy-pasting the code.


  • HTML preprocessor defines the conversion of one data type to another data type.
  • Most used HTML preprocessors are Haml, Slim, Pug, Handlebars, Nunjacks.
  • Haml functions as the replacement for templating systems such as PHP.
  • Pug provides functionalities, which include JavaScript objects, conditionals, loops, mixins, and templates.
  • Slim tries to lessen the view syntax to the critical components without turning them into cryptic formats.
  • Handlebars provide the power essential to construct semantic templates efficaciously without frustration.
  • Nunjucks makes it easy to collaborate on the templates and implement complex features such as localization.