{{title}}
{{#each items}}{{name}}
{{description}}
{{#if featured}}Featured{{/if}}export const templates = { // --- Small templates --- 'static string (no expressions)': { template: 'Hello world', context: {}, }, 'simple variables': { template: 'Hello {{name}}! You have {{count}} new messages.', context: { name: 'Mick', count: 30 }, }, 'dot paths': { template: '{{person.name.bar.baz}}{{person.age}}{{person.foo}}{{animal.age}}', context: { person: { name: { bar: { baz: 'Larry' } }, age: 45 } }, }, 'with helper': { template: '{{#with person}}{{name}}{{age}}{{/with}}', context: { person: { name: 'Larry', age: 45 } }, }, // --- Arguments & mustache-style --- 'arguments (positional + hash)': { template: '{{foo person "person" 1 true foo=bar foo="person" foo=1 foo=true}}', context: { bar: true }, helpers: { foo: () => '' }, }, 'depth-1 (../)': { template: '{{#each names}}{{../foo}}{{/each}}', context: { names: [ { name: 'Moe' }, { name: 'Larry' }, { name: 'Curly' }, { name: 'Shemp' }, ], foo: 'bar', }, }, 'mustache-style section (array)': { template: '{{#names}}{{name}}{{/names}}', context: { names: [ { name: 'Moe' }, { name: 'Larry' }, { name: 'Curly' }, { name: 'Shemp' }, ], }, }, 'mustache-style section (object)': { template: '{{#person}}{{name}}{{age}}{{/person}}', context: { person: { name: 'Larry', age: 45 } }, }, // --- Medium templates --- 'each (small array, 4 items)': { template: '{{#each names}}{{name}}{{/each}}', context: { names: [ { name: 'Moe' }, { name: 'Larry' }, { name: 'Curly' }, { name: 'Shemp' }, ], }, }, 'each with @index/@key': { template: '{{#each names}}{{@index}}:{{name}} {{/each}}', context: { names: [ { name: 'Moe' }, { name: 'Larry' }, { name: 'Curly' }, { name: 'Shemp' }, ], }, }, 'if/else conditional': { template: '{{#if active}}{{name}}{{else}}{{name}}{{/if}}', context: { active: true, name: 'Widget' }, }, 'partial (each + partial)': { template: '{{#each peeps}}{{>variables}}{{/each}}', context: { peeps: [ { name: 'Moe', count: 15 }, { name: 'Larry', count: 5 }, { name: 'Curly', count: 1 }, ], }, partials: { variables: 'Hello {{name}}! You have {{count}} new messages.', }, }, 'nested depth (../../)': { template: '{{#each names}}{{#each name}}{{../bat}}{{../../foo}}{{/each}}{{/each}}', context: { names: [ { bat: 'foo', name: ['Moe'] }, { bat: 'foo', name: ['Larry'] }, { bat: 'foo', name: ['Curly'] }, { bat: 'foo', name: ['Shemp'] }, ], foo: 'bar', }, }, subexpressions: { template: '{{echo (header)}}', context: { echo: () => {}, header: () => {} }, helpers: { echo: (value) => 'foo ' + value, header: () => 'Colors', }, }, // --- Complex template --- 'complex (if/each/helpers)': { template: `
The list is empty.
{{/if}}`, context: { header() { return 'Colors'; }, hasItems: true, items: [ { name: 'red', current: true, url: '#Red' }, { name: 'green', current: false, url: '#Green' }, { name: 'blue', current: false, url: '#Blue' }, ], }, }, 'recursive partials': { template: '{{name}}{{#each kids}}{{>recursion}}{{/each}}', context: { name: '1', kids: [{ name: '1.1', kids: [{ name: '1.1.1', kids: [] }] }], }, partials: { recursion: '{{name}}{{#each kids}}{{>recursion}}{{/each}}', }, }, // --- Large/stress templates --- 'each (large array, 100 items)': { template: '{{#each items}}{{description}}
{{price}}Count: {{count}}
{{description}}
{{#if featured}}Featured{{/if}}© 2026 {{title}}
', }, }, };