Parag.js is a fast and lightweight template engine for nodejs with zero dependencies. It offers you tags that make interpolating javascript into your HTML
look clean and readable, even with nested conditionals and loops.
npm install parag
Below is an example of how to use parag
const Parag = require('parag');
const data = {
title: 'The matrix',
year: '1999',
};
const result = Parag.render('<p>{{title}} was released in {{year}}</p>', data);
console.log(result); // => <p>The matrix was released in 1999</p>
Same code with typescript
import * as Parag from 'parag';
const data: Record<string, string> = {
title: 'The matrix',
year: '1999',
};
const result: string = Parag.render('<p>{{title}} was released in {{year}}</p>', data);
console.log(result); // => <p>The matrix was released in 1999</p>
We recommend that you use the renderFile
function as it is cached on first render.
const Parag = require('parag');
const user = {
name: 'Void',
};
const result = Parag.renderFile('./example/hello.parag', user);
console.log(result); // => <p>Hello Void</p>
const express = require('express');
const app = express();
const port = 3000;
app.set('views', './view');
app.set('view engine', 'parag');
app.get('/', (req, res) => {
res.render('hello', { name: 'void' });
});
app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
});
- Go to Code > Preferences > Settings
- Search "File associations"
- Click on "Add Item"
- Add (
*.parag
) as extension(item) andhtml
as associated language(value).
All results are escaped by default.
<p>Hello {{name}}</p>
If it's javascript, parag will interpolate the result.
<div>
<p>{{["rice", "beans"].join(",")}}</p>
<p>{{new Date()}}</p>
</div>
You can also render unescaped results
<div>{{! article.body !}}</div>
Simple if statement
@if(user)
<p>{{user.name}}</p>
@endif
if, else if and else chain.
@if(user.age > 21)
<p>Proper adult</p>
@elseif(user.age > 18 && user.age < 21)
<p>Early adult</p>
@else
<p>Kid</p>
@endif
- For..of loop statement
<ul>
@for(let user of users)
<li>{{user.name}}</li>
@endfor
</ul>
- For...in loop statement
<ul>
@for(let prop in user)
<li>{{user[prop]}}</li>
@endfor
</ul>
- for loop statement
<ul>
@for(let i = 0; i < 5; i++)
<li>{{ "count: " + i }}</li>
@endfor
</ul>
Comments are not included in rendered result
{# This is a comment #}
You can render partials in your template with the @include
tag.
@include("partials/header")
A partial inherits all data properties of its parent template. You can also pass extra data to partials with an object.
@include("partials/footer", {year: "2022"})
For libraries that conflict with this template engine, you can use the @
symbol to render content as is.
const result = Parag.render('<p>Count: @{{ count }}</p>');
console.log(result); // <p> Count: {{ count }} </p>
This project is licensed under the MIT license. See the LICENSE file for more info.