U-Macrobars.js Demo

Basic Field Output

{{name}} is {{age}} years old and works as {{job or "unemployed"}}

Number Formatting

Price: ${{%price}} | Large Number: {{~bigNumber}}

Default Values & Safety

{{username or "Guest"}} | {{profile.bio or "No bio available"}}

Field Output API

Basic Syntax

{{field}} → Safe HTML output

{{{field}}} → Raw HTML output

{{:variable}} → Direct variable

{{field or "default"}} → With fallback

Number Formatting

{{%number}} → 2 decimal places

{{~number}} → Rounded (1k, 1M)

Examples

// Basic field output
const template = Macrobars.compile('{{name}}');
const result = template({name: 'John'});

// With defaults
const withDefault = '{{title or "Untitled"}}';

// Number formatting
const price = '${{%cost}}'; // $12.34
const count = '{{~views}}';  // 1.2k

Control Structures

Conditionals

{{#if isLoggedIn}} Welcome back, {{username}}! {{#else}} Please log in to continue. {{/if}}

Loops & Iteration

{{#each items}} • {{number}}. {{name}} - ${{price}} {{/each}}

Equality & Lookup

{{#eq status "active"}}User is active{{/eq}} {{lookup user "permissions"}}

Control Flow API

Conditionals

{{#if condition}}...{{/if}}

{{#else}} → Alternative branch

Conditional rendering based on truthy values. Supports nested conditions.

Loops

{{#each items}}...{{/each}}

{{#each items as item}}...{{/each}}

• Standard: data becomes current item
• Named: item becomes current item, data preserved

Comparison & Lookup

{{#eq val1 val2}}...{{/eq}}

{{eq val1 val2}} → "true" or ""

{{#lookup obj key}}...{{/lookup}}

{{lookup obj key}} → value or ""

Examples

// Conditionals
'{{#if user.isAdmin}}Admin Panel{{/if}}'

// Named loops
'{{#each products as product}}'
  '{{product.name}} - {{data.storeName}}'
'{{/each}}'

// Equality & lookup
'{{#eq user.role "admin"}}Secret{{/eq}}'
'{{lookup config "theme"}}'

Advanced Features

Event Binding

<button {{@click="handleClick"}}>Click Count: {{clickCount}}</button>

Code Blocks

Components

Advanced API

Event Binding

{{@event="handler"}} → DOM attribute

template.renderTo(container, data)

Events are automatically bound when using renderTo(). Handler can reference data properties or global functions.

Code Execution

<? code ?>

<?= expression ?>

Components & Compilation

Macrobars.compile(template, options)

Macrobars.createComponents(definitions)

Examples

// Event binding with renderTo
const template = Macrobars.compile(
  '<button {{@click="increment"}}>{{count}}</button>'
);
template.renderTo('#container', {
  count: 0,
  increment: function() { this.count++; }
});

// Components
const components = Macrobars.createComponents({
  userCard: '<div>{{name}} - {{email}}</div>'
});

Template Editor

Template: Data (JSON):

Click "Render Template"

Template Information

Ready.

Compilation & Debugging

Compilation Options

decimals: number → Number precision

strict: boolean → Strict mode

components: object → Reusable templates

Debugging Properties

template.tokens → Parsed tokens

template.gensource → Generated JS

template.event_bindings → Event data

Utility Functions

Macrobars.safe_out(text, default)

Macrobars.num_out(number, decimals)

Macrobars.num_out_round(number)

Example Templates

// Complete example
const template = Macrobars.compile(`
<div class="user-card">
  <h3>{{name or "Unknown User"}}</h3>
  {{#if profile.verified}}✅ Verified{{/if}}
  <p>Balance: ${{%balance}}</p>
  {{#each achievements}}
    <span class="badge">{{data}}</span>
  {{/each}}
</div>
`, { decimals: 2 });

const result = template(userData);