vanilla-render
v1.0.0-next.2
Published
A small library that renders html templates
Readme
Vanilla Render
This is a wrapper around Mustache.js that provides server-side rendering capabilities for Vanilla JS applications.
It's opinionated, pre-baked, mainly for express apps server side rendering that's as simple as possible, but doesn't use the default express.js templating system.
Usage (standalone)
White this package is mainly intended for express.js middleware usage, you can also use it standalone in any Node.js application.
Quick Reference
import { VanillaRender } from 'vanilla-render';
import { resolve } from 'node:path';
const renderer = new VanillaRender({
templates: [
{ name: 'home', absPath: resolve('./views/home.html') }
],
before: { name: 'before', absPath: resolve('./views/before.html') },
after: { name: 'after', absPath: resolve('./views/after.html') }
});
const html = renderer.render('home', { message: 'Hello World' });
console.log(html);For more detailed examples including partials, loops, and complex data structures, see the Usage (express) section below—the template syntax and configuration are identical, just without the Express middleware layer.
Usage (express)
Quick Reference
import express from 'express';
import { makeExpressMiddleware } from 'vanilla-render';
import { resolve } from 'node:path';
const app = express();
// Add the middleware with your template configuration
app.use(makeExpressMiddleware({
templates: [
{ name: 'home', absPath: resolve('./views/home.html') }
],
before: { name: 'before', absPath: resolve('./views/before.html') },
after: { name: 'after', absPath: resolve('./views/after.html') }
}));
// Now you can use res.ssr() in your routes
app.get('/', (req, res) => {
const html = res.ssr('home', { message: 'Hello World' });
res.send(html);
});
app.listen(3000);Detailed Example
Here's a more comprehensive example showing how to use templates, partials, and data with loops.
Template Files:
views/before.html - Wraps all content (opening HTML):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Site</title>
</head>
<body>views/after.html - Wraps all content (closing HTML):
</body>
</html>views/home.html - Main page template with loop and partial:
<main>
<h1>{{title}}</h1>
<section class="posts">
{{#posts}}
{{> post}}
{{/posts}}
</section>
</main>views/partials/post.html - Reusable post component:
<article class="post">
<h2>{{name}}</h2>
<p>{{description}}</p>
</article>Server Code:
import express from 'express';
import { makeExpressMiddleware } from 'vanilla-render';
import { resolve } from 'node:path';
const app = express();
// Configure templates, partials, before and after wrappers
const config = {
templates: [
{ name: 'home', absPath: resolve('./views/home.html') }
],
partials: [
{ name: 'post', absPath: resolve('./views/partials/post.html') }
],
before: { name: 'before', absPath: resolve('./views/before.html') },
after: { name: 'after', absPath: resolve('./views/after.html') }
};
// Add middleware - this injects res.ssr() into all responses
app.use(makeExpressMiddleware(config));
// Use res.ssr() in your routes to render templates
app.get('/', (req, res) => {
const html = res.ssr('home', {
title: 'Welcome',
posts: [
{ name: 'First Post', description: 'This is the first post' },
{ name: 'Second Post', description: 'This is the second post' },
{ name: 'Third Post', description: 'This is the third post' }
]
});
res.send(html);
});
app.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});How It Works:
- The
beforeandaftertemplates wrap all rendered content - The main template is rendered with your data
- Partials (like
post.html) can be included with{{> partialName}}syntax - Arrays are iterated with
{{#arrayName}}...{{/arrayName}}syntax - Variables are replaced with
{{variableName}}
Rendered Output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Site</title>
</head>
<body>
<main>
<h1>Welcome</h1>
<section class="posts">
<article class="post">
<h2>First Post</h2>
<p>This is the first post</p>
</article>
<article class="post">
<h2>Second Post</h2>
<p>This is the second post</p>
</article>
<article class="post">
<h2>Third Post</h2>
<p>This is the third post</p>
</article>
</section>
</main>
</body>
</html>Template Structure
The organization of your template files is entirely up to you. The library is agnostic to folder structure and naming conventions. You can organize your templates however makes sense for your project—whether that's a flat views/ directory, nested subfolders by page, or any other structure you prefer.