[
](https://travis-ci
.org/gethuman/jeff.js)
Jeff.js is a concise, lightweight JSON-based templating engine for HTML (or XML for that matter). Because it is JSON-based, there is no extra parser/lexer needed for either a JavaScript-based server (like Node), or the browser. With its extensive shorthand, small amounts of code expand to large pieces of HTML. Its plugin system allows you to leverage plugins that others have written that reduce large, common pieces of markup to a few characters of code.
Installing Jeff.js is simple. Download the package from the official site and add it to your web pages.
Alternatively, you can install it as a node module into your project like you would any other node module.
Once you've written a template, use the Jeff.compile method to compile
the template into a function. The generated function takes a context
argument, which will be used to render the template.
Here's an example that leverages some of Jeff's shorthand:
{
html: {
head: {
title: "Jeff demo",
"meta[charset=utf8]": null
},
body: {
"div#myID.jumbotron.anotherClz": "Welcome " + user.first + " to the Jeff.js demo",
h1: "Jeff is",
ol: {
"li.bullet": [
"Concise",
"All JavaScript (well JSON...)",
(10 * 7 + 4) + " more awesome things we don't have time to point out"
]
},
p: "Look how quickly I can make a list of things render in pretty fashion!",
div: Jeff.each(items, "{ \"img[src=/images/icon.png]\": N, p: it.name, small: it.caption }")
}
}
}
Could be used like this (in node):
var fs = require('fs');
fs.readFile('/test/theAboveFile.json', 'utf8', function (err, contents) {
if ( !err ) {
var template = Jeff.compile(contents);
var model = { user: { first: "Christian", last: "A." }, items: [
{ name: "example 1", caption: "look at example 1!" }, { name: "ex. 2", caption: "and example 2!" } ] };
var result = template(model);
}
});
And would render the following:
<!DOCTYPE html>
<html>
<head>
<title>Jeff demo</title>
<meta charset="utf8"/>
</head>
<body>
<div id="myID" class="jumbotron anotherClz">Welcome Christian to the Jeff.js demo</div>
<h1>Jeff is</h1>
<ol>
<li class="bullet">Concise</li>
<li class="bullet">All JavaScript (well JSON...)</li>
<li class="bullet">74 more awesome things we don't have time to point out</li>
</ol>
<p>Look how quickly I can make a list of things render in pretty fashion!</p>
<div>
<img src="/images/icon.png"/>
<p>1 min ago</p>
<small>This is an awesome tweet!</small>
</div>
<div>
<img src="/images/icon.png"/>
<p>3 mins ago</p>
<small>Something happened!</small>
</div>
<div>
<img src="/images/icon.png"/>
<p>7 mins ago</p>
<small>a long, long time ago...</small>
</div>
</body>
</html>
You can register plugins that add to the default functionality of Jeff with ease.
Here is a snippet of a Jeff json template:
{
div: bootstrapNav.navPills(["Home", "About", "Feedback"], "About");
}
Here is my sample jeff-bootstrap-nav.js plugin, so I don't have to remember exactly how to structure my bootstrap navigation bars:
{
navPills: function(items, activeItem) {
var ret = { "ul.nav.nav-pills": { li: [] } };
for( var i = 0, len = items.length, r = ret["ul.nav.nav-pills"]["li"]; i < len; ++i ) {
if ( items[i] === activeItem ) r.push({ attributes: { class: "active" }, text: items[i]});
else r.push(items[i]);
}
return ret;
}
}
Would be registered and used like this:
var jeff = require("jeff");
var fs = require('fs');
Jeff.registerPlugin("bootstrapNav", "/plugins/jeff-bootstrap-nav.js");
fs.readFile('/test/theAboveFile.json', 'utf8', function (err, contents) {
if ( !err ) {
var template = Jeff.compile(contents);
var result = template(model);
}
});
And would render this:
<ul class="nav nav-pills">
<li>Home</li>
<li class="active">About</li>
<li>Feedback</li>
</ul>
Jeff treats all input like a partial, so no need to specify that something is "partial", just include it like you would any other Jeff templating.
Jeff is based in Javascript (JSON), so comments work exactly as they do in Javascript
Jeff has been designed to work in any ECMAScript 3 environment. This includes
Older versions and other runtimes are likely to work but have not been formally tested.
At the time, Jeff does not separate the compile and render steps for its templates. Despite this, Jeff often outperforms other templating engines and has a smaller footprint because most of its compiling and rendering depends on the speed of the JavaScript engine processing it. And generally, those engines are getting faster and better by the minute.
To build Jeff, just run grunt build, and the build will output to the dist directory.
See release-notes.md for upgrade notes, of which there aren't any yet. :)
Have a project using Jeff? Send us a pull request!
Jeff.js is released under the MIT license.
FAQs
JSON-based HTML templating engine
The npm package jeff-core receives a total of 11 weekly downloads. As such, jeff-core popularity was classified as not popular.
We found that jeff-core demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers 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
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.