Teensy (~5kb), fast (<30ms), testable UI DSL written in (and for) JavaScript everywhere it runs.
JavaScript Makefile Shell
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
Makefile Updated to node version 8.1.2 Jun 15, 2017
express.js Fixed express implementation Dec 20, 2016
index.js Moved module-global state into config.js where we can more clearly Apr 19, 2017
webpack-server.config.js Moving away from ES6 imports to simplify and speed up node servers Dec 19, 2016



(pronounced, Gnome-plate)

Nomplate is a microscopic (< 5kb), insanely fast (<30ms to interaction) client and server side template engine and component system that makes it dead simple to create, compose, test and deploy visual components using Plain Old JavaScript wherever it runs.

Gnome Plate

What does it look like?


const dom = require('nomplate').dom;

const keysPressed = [];

// Define the render function.
function keyPresses() {

  // Return a nomplate element with zero or more children.
  return dom.div((update) => {
    function onKeyUp(event) {
      console.log('onKeyUp with:', event.keyCode);
      // Schedule a re-render from the outer div in.

    dom.input({type: 'text', onkeyup: onKeyUp});
    dom.ul({className: 'my-list'}, () => {
      keysPressed.forEach((keyCode) => {

module.exports = keyPresses;

Every HTML node name is available on the dom object as a method (e.g., div, span, li, ul, section, header, footer, etc.).

The method signature can accept attributes, text content or a handler that itself calls more methods on dom. These arguments are optional, starting on the left in order to make callers more succinct.

If nested handlers declare a parameter, they will be sent a method that, when called will schedule a re-render of the associated component and it's children.

// Attributes and children
dom.div({className: 'abcd'}, () => {
  // Just text content
  dom.div('Some Text Content');
  // Just attributes
  dom.div({className: 'fake-attr'});
  // Just children
  dom.div((update) => {
    dom.span('Now: ' + Date.now());
    // Re-render every second
    setTimeout(update, 1000);

Configure your Express server:

const express = require('express');
// NOTE: nomplate/express is required independently in order to avoid
// polluting the client binary with functionality that is only relevant
// on the server.
const nomplateExpress = require('nomplate/express');

const app = express();

// Configure static files from dist
app.use('/static', express.static('dist'));

// Configure Nomplate
app.engine('.js', nomplateExpress);
app.set('view engine', 'js');
// Configure the default layout (/views/main.js)
app.set('view options', {layout: 'main', pretty: process.env.NODE_ENV !== 'production'});
app.set('views', path.resolve(__dirname + '/views'));

// Create a route and return a named template at /views/app.js
app.get('/', (req, res) => {

app.listen(8080, () => {
  console.log('Listening on localhost:8080');

The /views/main.js layout:

const dom = require('nomplate').dom;

function main(options, renderView) {
  return dom.html({lang: 'en'}, () => {
    dom.head(() => {
      dom.meta({charset: 'utf8'});
      dom.title('Nomplate Test');
      dom.link({rel: 'stylesheet', href: 'static/some-styles.css'});
      dom.script({src: '/static/some-bundle.js', type: 'text/javascript'});
    dom.body(() => {
      // This call will render the selected view.

module.exports = main;

The /views/app.js template

const dom = require('nomplate').dom;

function app(options) {
  return dom.section({id: 'my-app'});

module.exports = app;

Configure the client

const keyPresses = require('./src/key_presses');
const ready = require('nomplate').ready;
const renderElement = require('nomplate').renderElement;

// Elements can be created immediately (i.e., before the entire page loads).
const element = renderElement(keyPresses(), document);

ready(document, () => {
  // Wait for page load before attaching elements:
  const parent = document.getElementById('my-app');


Here's an early prototype of the famous TODOMVC application implemented as a fully client side Nomplate application.

Here are some highlights:

  • 6kb minified and gzipped for the entire library AND application
  • < 80ms time to fully rendered and interactive application
  • Fully unit tested with tests that finish in around 100ms
  • Components are composable and easily comprehensible


The build system is only proven to work on Linux and OS X, though it may work on Windows if your path and Node are configured properly.

mkdir nomplate
cd nomplate
git clone https://github.com/lukebayes/nomplate.git .
source setup-env.sh
make dev-install
# Wait for node and npm modules to be installed
source setup-env.sh # Yeah, do it again...
make test

Watch files for changes and run tests on change:

make test-w

Lint all files:

make lint

Build a distributable library into "dist" folder:

make build

Remove all artifacts

make clean