https://github.com/onehundredthousand/jtml
HTML-first JSON templating, inspired by HTMX.
https://github.com/onehundredthousand/jtml
html js json template-first
Last synced: 2 months ago
JSON representation
HTML-first JSON templating, inspired by HTMX.
- Host: GitHub
- URL: https://github.com/onehundredthousand/jtml
- Owner: OneHundredThousand
- Created: 2025-06-21T10:42:39.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2026-03-29T17:04:12.000Z (3 months ago)
- Last Synced: 2026-03-29T19:26:43.104Z (3 months ago)
- Topics: html, js, json, template-first
- Language: JavaScript
- Homepage:
- Size: 236 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JTML
JTML is a lightweight, attribute-driven JavaScript micro-library that turns plain HTML into interactive, data-driven UI — without becoming a framework.
- No virtual DOM
- No components
- No build step required
- No hidden lifecycle
**JTML = JSON Template Markup Language**
---
## ✨ Core Ideas
- HTML defines structure and behavior
- One actor element = one action
- Templates stay in ``
- JSON is the default data shape
- Explicit over implicit
JTML enhances real HTML — it doesn’t replace it.
---
## 🚀 Quick Start
```html
```
If `/posts` returns JSON like:
```json
{
"items": [
{ "title": "First" },
{ "title": "Second" }
]
}
```
JTML renders it automatically.
---
## ⚡ Supported Events
JTML binds behavior using `jt-*` attributes.
- `jt-click`
- `jt-submit`
- `jt-input`
- `jt-change`
- `jt-load`
Example:
```html
Click
```
```javascript
function handleClick(el, event) {
console.log("clicked");
}
```
If the handler returns `false`, rendering is skipped.
If it returns a `Promise`, rendering waits.
---
## 🔁 Forms & Anchors (Requests)
Forms and anchors automatically use `fetch()`.
```html
```
### Behavior
- `GET` → query string via `URLSearchParams`
- `POST`, `PUT`, `PATCH` → JSON body
Response auto-parsed:
- `application/json` → `res.json()`
- `text/html` → `res.text()`
---
## 🧩 Rendering (`jt-render`)
`jt-render` points to a ``.
```html
```
### Supported Template Directives
- `jt-text="{path.to.value}"`
- `jt-foreach="items"`
- `jt-if="count gt 0"`
- `jt-attr:href="{url}"`
### Conditional Operators
- `eq`
- `neq`
- `gt`
- `lt`
- `gte`
- `lte`
Example:
```html
Has items
```
Templates are compiled once and cached automatically.
---
## 🎯 Targets (`jt-target`)
```html
jt-target="#output"
```
If omitted, rendering happens in place.
---
## 🔄 Swap Strategies (`jt-swap`)
Controls how output is inserted:
| Value | Behavior |
|---------|-----------------------------|
| replace | Replace children (default) |
| append | Append output |
| prepend | Prepend output |
Example:
```html
...
```
---
## 🧠 Global Store
JTML includes a tiny key/value store.
```javascript
JTML.store.add("user", { name: "Arthur" });
const user = JTML.store.get("user");
```
Use it via `jt-source`:
```html
```
The stored object becomes the render context.
---
## ⏳ Loading & Error States
```html
```
- `jt-loading` → shown during request
- `jt-error` → shown if request fails
---
## 🪝 Lifecycle Hooks
Hooks are plain global functions.
```html
```
```javascript
function beforeReq(el, options) {}
function afterReq(el, response, body) {}
function onError(el, error) {}
```
No framework lifecycle. Just functions.
---
## 🔍 Debug Mode
Enable via query string:
```html
```
Optional flags:
- `?debug`
- `?debug&debug-only`
- `?debug&debug-verbose`
Logs actor processing details to the console.
---
## 🔄 Manual Re-Apply
JTML runs automatically on `DOMContentLoaded`.
You can manually re-bind:
```javascript
JTML.apply();
```
Or apply to a subtree:
```javascript
JTML.apply(someElement);
```
---
## 🧠 Philosophy
JTML is intentionally not a framework.
- No component system
- No router
- No global state management
- No hidden diffing
- No magical reactivity
It enhances HTML with predictable, explicit behavior.
If things get complicated, use plain JavaScript.
JTML doesn’t try to compete with full frameworks — it avoids becoming one.
---
## 📄 License
MIT