General purpose javascript template engine inspired by Microsoft Razor templates.
A fast, easy to use, general purpose template view engine for nodejs.
npm install magnum
Magnum is a general purpose logic driven templating engine for nodejs developers. Magnum templates allow developers to easily script complex view logic with a javascript like syntax. Magnum focuses on being general purpose to enable developers can leverage it for code generation, html templates, xml or other niche template scenarios.
Inspired by Microsoft Razor
## exampleThe following is a quick example demonstrating rendering a template.
<html>
<head>
@section header
</head>
<body>
@section body
</body>
</html>
@import 'layout.html'
@section header {
<title>@(context.title)</html>
}
@section body {
<h1>Welcome</h1>
}
var magnum = require('magnum')
var context = { title: 'my page'}
var html = magnum.render('./view.html', context)
console.log(html)
<html>
<head>
<title>my page</html>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>
The following outlines magnums methods.
### compileThe compile() method compiles the template file and returns a template object.
var magnum = require('magnum')
var template = magnum.compile('./view.html') // store for later
//...later
var context = {title: 'my page'}
var html = template.render(context) // render
console.log(html)
To quickly compile and render a view, call the magnum.render() method.
var magnum = require('magnum')
var output = magnum.render('./view.html')
When calling render() on a template (or via magnum itself), you can optionally pass a data context object to be rendered. Magnum encapulates all data passed on the "context" object which is passed to magnum template on the render() method. Consider the following..
<p>Hi @(context.name)</p>
<ul>
@for(var i = 0; i < context.fruits.length; i++) {
<li>@(context.fruits[i])</li>
}
</ul>
var magnum = require('magnum')
var context = {name : 'dave',
fruits : ['apples',
'oranges',
'kiwifruit',
'mangos',
'grapes' ]}
var html = magnum.render('./template.html', context)
the context can be accessed in the following way...
## syntaxThe following syntax is available inside magnum templates.
### expressionsThe expression syntax allows a user to emit the value within. The following are examples.
@* strings *@
@('hello world')
@* numbers *@
@(123)
@* conditions: displays false) *@
@(10 > 20)
@* ternary: displays 'cat' *@
@(true ? 'cat' : 'dog')
@* variables *@
@(myvariable)
@* functions: displays 'hello world' *@
@{ var message = function() { return 'hello world' } }
@(message())
if statments are supported.
@if(expression) {
some content
}
@if(a > 10) {
some content
}
@(user.loggedin) {
<span>welcome</span>
}
the following for loops are supported.
@for(var i = i; i < 100; i++) {
@(i)
}
@for(var n in list) {
@(list[n])
}
code blocks can be useful for adding template side rendering logic.
@{
var message = 'hello'
}
@(message)
Mangum supports layouts and sections. This section describes how to use them.
Use the import statement to have one template inheriate from another. This will allow the child template to (optionally) override the sections of the parent.
layout.html will be the parent template, here we define three sections.. header, body and footer.
<html>
<head>
@section header
</head>
<body>
@section body
@section footer {
<span>copyright 2013</span>
}
</body>
</html>
Inside view.html, we inheriate from layout.html with the import keyword. Inside view.html, we define sections for header and body. Note that the default content for the footer not overridden. If the child template does not override a parents section, the parents section will be used instead.
@import 'layout.html'
@section header {
<title>@(context.title)</html>
}
@section body {
<h1>Welcome</h1>
}
Magnum templates allow the user to render snippets of content in place. The following renders a template named navigation.html in place.
<ul>
<li><a href='#'>home</a></li>
<li><a href='#'>about</a></li>
<li><a href='#'>contact</a></li>
</ul>
<html>
<head>
</head>
<body>
@render 'navigation.html'
@section content
</body>
</html>
var express = require('express')
var magnum = require('magnum')
//----------------------------------------------
// setup: create and apply render method
//----------------------------------------------
var app = express()
app.use(function (req, res, next) {
res.render = function (path, context) {
var output = magnum.render(path, context)
res.setHeader('Content-Type', 'text/html')
res.setHeader('Content-Length', Buffer.byteLength(output))
res.send(output)
}
next()
})
//----------------------------------------------
// render the template...
//----------------------------------------------
app.get('/', function(req, res) {
res.render('./index.html')
})
FAQs
General purpose javascript template engine inspired by Microsoft Razor templates.
We found that magnum demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."