HyperText Markup Templating
WARNING! Working Draft Alpha!
HTMT is a client-side and server-side templating engine designed to seamlessly integrate with HTML/HTMX, using JSONPath for dynamic data binding and manipulation. It extends standard HTML with custom data attributes, enabling powerful, declarative rendering and state management directly in the markup.
For the full documentation go to: ./docs directory.
HTMT uses a series of custom ht-* attributes to bind data, control element visibility, iterate over collections, and
dynamically apply CSS classes based on the state of the data. Below is a table of the available attributes, their
descriptions, and examples:
| Attribute | Description | Example |
|---|---|---|
ht-bind |
Binds data to the element's content or specific attributes. | <div ht-bind="$.user.name"></div> |
ht-loop |
Iterates over an array or collection, rendering the enclosed block for each item. | <div ht-loop="$.users[*]"><span ht-bind="$.name"></span></div> |
ht-template |
Specifies a template block that can be reused and instantiated within ht-loop. |
<template id="user-template">...</template> |
ht-attr-[name] |
Binds data to an element's attribute. | <img ht-attr-src="$.user.avatarUrl"> |
ht-show |
Shows the element if the condition is true. | <div ht-show="$.user.isLoggedIn"></div> |
ht-hide |
Hides the element if the condition is true. | <div ht-hide="$.user.isAnonymous"></div> |
ht-switch |
Evaluates an expression and renders the case block that matches the result. | <div ht-switch="$.user.role">...</div> |
ht-case |
Specifies a case within a ht-switch block. |
<div ht-case="'admin'">Admin content</div> |
ht-class-[class name] |
Applies a CSS class to the element if the condition is true. | <div ht-class-active="$.user.status == 'active'"></div> |
ht-root-[attribute] |
Root-scoped variant of any attribute above, binding against the root of the JSON data instead of the local scope. | <div ht-root-bind="$.user.name"></div> |
- About | JSONPath | data tracker | IETF
- JSONPath -- XPath for JSON
- JSONPath Syntax | SmartBear
- JSONPath Online Evaluator
JSONPath is a query language for JSON, similar to XPath for XML. It is used to extract and manipulate data within JSON documents. Below is a list of JSONPath libraries available for various programming languages, helping developers integrate JSONPath functionality into their applications.
| Language | Libraries |
|---|---|
| Java | - JsonPath |
| PHP | - JsonPath-PHP - PECL jsonpath |
| JavaScript | - jsonpath-plus |
| Go | - jsonpath - yalp/jsonpath |
| Python | - jsonpath - jsonpath-rw - jsonpath-rw-ext - jsonpath-ng (recommended) |
| Rust | - jsonpath-rust |
| Kotlin | - JsonPathKt - kotlinx-serialization-jsonpath |
| Swift | - SwiftPath - Sextant |
| Bash | - JSONPath.sh |
| C# | - JSONPath - Newtonsoft JSON |
| C++ | - nlohmann/json - jsoncons |
Note: The libraries listed vary in their support of the JSONPath standards. Differences in support can affect the compatibility and functionality of JSONPath expressions across different projects and applications. It is recommended to review the specific features and limitations of each library to ensure it meets the requirements of your use case.
This document is part of the HTMT project, which is open source and freely available under the MIT License. For full details, see the LICENSE file.