Dot.js

Description #

Dot.js (DoT) is a fast and small JavaScript templating engine designed for high-performance rendering of dynamic content in browsers and Node.js environments.

History #

Dot.js was created by Laura Doktorova in 2011 to provide a minimalistic yet powerful alternative to heavier templating engines like Mustache and Handlebars. Its focus is on speed and logic-capable templates for client-side and server-side rendering.

Hello World Code #

<script type="text/template" id="template">
  <h1>Hello, {{=it.name}}!</h1>
</script>

<script>
  var template = document.getElementById('template').innerHTML;
  var compiled = doT.template(template);
  document.body.innerHTML = compiled({ name: "World" });
</script>

How to Run #

Option 1: Online
Try in-browser at https://dotjs.io/playground (or similar sandboxing platforms)

Option 2: Local
Install with npm:

npm install dot

Node.js Example:

const doT = require("dot");
const template = doT.template("Hello, {{=it.name}}!");
console.log(template({ name: "World" }));

Key Concepts #

• Uses {{= }} for variable interpolation
• Logic-supporting ({{ if (...) }}, {{ for (...) }})
• Extremely fast and lightweight
• No dependency on DOM or framework
• Customizable delimiters
• Precompilable for performance
• Suitable for SSR and client-side
• Useful in dynamic UIs and micro frontends
• MIT licensed and open source
• Works well in bundlers and CI pipelines

Try It Online #

https://dotjs.io/playground (or try locally in JSFiddle/CodePen)

Fun Facts #

• “DoT” stands for “Dependent-less template engine”.
• Often used in performance-critical applications due to its rendering speed.
• Supports function-based templates for better caching and speed optimization.

Resources #

Official site
Docs or tutorial
GitHub or interpreter
Community or learning resources