Skip to content
NoTemplate is not a template library.
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
src
LICENSE
README.md
index.html

README.md

NoTemplate.js

After working on html templating for ~10 years, I think the best template library is no template library.

NoTemplate.js provides only a single function element(). Use nested element() calls to build a DOM tree in pure JS in a concise and safe manner without any special syntax, compiler or preprocessor:

The first parameter is the element name.

Additional parameters build the content:

  • Strings are safely added as text nodes. No need to escape anything.
  • DOM Nodes (in particular elements) are added as child nodes.
  • Properties of nested plain objects are treated as
    • Attributes where the value is a string
    • Event handlers where the value is a function
    • For "style", the value can be an object, which is translated to style properties
    • For "class", the value can be an array
  • Arrays are automatically flattened to simplify building from fragments.
  • Null values are ignored to simplify handling conditional children

For components, create functions that return elements.

Simple Example

document.body.appendChild(
  element("p",
    "Hello ",
    element("a", {
        href: "#",
        click: event => alert("Hello")},
      "World")));

TodoMVC Implementation

  • Source Code (< 150 LOC; the view code starts around line 56)
  • Live Demo 
  • Should be one of the fastest loading readable / unobfuscated implementations: 

Developer Tools Network Tab

You can’t perform that action at this time.