Pug is a templating language that compiles to HTML. Parcel supports Pug automatically using the @parcel/transformer-pug plugin. When a .pug file is detected, it will be installed into your project automatically.

Pug is compiled to HTML and processed as described in the HTML docs.

Example usage

doctype html
link(rel="stylesheet", href="style.css")
h1 Hello Pug!
Pug is a terse and simple templating language with a
strong focus on performance and powerful features.

script(type="module", src="index.js")

Pug may be used as an entry to Parcel just like HTML:

parcel index.pug

Pug may also be referenced anywhere a URL is allowed, e.g. in an HTML file, or from a JS file. To inline the compiled HTML into a JavaScript file, use the bundle-text: scheme. See Bundle inlining for details.

import html from 'bundle-text:./index.pug';

document.body.innerHTML = html;



Pug can be configured using a .pugrc, .pugrc.js, .pugrc.mjs, .pugrc.cjs, pug.config.js, pug.config.mjs, or pug.config.cjs file. See the Pug API Reference for details on the available options.

Note: JavaScript-based configuration should be avoided when possible because it reduces the effectiveness of Parcel's caching. Use a JSON based configuration format (e.g. .pugrc) instead.



You can define a locals object in your Pug config, and this will be provided to your Pug templates when rendering.

h1 Hello, #{name}!
"locals": {
"name": "Puggy"