Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

//- views/layout.pug
//- doctype html
//- html(lang='en')
//-   head
//-     meta(charset='UTF-8')
//-     title= title + ' | ' + appName
//-     block styles
//-   body
//-     include partials/nav
//-     main.container
//-       block content
//-     include partials/footer
//-     block scripts

//- views/home.pug
//- extends layout
//- block content
//-   h1 Welcome, #{user.name}!
//-   +card('Latest News', 'Check out our updates.')

//- views/mixins.pug
//- mixin card(title, body)
//-   article.card
//-     h2= title
//-     p= body

// Express setup
const express = require('express');
const path    = require('path');
const app     = express();

app.set('view engine', 'pug');
app.set('views', path.join(__dirname, 'views'));

// Enable view cache in production
if (process.env.NODE_ENV === 'production') {
    app.set('view cache', true);
}

app.use((req, res, next) => {
    res.locals.appName = 'PugDemo';
    next();
});

app.get('/', (req, res) => {
    res.render('home', {
        title: 'Home',
        user:  { name: 'Alice', role: 'admin' },
    });
});

app.listen(3000);