or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

auto-processing.mdcli-tools.mdhtml-encoding.mdindex.mdtemplate-compilation.mdtemplate-syntax.md
tile.json

template-syntax.mddocs/

Template Syntax

Complete template syntax supporting interpolation, encoding, conditionals, iteration, partials, and custom delimiters with configurable patterns and behaviors.

Capabilities

Variable Interpolation

Output variable values directly into templates with automatic type conversion.

// Syntax: {{=variable}}
// Default pattern: /\{\{=([\s\S]+?)\}\}/g

Usage Examples:

const doT = require("dot");

// Basic interpolation
const template = doT.template("Hello {{=it.name}}!");
const result = template({ name: "World" });
// Output: "Hello World!"

// Expression interpolation
const mathTemplate = doT.template("Result: {{=it.a + it.b}}");
const mathResult = mathTemplate({ a: 5, b: 3 });
// Output: "Result: 8"

// Object property access
const objTemplate = doT.template("{{=it.user.profile.name}}");
const objResult = objTemplate({
  user: { profile: { name: "Alice" } }
});
// Output: "Alice"

HTML-Encoded Output

Output variables with automatic HTML encoding for secure rendering.

// Syntax: {{!variable}}
// Default pattern: /\{\{!([\s\S]+?)\}\}/g
// Encodes: & < > " ' /

Usage Examples:

const doT = require("dot");

// HTML encoding
const template = doT.template("Content: {{!it.html}}");
const result = template({ html: "<script>alert('xss')</script>" });
// Output: "Content: &#60;script&#62;alert(&#39;xss&#39;)&#60;&#47;script&#62;"

// Encoding with special characters
const specialTemplate = doT.template("Message: {{!it.message}}");
const specialResult = specialTemplate({ 
  message: "Tom & Jerry's \"great\" adventure" 
});
// Output: "Message: Tom &#38; Jerry&#39;s &#34;great&#34; adventure"

JavaScript Code Evaluation

Execute JavaScript code blocks within templates for complex logic.

// Syntax: {{code}}
// Default pattern: /\{\{([\s\S]+?(\}?)+)\}\}/g

Usage Examples:

const doT = require("dot");

// Variable assignment
const template = doT.template(`
{{it.total = 0;}}
{{~it.items:item}}
  {{it.total += item.price;}}
{{~}}
Total: {{=it.total}}
`);

const result = template({
  items: [
    { price: 10 },
    { price: 20 },
    { price: 15 }
  ]
});
// Output: "Total: 45"

// Conditional logic
const condTemplate = doT.template(`
{{ var message = it.score >= 90 ? "Excellent" : it.score >= 70 ? "Good" : "Needs improvement"; }}
Score: {{=it.score}} - {{=message}}
`);

const condResult = condTemplate({ score: 85 });
// Output: "Score: 85 - Good"

Conditional Blocks

Create conditional content sections with if/else logic.

// Simple conditional: {{?condition}}content{{?}}
// Conditional with else: {{?condition}}if-content{{??}}else-content{{?}}
// Default pattern: /\{\{\?(\?)?\s*([\s\S]*?)\s*\}\}/g

Usage Examples:

const doT = require("dot");

// Simple conditional
const template = doT.template(`
{{?it.user}}
  Welcome back, {{=it.user.name}}!
{{?}}
`);

const result = template({ user: { name: "Alice" } });
// Output: "Welcome back, Alice!"

// Conditional with else
const elseTemplate = doT.template(`
{{?it.isLoggedIn}}
  Dashboard content
{{??}}
  Please log in to continue
{{?}}
`);

const elseResult1 = elseTemplate({ isLoggedIn: true });
// Output: "Dashboard content"

const elseResult2 = elseTemplate({ isLoggedIn: false });
// Output: "Please log in to continue"

// Nested conditionals
const nestedTemplate = doT.template(`
{{?it.user}}
  {{?it.user.isAdmin}}
    Admin Panel
  {{??}}
    {{?it.user.isPremium}}
      Premium Features
    {{??}}
      Basic Features
    {{?}}
  {{?}}
{{?}}
`);

Array Iteration

Loop through arrays with access to item values and indices.

// Syntax: {{~array:value:index}}content{{~}}
// Default pattern: /\{\{~\s*(?:\}\}|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\}\})/g

Usage Examples:

const doT = require("dot");

// Basic iteration
const template = doT.template(`
<ul>
{{~it.items:item}}
  <li>{{=item}}</li>
{{~}}
</ul>
`);

const result = template({ items: ["Apple", "Banana", "Cherry"] });
// Output: "<ul><li>Apple</li><li>Banana</li><li>Cherry</li></ul>"

// Iteration with index
const indexTemplate = doT.template(`
{{~it.users:user:index}}
  {{=index + 1}}. {{=user.name}} ({{=user.email}})
{{~}}
`);

const indexResult = indexTemplate({
  users: [
    { name: "Alice", email: "alice@example.com" },
    { name: "Bob", email: "bob@example.com" }
  ]
});
// Output: "1. Alice (alice@example.com) 2. Bob (bob@example.com)"

// Nested iteration
const nestedTemplate = doT.template(`
{{~it.categories:category}}
  <h3>{{=category.name}}</h3>
  {{~category.items:item}}
    <p>{{=item.title}}</p>
  {{~}}
{{~}}
`);

Template Definitions and Partials

Define reusable template parts and include them with optional parameters.

// Definition syntax: {{##def.name:parameter:content#}}
// Include syntax: {{#def.name}} or {{#def.name:parameter}}
// Default patterns:
// define: /\{\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}\}/g
// use: /\{\{#([\s\S]+?)\}\}/g

Usage Examples:

const doT = require("dot");

// Inline definitions
const template = doT.template(`
{{##def.header:
  <header><h1>{{=it.title}}</h1></header>
#}}

{{##def.card:item:
  <div class="card">
    <h3>{{=item.name}}</h3>
    <p>{{=item.description}}</p>
  </div>
#}}

{{#def.header}}
{{~it.products:product}}
  {{#def.card:product}}
{{~}}
`);

const result = template({
  title: "Product Catalog",
  products: [
    { name: "Laptop", description: "High-performance laptop" },
    { name: "Mouse", description: "Wireless mouse" }
  ]
});

// External definitions (loaded via doT.process)
const templates = doT.process({ path: "./views" });
// Uses .def files automatically as definitions

Custom Delimiters

Configure custom template delimiters and patterns for different syntax preferences.

// Configurable via templateSettings object
const customSettings = {
  evaluate: RegExp,     // Code evaluation pattern
  interpolate: RegExp,  // Variable interpolation pattern
  encode: RegExp,       // Encoded output pattern
  conditional: RegExp,  // Conditional block pattern
  iterate: RegExp,      // Iteration pattern
  use: RegExp,          // Include/partial pattern
  define: RegExp        // Definition pattern
};

Usage Examples:

const doT = require("dot");

// ERB-style delimiters
const erbSettings = {
  interpolate: /<%=([\s\S]+?)%>/g,
  evaluate: /<%([\s\S]+?)%>/g,
  encode: /<%-([\s\S]+?)%>/g
};

const erbTemplate = doT.template(
  "<h1><%= it.title %></h1><% if (it.items) { %><ul><% } %>",
  erbSettings
);

// Mustache-style delimiters
const mustacheSettings = {
  interpolate: /\{\{([\s\S]+?)\}\}/g,
  encode: /\{\{\{([\s\S]+?)\}\}\}/g
};

const mustacheTemplate = doT.template(
  "<p>Hello {{it.name}}, your email is {{{it.email}}}</p>",
  mustacheSettings
);

// Custom bracket style
const bracketSettings = {
  interpolate: /\[=([\s\S]+?)\]/g,
  evaluate: /\[([\s\S]+?)\]/g,
  conditional: /\[\?(\?)?\s*([\s\S]*?)\s*\]/g
};

Whitespace Control

Control whitespace handling in template output for clean formatting.

// Configuration via templateSettings
const settings = {
  strip: boolean,  // Remove extra whitespace (default: true)
  append: boolean  // Use append vs split mode (default: true)
};

Usage Examples:

const doT = require("dot");

// Preserve whitespace
const preserveTemplate = doT.template(`
  <div>
    {{=it.content}}
  </div>
`, { strip: false });

// Strip whitespace (default behavior)
const stripTemplate = doT.template(`
  <div>
    {{=it.content}}
  </div>
`, { strip: true });

const result1 = preserveTemplate({ content: "Hello" });
// Output includes original whitespace formatting

const result2 = stripTemplate({ content: "Hello" });
// Output: "<div>Hello</div>" (whitespace stripped)