Get Advice Icon

Need advice about which tool to choose?Ask the StackShare community!

HAML
HAML

411
276
+ 1
262
Pug
Pug

875
647
+ 1
386
Add tool

HAML vs Pug: What are the differences?

What is HAML? HTML Abstraction Markup Language - A Markup Haiku. Haml is a markup language thatโ€™s used to cleanly and simply describe the HTML of any web document, without the use of inline code. Haml functions as a replacement for inline page templating systems such as PHP, ERB, and ASP. However, Haml avoids the need for explicitly coding HTML into the template, because it is actually an abstract description of the HTML, with some code to generate dynamic content.

What is Pug? Robust, elegant, feature rich template engine for nodejs. This project was formerly known as "Jade." Pug is a high performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers.

HAML can be classified as a tool in the "Languages" category, while Pug is grouped under "Templating Languages & Extensions".

"Clean and simple" is the top reason why over 66 developers like HAML, while over 118 developers mention "Elegant html" as the leading cause for choosing Pug.

HAML and Pug are both open source tools. It seems that Pug with 18.3K GitHub stars and 1.9K forks on GitHub has more adoption than HAML with 3.43K GitHub stars and 544 GitHub forks.

According to the StackShare community, Pug has a broader approval, being mentioned in 173 company stacks & 118 developers stacks; compared to HAML, which is listed in 113 company stacks and 40 developer stacks.

What is HAML?

Haml is a markup language thatโ€™s used to cleanly and simply describe the HTML of any web document, without the use of inline code. Haml functions as a replacement for inline page templating systems such as PHP, ERB, and ASP. However, Haml avoids the need for explicitly coding HTML into the template, because it is actually an abstract description of the HTML, with some code to generate dynamic content.

What is Pug?

This project was formerly known as "Jade." Pug is a high performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers.
Get Advice Icon

Need advice about which tool to choose?Ask the StackShare community!

Why do developers choose HAML?
Why do developers choose Pug?

Sign up to add, upvote and see more prosMake informed product decisions

    Be the first to leave a con
    What companies use HAML?
    What companies use Pug?

    Sign up to get full access to all the companiesMake informed product decisions

    What tools integrate with HAML?
    What tools integrate with Pug?
    What are some alternatives to HAML and Pug?
    Slim
    Slim is easy to use for both beginners and professionals. Slim favors cleanliness over terseness and common cases over edge cases. Its interface is simple, intuitive, and extensively documented โ€” both online and in the code itself.
    PHP
    Fast, flexible and pragmatic, PHP powers everything from your blog to the most popular websites in the world.
    JavaScript
    JavaScript is most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic,and supports object-oriented, imperative, and functional programming styles.
    Python
    Python is a general purpose programming language created by Guido Van Rossum. Python is most praised for its elegant syntax and readable code, if you are just beginning your programming career python suits you best.
    Java
    Java is a programming language and computing platform first released by Sun Microsystems in 1995. There are lots of applications and websites that will not work unless you have Java installed, and more are created every day. Java is fast, secure, and reliable. From laptops to datacenters, game consoles to scientific supercomputers, cell phones to the Internet, Java is everywhere!
    See all alternatives
    Decisions about HAML and Pug
    Russel Werner
    Russel Werner
    Lead Engineer at StackShare ยท | 11 upvotes ยท 104.1K views
    atStackShareStackShare
    Sass
    Sass
    HAML
    HAML
    React
    React
    Glamorous
    Glamorous
    JavaScript
    JavaScript
    Emotion
    Emotion
    #Inlinecss

    When we rebooted our front-end stack earlier this year, we wanted to have a consolidated and friendly developer experience. Up to that point we were using Sass and BEM. There was a mix of HAML views, React components and Angular. Since our ongoing development was going to be exclusively in React, we wanted to shift to an inline styling library so the "wall of classnames" could be eliminated. The ever-shifting landscape of inline CSS libraries for React is sometimes difficult to navigate.

    We decided to go with Glamorous for a few reasons:

    1) Previous team experience with this library 2) We can write our styles in plain JavaScript (which brings many benefits) 3) It supports server-side rendering 4) It has great composition patterns

    As you may or may not know, Glamorous has ceased active development and been mostly superseded by Emotion. We are planning to migrate to either Emotion or @styled-components in the near future, and I'll write another Stack Decision when we get there!

    #inlinecss

    See more
    Interest over time
    Reviews of HAML and Pug
    No reviews found
    How developers use HAML and Pug
    Avatar of StackShare
    StackShare uses HAMLHAML

    Personally, I really like HAML. Not having to use open and close tags is a huge time saver. As a result, writing markup with HAML is much more pleasant. HAML essentially forces you to be very strict about spacing, organization, and structure. It also makes the markup easier to read. Protip: I use this pretty frequently: htmltohaml.com

    Avatar of Romans Malinovskis
    Romans Malinovskis uses PugPug
    Avatar of Kalibrr
    Kalibrr uses PugPug

    We use Jade when writing HTML, which is much easier to read and maintain. We compile it to HTML before deploying it though, and don't use Jade's client-side rendering features.

    Avatar of Merge In
    Merge In uses PugPug

    We use Jade for constructing our modular UI. We also rely on Jade interpolation to pass reactive and static values from our Express server.

    Avatar of Seungkwon Park
    Seungkwon Park uses PugPug

    front-end ์ˆ˜์—… ๋•Œ ๋“ค์€ jade ์ž…๋‹ˆ๋‹ค. html์„ ํšจ๊ณผ์ ์œผ๋กœ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๊ณ 

    ๋กœ ์—ด๊ณ  ๋‹ซ์„๋•Œ ํ˜ผ๋ˆ์ด ์—†์–ด ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค. ํ˜„์žฌ ํ”„๋กœ์ ํŠธ์— gulp์™€ ํ•จ๊ป˜ ๋ถ™์ด๋ ค๋Š” ๊ณ„ํš์„ ๊ฐ–๊ณ  ์žˆ์ง€๋งŒ, ์•„์ง ์—ฐ์Šต์ด ๋” ํ•„์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐ๋ฉ๋‹ˆ๋‹ค.
    Avatar of Mathias Vonende
    Mathias Vonende uses PugPug

    Nice templating system, but lacks proper namespacing for non-html / xml data.

    How much does HAML cost?
    How much does Pug cost?
    Pricing unavailable
    Pricing unavailable
    News about HAML
    More news