How to create Lists in Pug View Engine ?
Last Updated :
24 Apr, 2025
Pug is a template engine for NodeJS and browsers to render dynamic reusable content. At compile time, the template engine compiles our Pug template code to HTML. Pug has many powerful features like conditions, loops, includes, and mixins using which we can render HTML code based on user input or reference data.
Pug also supports JavaScript natively, hence using JavaScript expressions, we can format HTML code. This approach allows us to reuse static web pages which have dynamic data. Angular brackets are not used while specifying the tags.
Lists in Pug:
A list is a record of short pieces of related information used to display the data or any information on web pages in the ordered or unordered form. In ordered form, list elements are represented using some order; in unordered form, they are represented using a disk, square, or circle. While using the nested list in Pug, we need to consider the indentation to properly display list items.
Syntax for unordered list:
ul
li element
li element
Syntax for an ordered list:
ol
li element
li element
Syntax for the description list:
dl
dt Title of description
dd Description about the Title.
Approach to Create Pug Lists:
- Setting Up ExpressJS: The code initializes an Express.js server.
- Setting View Engine: It sets Pug as the view engine for rendering templates.
- Routing: There's a single route defined for the root URL (
/). When a user accesses this URL, it renders the list Pug template. - Pug Template: The Pug template defines the structure and styling of the HTML page. It consists of ordered and unordered lists with different list item styles (disc, circle, square) and types (numeric, alphabetical, roman numerals).
- Styling: The styling is done using CSS embedded within the Pug template (
style.). It sets styles for the body, headings, containers, and list items.
Steps to Create Pug List Applicaiton:
Step 1: Create a NodeJS Application using the following command:
npm init -y
Step 2: Install required dependencies using the following command:
npm i pug express
Step 3: Create a views folder that contains the list.pug file.
Folder Structure:
Project structureThe updated dependencies in package.json file will look like:
"dependencies": {
"express": "^4.18.2",
"pug": "^3.0.2"
}
Example: Below is an example of Pug list.
HTML
doctype html
html
head
title GeeksforGeeks Pug
style.
body {
text-align: center;
}
h1 {
color: green;
}
.container {
margin :2rem;
padding :1rem;
display: flex;
justify-content: space-between;
background-color: #44ff88;
text-align: center;
border-radius: 10%;
}
.ordered-list,
.unordered-list {
flex: 1;
}
ol, ul {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
li.disc {
color: rgb(235, 152, 52);
list-style-type: disc;
}
li.circle {
color: rgb(69, 39, 145);
list-style-type: circle;
}
li.square {
color: #befall;
list-style-type: square;
}
body
h1 Welcome to GeeksforGeeks
div.container
div.ordered-list
h4 Ordered List in Pug
ol(type='1')
li HTML : 5
li Javascript
ol(type='A')
li HTML : 5
li Javascript
ol(type='a')
li HTML : 5
li Javascript
ol(type='I')
li HTML : 5
li Javascript
ol(type='i')
li HTML : 5
li Javascript
div.unordered-list
h4 Unordered List in Pug
ul
li(class="disc") HTML : 5
li(class="disc") Javascript
ul
li(class="circle") HTML : 5
li(class="circle") Javascript
ul
li(class="square") HTML : 5
li(class="square") Javascript
//app.js
const express=require('express');
const app=express();
const port=3000;
app.set('view engine','pug');
app.get('/',(req,res)=>{
res.render('list');
});
app.listen(port,()=>{
console.log(`server is running at http://localhost:${port}`);
});
Output:
Example 2: Illustration of the Lists in PugJS.
HTML
doctype html
html
head
title GeeksforGeeks Pug
style.
body {
text-align: center;
}
h1 {
color: green;
}
.container {
margin :2rem;
padding :1rem;
display: flex;
justify-content: space-between;
background-color: #44ff88;
text-align: center;
border-radius: 10%;
}
.ordered-list,
.unordered-list {
flex: 1;
}
ol, ul {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
li.disc {
color: rgb(235, 152, 52);
list-style-type: disc;
}
li.circle {
color: rgb(69, 39, 145);
list-style-type: circle;
}
li.square {
color: #befall;
list-style-type: square;
}
body
h1 Welcome to GeeksforGeeks
div.container
div.ordered-list
h4 Ordered List in Pug
ol(type='1')
li HTML : 5
li Javascript
ol(type='A')
li HTML : 5
li Javascript
ol(type='a')
li HTML : 5
li Javascript
ol(type='I')
li HTML : 5
li Javascript
ol(type='i')
li HTML : 5
li Javascript
div.unordered-list
h4 Unordered List in Pug
ul
li(class="disc") HTML : 5
li(class="disc") Javascript
ul
li(class="circle") HTML : 5
li(class="circle") Javascript
ul
li(class="square") HTML : 5
li(class="square") Javascript
//app.js
const express=require('express');
const app=express();
const port=3000;
app.set('view engine','pug');
app.get('/',(req,res)=>{
res.render('list');
});
app.listen(port,()=>{
console.log(`server is running at http://localhost:${port}`);
});
Output:
Nested List in Pug
Similar Reads
How to create Tables in Pug View Engine ?
Pug is a template engine for NodeJS and browsers, enabling dynamic content rendering. It compiles templates to HTML, supports JavaScript expressions for formatting, and facilitates the reuse of static pages with dynamic data. Its indentation-based syntax simplifies tag specification, enhancing reada
3 min read
How to Create View in SQLite
SQLite is a self-contained, serverless, and open-source relational database management system. It is used for simplicity, efficiency, and portability, SQLite is widely employed in diverse applications, from embedded systems to mobile devices and large-scale software. It is serverless, zero-configura
6 min read
Plain Text in Pug View Engine
Plain text in Pug can be retrieved via a variety of methods, each with its own syntax and advantages. This article will go over many strategies for achieving plain text output in Pug, outlining each approach step by step. We'll also include examples, installation instructions for required modules, p
2 min read
Doctype in Pug View Engine
In web development, the term "doctype" stands for Document Type Declaration. It's a key part, of defining the document type and telling the browser how to use it. In Pug, a template engine used with NodeJS, knowing the doctype helps create good HTML codeÂ. Table of Content Syntax of multiple D
4 min read
Comments in Pug View Engine
Pug is a template engine for NodeJS and browsers to render dynamic reusable content. At compile time, the template engine compiles our Pug template code to HTML. Pug has many powerful features like conditions, loops, includes, etc. using which we can render HTML code based on user input or reference
3 min read
Tags in Pug View Engine
Tags play a crucial role in Pug templates, allowing developers to create structured and dynamic HTML content. Let's explore the concept of tags in Pug in detail. Table of Content What are Tags in Pug?Tag AttributesClass and ID AttributesSelf-Closing TagsBlock ExpansionDynamic Tag NamesSteps to Setup
4 min read
How to add pug engine in Express.js ?
Express is a small framework that sits on top of Node.js web server functionality to simplify its APIs and add helpful new features. It makes it easier to organize your application’s functionality with middleware and routing; it adds helpful utilities to Node.js’s HTTP objects; it facilitates the re
2 min read
Elements in Pug View Engine
Pug is a template engine that works with JavaScript libraries and frameworks. It simplifies the process of writing HTML by reducing traditional HTML syntax. It uses indentation to represent HTML structure. By using Pug you can reuse the HTML code. In this article, we will learn about Pug Elements wi
3 min read
Headings in Pug View Engine
Pug.js is a template engine for Node.js and browsers to render dynamic reusable content. At compile time, the template engine compiles our Pug template code to HTML. Pug has many powerful features like conditions, loops, includes, and mixins using which we can render HTML code based on user input or
2 min read
Filters in Pug View Engine
Pug is a template engine that can be used to create HTML documents. It's used to write templates that are then compiled into functions that take in data and render HTML documents. We will discuss the different types of Filters in Pug Template and their Approaches: Table of Content 1. :markdown:2. :j
4 min read