HTMP
A 3.9 KB UI engine that brings fine-grained reactivity directly to static HTML. No Virtual DOM, no compilers, no Babel. Just the browser.
{{ }}
Text Interpolation
:attr
Attribute Binding
@event
Event Handling
:for
List Rendering
Zero to Hero in 5 Seconds
Copy this code, save as index.html, and open it in your browser. No npm install.
The Code
<!-- index.html -->
<div id="app">
<h1>{{ title }}</h1>
<button @click="increment()">Count: {{ count }}</button>
</div>
<script type="module">
import { HTMP } from 'https://unpkg.com/htm-projection@1.1.0/dist/esm/index.js';
const app = new HTMP('app', document.getElementById('app').outerHTML);
app.setProxy({ title: "Hello HTMP", count: 0 });
app.setProgram({
increment: () => app.proxy.count++
});
app.mount('app');
</script>Live on this Page! 🚀
This button is powered by HTMP running right now on this Landing Page.
Interactive Gallery
Explore different use cases. Click tabs to see the full code snippet and live result.
Examples
<!--
FILOSOFI HTMP: No :if / v-if needed!
Empty initial array [] is perfectly safe.
-->
<div id="app">
<input type="text" :value="currentInput" @input="handleInput(e)" placeholder="Add task..." />
<button @click="addTodo()">Add</button>
<p><i>{{ todos.length === 0 ? 'No todos yet.' : '' }}</i></p>
<ul>
<li :for="todo in todos">
<span :style="todo.done ? 'text-decoration: line-through;' : ''">{{ todo.text }}</span>
<button @click="toggleTodo(todo)">{{ todo.done ? 'Undo' : 'Done' }}</button>
<button @click="deleteTodo(todo)">x</button>
</li>
</ul>
</div>
<script type="module">
import { HTMP } from 'https://unpkg.com/htm-projection@1.1.0/dist/esm/index.js';
const app = new HTMP('app', document.getElementById('app').outerHTML);
app.setProxy({ todos: [], currentInput: "" });
app.setProgram({
handleInput: (e) => app.proxy.currentInput = e.target.value,
addTodo: () => {
if (!app.proxy.currentInput.trim()) return;
app.proxy.todos = [...app.proxy.todos, { id: Date.now(), text: app.proxy.currentInput, done: false }];
app.proxy.currentInput = "";
},
toggleTodo: (todo) => {
app.proxy.todos = app.proxy.todos.map(t => t.id === todo.id ? { ...t, done: !t.done } : t);
},
deleteTodo: (todo) => {
app.proxy.todos = app.proxy.todos.filter(t => t.id !== todo.id);
}
});
app.mount('app');
<script>
Beyond the Sandbox: Possibilities
HTMP is not just for simple widgets. It powers full SPA applications, TypeScript projects, and complex admin panels. This list will continue to grow.
🚀 HTMP Project Showcases (Growing List)
AdminLTE User Table (Reproduced)
We initiated reactivity on the AdminLTE User Table using HTMP. Features reactive search, dynamic status badges, and event handling inside :for loops — without jQuery. Proving HTMP is ready for enterprise dashboards.
HTMP SPA Ticket Demo
A Single Page Application built with HTMP and the native browser History API. Ticket list, route-based detail views, and SPA navigation — no framework router needed. HTMP's lifecycle controls (mount, unmount, remount) make full SPA flows possible at 3.9 KB.
HTMP Note App (TypeScript Project)
HTMP as the presentation layer of a TypeScript project. Set the type of your proxy data, then instantiate new HTMP<TypeProxy>(rootId, pattern) — no type errors on proxy usage, even when nested like proxy.data.profile.name.
This Landing Page Itself!
Yes, this very page is powered by HTMP. The reactive counter, the interactive tab switching in the gallery, and the dynamic LiveCodes playground updates are all driven by the 3.9 KB engine.
Specially, this page reactive but still follow html standard.
View Page Source (Ctrl+U)
Why HTMP?
Designed for pragmatists. Built for the backend-driven web.
WYSIWYG
No JSX. No x-data magic. Write the HTML you already write — add {{ }} or :for — and it just works. Designers see their design in production, not a JSX translation of it.
Surgical DOM Patching
Powered by native Proxy + DOMParser. State changes → HTMP jumps directly to the exact DOM node via a path registry. No diffing. No VDOM. No reconciliation.
If You Know JavaScript, You Know HTMP
No new syntax. Conditionals are ternary operators. Loops are :for — and you already know for loops. Your JavaScript skills transfer 100%.
Smart Unlimited Loop
No :key. No <template> wrapper. No :if. Render irregular nested trees — 4-level, 3-level, or 2-level — with a single :for expression. Real-world data isn't uniform. HTMP doesn't pretend it is.
Auto Self-Healing Registry
HTMP coexists with any library — jQuery, Bootstrap plugins, browser extensions. If the DOM shifts, the registry auto-recovers: it finds the displaced node, updates its path, and resumes surgical patching. No manual remount(). No data loss.
Zero Build Step, TypeScript + Vite? We Work
No Vite. No Webpack. No Babel. No tsconfig. Copy-paste, save as index.html, open in browser. HTMP runs from file://.
For TypeScript projects: npm install htm-projection and configure your favorite compiler — HTMP works seamlessly with any build setup.
3.9 KB, Zero Dependencies, Future-Proof
Smaller than snabbdom (4.7 KB). Smaller than virtual-dom (5.3 KB). 15× smaller than React + ReactDOM. Zero dependencies. Tree-shakeable.
HTMP uses standard Web APIs that browser vendors have invested in, standardized, and optimized for decades. No proprietary runtime to maintain — the platform is the runtime.
🔒 Backend-Driven Security
Stop storing Bearer Tokens in localStorage where XSS vulnerabilities can leak them.
HTMP encourages standard web security by working seamlessly with native fetch and HttpOnly Cookies.
// Clean API calls without frontend token storage
const res = await fetch('/api/v1/user/profile', {
credentials: 'include' // Cookies managed safely by browser
});Seamless Adaptive Workflow
How HTMP eliminates team friction, protects design integrity, and speeds up time-to-market.
