Template-M takes a refreshingly different approach to templating: it's DOM-native, functional, and treats JSON data as function applications. Unlike string-based templating libraries or heavy virtual DOM frameworks, Template-M works directly with the browser's DOM API to compose HTML from reusable template functions.
Most templating solutions fall into familiar categories: string interpolation (Mustache, Handlebars), embedded code blocks (EJS, ERB), or component-based frameworks (React, Vue). Template-M takes a different path—one that combines functional/programmatic HTML generation with declarative data binding.
At its core, Template-M treats templates as functions and JSON objects as function applications. This functional approach, combined with DOM-native operations, creates a powerful yet simple templating system.
But here's what really sets it apart: your template file looks exactly like your output HTML. Not "similar to"—exactly like. No PHP code mixed in, no ERB blocks, no JSX that needs transpiling. Just HTML with data attributes. This means you can open a template file in a browser and immediately see its structure, without running any build tools or server processes.
Your template structure mirrors your output structure. This isn't marketing—it's a fundamental difference in how Template-M works, and it solves real problems developers face every day.
If you've worked with other templating systems, you know these frustrations:
<% %> or <%= %>? When do you use <?php echo ?> vs <?= ?>?
Template-M templates are just HTML files with data-fn, data-tme, and
data-tma attributes. Here's what that means in practice:
Compare Template-M to what you're probably using now:
<?php foreach ?> blocks.Template-M removes the gap between template and output. What you write is what you render.
No string parsing or compilation—Template-M works directly with DocumentFragment, replaceChildren, and other native DOM APIs for maximum efficiency.
Templates define reusable functions with data-fn attributes. Compose complex UIs from simple, pure template functions.
Data objects naturally map to template functions. The "template" property in your JSON automatically selects which function to apply—elegant and intuitive.
No virtual DOM to maintain, no diffing algorithms to run, no reactivity system overhead. Just direct, efficient DOM manipulation.
Templates are valid HTML with data attributes. They work without JavaScript and can be progressively enhanced—perfect for SSR and accessibility.
Use Template-M standalone or integrate it with any framework. Works in browsers, Node.js, and any JavaScript environment.
Template-M's function-based approach offers unique capabilities:
Define template functions with data-fn="functionName" and compose them naturally.
Each function is pure—given the same data, it produces the same DOM output.
Use data-fn="user/1", data-fn="user/2" syntax to define functions
with multiple parts that combine into a single DocumentFragment. Perfect for complex layouts.
Access parent properties with $^propertyName syntax. Traverse multiple levels
with $^^grandparentProperty—functional scoping made simple.
Templates can yield DocumentFragments instead of wrapped elements using the >
prefix. Create flexible, unwrapped content that fits anywhere.
Template-M's architecture delivers real performance benefits:
Template-M is designed for developer productivity:
data-tme for elements, data-tma for attributes—clear and consistentTemplate-M excels in these scenarios:
Perfect for Node.js SSR with JSON APIs. Template-M's DOM-like operations work seamlessly with jsdom or similar libraries for server-side HTML generation.
Build component-based static sites with reusable template functions. Great for documentation, blogs, and content-heavy sites that don't need client-side reactivity.
Start with semantic HTML and progressively enhance with dynamic content. Templates are valid HTML that works without JavaScript, making them SEO and accessibility friendly.
Generate HTML emails and notifications from JSON data. The functional approach ensures consistent output every time.
Build data-driven interfaces that render from API responses. Perfect for internal tools and admin interfaces where bundle size matters.
Create small, independent UI components without heavy framework dependencies. Template-M's lightweight footprint is perfect for micro-frontend architecture.
Quickly build functional UIs without framework overhead. Great for proof-of-concepts and rapid prototyping.
Template-M is the right choice when you need:
Consider other solutions if you need:
Template-M focuses on one thing and does it well: transforming JSON data into DOM structures through functional template composition. For reactive, stateful applications, established frameworks are the better choice.
What makes Template-M special is its unique combination of functional purity, DOM-native operations, and JSON-driven architecture. It's not trying to be React—it's solving a different problem in an elegant way.
If you're building server-rendered sites, static generators, or non-reactive UIs, and you value simplicity, performance, and a functional approach, Template-M offers something genuinely different and genuinely better for these use cases.
Ready to experience functional, DOM-native templating? Check out the Getting Started guide or explore the live demos.