JavaScript templates

This page provides a list of JavaScript template systems.

By syntax style

100% Standards-based (no custom syntax)

Pure JavaScript (JavaScript function calls generate HTML)

Note that such solutions can still allow for iteration to match other templating engines using succinct inline for-each constructs or the like by using Array iteration methods such as map or reduce.

Pure HTML (JavaScript selectors in business logic find normal HTML to populate)

XSL

  • XSLTJS (for cross-browser use of XSL for templates)

E4X

Standards-friendly (custom attributes or embedding syntax, but uses mostly standard-compatible approach)

X/HTML/E4X/XUL with Namespaced custom attributes and elements

Pure JavaScript embedded within HTML/XML design logic (ASP/JSP/PHP or curly braces style)

Custom approach

HTML+Curly braces {} with custom design logic

HTML + Non-namespaced custom elements or attributes

ASP/JSP-style custom design logic within <%...%>

By feature

Transforming an entire document into another through element/node matching templates

XSL

  • XSLTJS (for cross-browser use of XSL for templates)

Generating DOM tree via JavaScript

  • Monkberry with server precomiled templates, mustage-like syntax.

Recursive Templates

Support for recursion.

  • DNA Template (using nested template="[ObjectProperty]" attributes)

Native HTML Support

Engine understands certain special HTML elements (e.g form elements) and other HTML features (visibility, classes, etc.)

  • DNA Template
    • conditional visibility of HTML elements
    • support for setting values on HTML form elements
    • conditional adding/removal of class names
    • support for inserting rich-HTML contents

Document Tags and Contributors

 Last updated by: chrisdavidmills,