Interactive Examples

Experiment with Template-M by editing the templates and data below, then click "Render" to see the results.

Example 1: Simple Variable Replacement

Basic variable replacement using data-tme attributes. The < operator replaces the element, while > replaces children.

Template

Data (JSON)

Example 2: Conditional Rendering

Show or hide elements based on data values. Setting a value to false removes the element.

Template

Data (JSON)

Example 3: Array Rendering with Functions

Loop through arrays using data-fn. The template name defaults to the singular of the property name.

Template

Data (JSON)

Example 4: Array with Function Slot

Use data-fn="name:$array" to define a function and apply it to an array in one step. The function name defaults to the singular of the property name.

Template

Data (JSON)

Learn More

Ready to use Template-M in your project? Check out the Getting Started guide or browse the API Reference.