Z Template ➋

Z Template ➋ is a lightweight, dependency-free JavaScript templating library that converts JSON data directly into dynamic HTML UI using HTML5-compliant z-var attributes and <template> tags.

What is Z Template ➋?

Z Template ➋ is an open-source (MIT-licensed) JavaScript templating library that transforms JSON data into structured HTML. It takes a target DOM element and a JSON object as input, reads template instructions from z-var attributes and <template> tags, and outputs updated HTML. It runs entirely in the browser, requires only a single JS file and a small CSS file, and has no framework dependencies. The library has been developed and battle-tested for over 6 years on real-world sites.

Key Features

• DOM-based templating — Uses standard HTML elements and attributes (z-var, template) so templates stay browser-previewable and XSS-free compared to string-based engines.
• Direct JSON-to-HTML — Map JSON properties into text, attributes, HTML content, form values, CSS classes, visibility, and more with one zTemplate() call.
• Dynamic UI updates — Reapplying zTemplate(element, newData) updates changed values instantly; list rendering compares old and new arrays and only updates changed items.
• Smart list rendering — Repeated template blocks iterate over arrays or objects; items with an id property are tracked by that id for efficient DOM reuse.
• Conditional actions — Apply attributes, classes, visibility, events, or callbacks only when a boolean condition (e.g., foo == 'bar') evaluates true.
• Custom callbacks & events — Fire JavaScript events or call named callback functions with the current data and value as an argument, optionally passing extra parameters.
• Scopes — z-scope and z-scope-children attributes isolate parts of a template from being applied by ancestor calls.
• CSS animations — Built-in fade/slide animations controlled by a --z-anim-speed CSS variable or z-no-anim class; custom animations target template-clone and z-content-rev attributes.

Who is it for?

• Front-end developers who want to convert JSON API responses into HTML UI without pulling in a heavy framework like React or Vue.
• Developers working with designers who want designers to edit static HTML templates that never expose the templating logic until data is applied.
• Teams needing a small, maintainable templating layer that doesn't break with dependency updates — the entire library is one file with zero dependencies.
• Form-heavy applications that need to set select, checkbox, and radio values conditionally from data.

What can you do with Z Template ➋?

• Build dynamic lists and tables: Use template="[items]" to iterate arrays and objects and render nested structures (like a category with sub-items) with smart updates.
• Toggle UI states from data: Conditionally hide/show elements, add/remove CSS classes, or set boolean attributes like checked and disabled based on JSON values.
• Trigger interactions on data changes: Fire custom events or call callbacks when variables hit certain values, for example updating an animation or submitting a form.
• Create prototype UIs quickly: Turn sample JSON into interactive HTML in minutes without transpiling or build steps — just include two script/css files.

How does Z Template ➋ work?

Include template.css and template.bundle.min.js (or import the module template.bundle.module.min.js), add z-var instructions to your HTML, then call zTemplate(element, data). The library processes the element's subtree, applies values from the data object to each instruction, and re-runs the same process any time you call it again with new data. jQuery users can also call jQuery.template(...) if jQuery is loaded.

Pros and cons

• Pros: Single-file and dependency-free; MIT-licensed; DOM-based so templates are XSS-resistant and previewable; supports lists, scopes, events, and callbacks; backward compatible with Z Template 1.0.
• Cons: The remove action permanently deletes elements from the DOM and cannot be re-applied; the custom z-var syntax and learning curve differ from framework-based templating.

Pricing

Z Template ➋ is free and open-source under the MIT license — no paid tiers or hidden fees.

Alternatives

Other templating libraries include Handlebars, Mustache, EJS, Nunjucks, and JsRender. These typically treat templates as plain strings, whereas Z Template ➋ manipulates the browser DOM directly, which the README highlights as a security advantage against XSS.

FAQ

Is Z Template ➋ free?

Yes, Z Template ➋ is open-sourced under the MIT license, so it is free to use in personal and commercial projects.

Does Z Template ➋ require jQuery or another framework?

No. Z Template ➋ is dependency-free and works standalone with plain JavaScript. If jQuery is already loaded, it adds a jQuery.template() convenience method, but it is not required.

How do I update the UI with new JSON data?

Call the zTemplate() function again on the same target element with the new data object. The library re-evaluates all z-var instructions and changes only what has changed, including smart list updates that reuse unchanged DOM nodes.

What is the difference between toggle and remove actions?

The toggle action adds or removes CSS classes to show or hide an element while keeping it in the DOM. The remove action permanently deletes the element from the DOM, so templates cannot be re-applied to it afterwards; the README recommends using toggle in most cases.

Can I animate list items with Z Template ➋?

Yes, new list items get a slide-in animation by default, controlled by the --z-anim-speed CSS variable or the z-no-anim class. You can customize animations by targeting *[template-clone] for new items, *[z-removed] for removals, and *[z-content-rev] for changed content.