848
615
+ 1
383

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.
Pug is a tool in the Templating Languages & Extensions category of a tech stack.
Pug is an open source tool with 18.5K GitHub stars and 1.9K GitHub forks. Here’s a link to Pug's open source repository on GitHub

Who uses Pug?

Companies
222 companies reportedly use Pug in their tech stacks, including Coursera, Sellsuki, and triGo GmbH.

Developers
584 developers on StackShare have stated that they use Pug.

Why developers like Pug?

Here’s a list of reasons why companies and developers use Pug
Pug Reviews

Here are some stack decisions, common use cases and reviews by companies and developers who chose Pug in their tech stack.

Dave Willenberg
Dave Willenberg
Founding Director at Detroit Technical English · | 7 upvotes · 5.6K views
atDetroit Technical EnglishDetroit Technical English
Node.js
Puppeteer
Stylus
Pug
HTML Templates: a Pain in the Backend

We chose Pug because writing raw HTML is about as enjoyable as a fart in a spacesuit, and writing decently-rendering HTML for enterprise email clients is a soul-sucking type of black magic.

Pug takes HTML as a (...markdown) language out of the stack by using a simple, sane syntax to represent HTML in just JavaScript©. Piecing together what you need from any number of standalone - including functional - components is both delightfully easy, and easy to maintain.

All you're really writing are exportable JavaScript functions that take a single Object parameter - once that concept takes hold, you'll quickly swear off angle brackets in favor of neatly indented and extensible e-mail, invoice, and reporting templates.

There's a jstransformer filter for instant interop with just about every preprocessor ( Stylus , in our case) and file format out there. Pass that compiled HTML though Juice on Node.js and bam - rugged HTML-emails that hold up in even the wonkiest Lotus Notes clients.

That the end result is 'just HTML' is the final cherry on top. Debugging needs only DevTools, and Puppeteer 's now all you need to create fancy-pants PDFs to your heart's content.

See more
Justin Dorfman
Justin Dorfman
Developer Evangelist at StackShare · | 3 upvotes · 13.1K views
atBootstrapCDNBootstrapCDN
Vim
Pug
ExpressJS
Node.js
Bootswatch
Amazon S3
#YAML

This is the third Stack Decision of this series. You can read the last one to catch up (link below).

Josh is a machine. He cranked out the rewrite of the site and as well as the Amazon S3 syncing/permissions/content-type scripts in less than a week (with a full time job + 2 small kids at the time). The new site had/has a section where you could try out all of the Bootswatch themes on our site and while it might sound silly, it showed me that he goes above and beyond and I totally lucked out.

Anyway, Josh decided to go with Node.js, ExpressJS, Jade (now called Pug), and configs with #yaml, all things I have read about but never used in production. I quickly found out Josh was a Vim user (still is), because every Jade file he worked on had //- vim: ft=jade sw=4 sts=4 et: at the bottom.

Everything was running smoothly, I was encouraged by David (co-founder from part 1) to take a vacation. I took him up on that. Unfortunately, my timing couldn’t have been worse. More on that in part 4.

AMA below 👇

See more
Ali Soueidan
Ali Soueidan
Creative Web Developer at Ali Soueidan · | 3 upvotes · 279 views
npm
Babel
PHP
Adobe Illustrator
Asana
ES6
GitHub
Git
JSON
Sass
Pug
JavaScript
vuex
Vue.js

Application and Data: Since my personal website is a SPA I've chosen to use Vue.js, as a framework to create it. After a short skeptical phase I immediately felt in love with the single file component concept! I also used vuex for state management, which makes working with several components, which are communicating with each other even more fun and convenient to use. Of course, using Vue requires using JavaScript as well, since it is the basis of it.

For markup and style, I used Pug and Sass, since they’re the perfect match to me. I love the clean and strict syntax of both of them and even more that their structure is almost similar. Also, both of them come with an expanded functionality such as mixins, loops and so on related to their “siblings” (HTML and CSS). Both of them require nesting and prevent untidy code, which can be a huge advantage when working in teams. I used JSON to store data (since the data quantity on my website is moderate) – JSON works also good in combo with Pug, using for loops, based on the JSON Objects for example.

To send my contact form I used PHP, since sending emails using PHP is still relatively convenient, simple and easy done.

DevOps: Of course, I used Git to do my version management (which I even do in smaller projects like my website just have an additional backup of my code). On top of that I used GitHub since it now supports private repository for free accounts (which I am using for my own). I use Babel to use ES6 functionality such as arrow functions and so on, and still don’t losing cross browser compatibility.

Side note: I used npm for package management. 🎉

*Business Tools: * I use Asana to organize my project. This is a big advantage to me, even if I work alone, since “private” projects can get interrupted for some time. By using Asana I still know (even after month of not touching a project) what I’ve done, on which task I was at last working on and what still is to do. Working in Teams (for enterprise I’d take on Jira instead) of course Asana is a Tool which I really love to use as well. All the graphics on my website are SVG which I have created with Adobe Illustrator and adjusted within the SVG code or by using JavaScript or CSS (SASS).

See more
Tim Joseph Dumol
Tim Joseph Dumol
Lead Software Architect at Kalibrr · | 1 upvotes · 2.5K views
atKalibrrKalibrr
Pug

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. Pug

See more
Robert Brown
Robert Brown
Co Founder at University of Cincinnati · | 1 upvotes · 2.3K views
atMerge InMerge In
Pug

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

See more

Pug Alternatives & Comparisons

What are some alternatives to Pug?
TypeScript
TypeScript is a language for application-scale JavaScript development. It's a typed superset of JavaScript that compiles to plain JavaScript.
Handlebars.js
Handlebars.js is an extension to the Mustache templating language created by Chris Wanstrath. Handlebars.js and Mustache are both logicless templating languages that keep the view and the code separated like we all know they should be.
Mustache
Mustache is a logic-less template syntax. It can be used for HTML, config files, source code - anything. It works by expanding tags in a template using values provided in a hash or object. We call it "logic-less" because there are no if statements, else clauses, or for loops. Instead there are only tags. Some tags are replaced with a value, some nothing, and others a series of values.
Hogan.js
Hogan.js is a 3.4k JS templating engine developed at Twitter. Use it as a part of your asset packager to compile templates ahead of time or include it in your browser to handle dynamic templates.
Smarty
Facilitating the separation of presentation (HTML/CSS) from application logic. This implies that PHP code is application logic, and is separated from the presentation
See all alternatives

Pug's Stats

Pug's Followers
615 developers follow Pug to keep up with related blogs and decisions.
Ali Soueidan
José Carlos Silva dos Reis Jr
lyoko17220
Nischhal Subba
VictorMW
helloitsm3
Camilo Núñez
Oliver George
Joaquin Gonzalez
MyoungHak Jeong