DEV Community: Erlangga Satria

Hybrid Architecture: Fast Server Rendering Transitioning to Reactive SPA with Dual Response

Erlangga Satria — Thu, 01 Oct 2026 06:35:13 +0000

I am currently working on an open-source web app store project. It utilizes a hybrid architecture: a fast server-side rendering (SSR) engine that is subsequently taken over by a lightweight JavaScript program on the client side to become a reactive Single Page Application (SPA).

This approach is backend-agnostic and can be implemented using PHP, Go, Ruby, Node.js/Express, or any other server-side language.

Why This Approach?

SEO & First Load (MPA): By default, the application behaves as a Multi-Page Application (MPA). Users and Search Engine Bots immediately receive pure HTML. This practice has been proven solid for over two decades—ensuring a blazing-fast first load, minimal blocking time, and excellent crawlability.
Seamless SPA Transition: After the initial HTML is loaded, a lightweight JavaScript library takes over the DOM. Subsequent interactions do not trigger full page reloads, updating the UI reactively instead.
Dual Response Controller: On the server side, every route is configured to handle dual responses. If the request comes from a hard refresh or a bot, the server responds with HTML. If the request originates from in-browser SPA navigation, the server responds with JSON.
Security Without Client-Side JWT: For sessions and authentication, this architecture relies entirely on HTTP-only cookies. No JSON Web Tokens (JWT) are exposed or stored on the client side (e.g., in localStorage), inherently mitigating token theft via XSS attacks.

Architecture Flow Diagram

[ Client / Browser ]
        │
        ├─► (1) Initial Request / Search Engine Bot
        │       │
        │       ▼
        │   [ Server ] ──(Response: Full HTML)──► Render MPA
        │       ▲                                   │
        │       │                                   ▼
        │       │                          JS Takeover DOM (Reactive)
        │       │                                   │
        ├─► (2) SPA Navigation / User Interaction   │
                │                                   │
                ▼                                   │
          [ Fetch API ] ──(AJAX Request)──────► [ Server ]
                                                   │
                                          (Dual Response Controller)
                                                   │
                                                   ▼
                                         (Response: JSON Data)
                                                   │
                                                   ▼
                                          Partial DOM Update

The Client Library: HTMP

To handle reactivity on the client side, this project uses HTMP

Size: Extremely lightweight, only 3.8KB (gzip).
Dependencies: Zero dependencies, purely leveraging native Web APIs.
SPA Routing: Runs smoothly using the native fetch and history APIs.
Extreme Performance: Capable of handling a reactive table with 1,000 rows in just 150ms. Testing is specifically targeted at low-end Android phones (the lowest variants of Redmi, Realme, Vivo, Oppo, and Samsung) to ensure the application remains highly responsive across all device spectrums. Just try benchmark on your current device.

Let's Discuss!

This project is in active development in my desk and plan to fully open source. Are you interested in joining as a contributor? Or do you have any feedback, critiques, or insights regarding the Dual Response architecture and the MPA-to-SPA transition?

Feel free to leave a comment below!

Two Potential Bugs, One Fix: Price of 0.4 kB in a Reactive UI Engine

Erlangga Satria — Wed, 16 Sep 2026 07:59:04 +0000

v1.0.2 of HTMP adds auto self-healing for reactive bindings and :for support on table rows. Bundle went from 2.9 kB to 3.3 kB gzipped. Here's what happened, and why it's worth 0.4 kB.

Test for `AdminLTE`

I was converting AdminLTE 4's users.html page to HTMP — the first real test of HTMP in a real admin template. Look so good but where is <tr>?:

Bug 1: Disappeared


<table>
  <tbody>
    <tr :for="user in users">
      <td>{{ user.name }}</td>
    </tr>
  </tbody>
</table>

The browser's strict HTML parser strips <tr> when it's parsed outside table context. This is correct behavior — the HTML spec is clear about which elements can be children of <tbody>.

But it broke :for on table rows. And tables are 80% of admin dashboards. So hard to tell, suggest users translate it to <div> card or <li> list that works fine its horrible. I though it should worked fine, just code again.

Bug 2: External DOM Breaks Bindings

HTMP tracks nodes by path — [5, 0, 0]. It's fast. It's surgical. But if jQuery (or a browser extension, or an analytics script) inserts a node somewhere inside the HTMP root, every path shifts.

So before its happen, I append child in many place in the dom, yes path track intercept new node was broken. its rare happen intentionaly, but how much it cost to make it resilient?

The Fixes (Both Used Native Browser APIs)

Fix 1: Wrap in <template>

The browser has a native element designed exactly for this: . Its content is parsed as an HTML fragment — no context restrictions.


const templateWrapper = document.createElement('template');
templateWrapper.innerHTML = originalHTML;
const freshTemplate = templateWrapper.content.firstElementChild;

<tr> inside <template> doesn't get stripped. Because <template> is a valid parent for anything.

I choose Native one. Works everywhere.

Fix 2: Self-Healing Binding

Every binding node gets tagged with _htmp (its binding ID):


node._htmp = id;

When a path fails, HTMP no longer gives up. It:

Detects the path is stale (node at path isn't the expected binding).
Finds the node by _htmp ID — scanning the DOM.
Corrects the path.


[HTMP] Self-healing: Path corrected for ID 5
[HTMP] Self-healing: Path corrected for ID 11
[HTMP] Self-healing: Path corrected for ID 10

Once healed, paths are valid again.

Now self-repairing and table loop :for <tr> ready.

What It Costs

Version	Minified	Gzipped	Download (Slow 3G)
v1.0.1	8.3 kB	2.9 kB	55 ms
v1.0.2	9.4 kB	3.3 kB	66 ms

+0.4 kB gzipped. 11 ms slower on Slow 3G.

That's the entire cost of resilience.

For comparison:

Library	Gzipped
HTMP v1.0.2	3.3 kB
snabbdom	4.72 kB
virtual-dom	5.28 kB
Alpine.js	~7 - 18 kB
jQuery	~30 kB
React + ReactDOM	~40 kB

Still the smallest. Still zero dependencies. Still works from a file:// URL.

Native along the way

Both fixes used browser APIs that already exist:

Table fix : Native content fragment, no workaround
Self-healing : node._htmp DOM tagging and TreeWalker Browser API

HTMP doesn't invent new tools. It connects browser capability.

Future-proof by construction: as long as browsers support DOMParser, Proxy, and , HTMP works. Those aren't going away.

New Possibility after tables loop active and self healing

AdminLTE, SB Admin, and Bootstrap-based templates use tables everywhere. Before v1.0.2, HTMP couldn't handle them. Now it can — without refactoring a single line of the original HTML.

That means:

A theme creator still HTML user make it reactive.
A PHP developer can use an existing AdminLTE theme with HTMP bindings instead of React.
An LLM can be asked to "make this AdminLTE table reactive" and just do it.

The trade-off was 0.4 kB. The unlock is an entire ecosystem.

Source: github.com/erlanggasatria-source/HTMP

HTMP — Pattern. Proxy. Program. Zero dependencies. 3.3 kB. Future-proof by construction.

Two bugs. One fix. And a reminder that the browser already has everything you need — if you know where to look.

Membuat HTML AdminLTE Menjadi Reaktif dengan HTMP

Erlangga Satria — Wed, 16 Sep 2026 07:14:13 +0000

Contoh praktis mengubah halaman AdminLTE yang sudah ada menjadi reaktif dengan Proxy, tanpa menulis ulang layout dan tanpa manipulasi DOM jQuery yang berlapis.

Membuat HTML AdminLTE Menjadi Reaktif dengan HTMP

Banyak aplikasi admin sudah memiliki HTML yang matang: layout, sidebar, modal, tabel, dan plugin jQuery. Masalahnya muncul ketika sebagian halaman membutuhkan data reaktif.

Pilihan yang sering muncul adalah menulis ulang halaman dengan framework besar. Padahal, sering kali kita hanya perlu membuat satu bagian menjadi hidup. Atau menulis Jquery step by step untuk beserta event listenernya untuk membuat terasa reaktif.

Di artikel ini kita akan melihat pola yang lebih kecil: mempertahankan HTML AdminLTE, lalu menjadikan User Directory reaktif dengan HTMP.

Apa Itu HTMP?

HTMP adalah runtime kecil untuk membuat HTML biasa menjadi reaktif menggunakan API browser:

Pattern: template HTML dengan binding.
Proxy: state reaktif.
Program: fungsi untuk event dan logika aplikasi.

Tidak ada JSX, virtual DOM, compiler, atau diffing tree.

Pattern -> Proxy -> Program -> surgical DOM update

Sesuai nama HyperText Mutation Projection, teman-teman tetap tulis hypertext syntax HTML seperti biasa, binding state sehingga menangkap mutasi, maka Projection presisi langsung update.

HTMP hanya mengelola root yang kita pilih. Seluruh halaman tidak harus menjadi aplikasi HTMP.

HTML Lama Tetap Bisa Dipakai

Halaman AdminLTE tetap memiliki struktur normal:

<div class="card">
  <div class="card-header">
    <h3 class="card-title">User Directory</h3>
  </div>

  <div id="users-card-content"></div>
</div>

#users-card-content menjadi satu projection root. Navbar, sidebar, modal, dan komponen AdminLTE lain tetap menjadi HTML biasa.

Membuat Pattern Card User

Pattern ini mengisi card body, tabel, dan pagination dalam satu projection:

const userTable = new HTMP('users-card-content', /* html */ `
  <div>
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-hover align-middle m-0">
          <thead>
            <tr>
              <th>User</th>
              <th>Email</th>
              <th>Role</th>
              <th>Status</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr :for="user in pagedUsers">
              <td>{{ user.name }}</td>
              <td>{{ user.email }}</td>
              <td>
                <span :class="'badge ' + roleClass(user.role)">
                  {{ user.role }}
                </span>
              </td>
              <td>
                <span :class="'badge ' + statusClass(user.status)">
                  {{ user.status }}
                </span>
              </td>
              <td>
                <button
                  class="btn btn-sm btn-outline-secondary"
                  @click="editUser(user)"
                >
                  Edit
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="card-footer">
      Showing {{ rangeStart }} to {{ rangeEnd }} of {{ totalUsers }} users

      <select @change="changePageSize(e)">
        <option :for="size in pageSizes" :value="size">
          {{ size }}
        </option>
      </select>

      <button @click="previousPage()">Previous</button>
      <button :for="pageNumber in pages" @click="goToPage(pageNumber)">
        {{ pageNumber }}
      </button>
      <button @click="nextPage()">Next</button>
    </div>
  </div>
`);

Perhatikan bahwa data user tidak menyimpan class CSS. Data tetap fokus pada domain aplikasi. Misal aplikasi teman-teman bisa fetch atau GET dari server berupa json update ke proxy.user

const users = [
  {
    id: 1,
    name: 'Alexander Pierce',
    email: 'alexander.pierce@example.com',
    role: 'Administrator',
    status: 'Active'
  },
  {
    id: 2,
    name: 'Sarah Bullock',
    email: 'sarah.bullock@example.com',
    role: 'Editor',
    status: 'Active'
  }
];

Class AdminLTE diselesaikan oleh helper presentation, jadi kita bisa menggunakan object alih-alih if else atau switch:

const roleClasses = {
  Administrator: 'text-bg-danger',
  Editor: 'text-bg-primary',
  Author: 'text-bg-info',
  Subscriber: 'text-bg-secondary'
};

const statusClasses = {
  Active: 'text-bg-success',
  Pending: 'text-bg-warning',
  Suspended: 'text-bg-danger'
};

State Dengan Proxy

Semua state card berada di satu Proxy:

userTable.setProxy({
  users,
  filteredUsers: users.slice(),
  pagedUsers: users.slice(0, 10),
  search: '',
  roleFilter: 'all',
  page: 1,
  pageSize: 10,
  pageSizes: [10, 50, 100],
  totalUsers: users.length,
  pages: [1],
  pageCount: 1,
  rangeStart: 1,
  rangeEnd: Math.min(10, users.length),
  roleClass: (role) => roleClasses[role] || 'text-bg-secondary',
  statusClass: (status) => statusClasses[status] || 'text-bg-secondary'
});

Efek Berantai

Ketika user mengetik pencarian, kita tidak perlu mencari row, menghapus HTML lama, atau memasang ulang event handler.

function applyFilters() {
  const search = userTable.proxy.search.trim().toLowerCase();
  const role = userTable.proxy.roleFilter;

  userTable.proxy.filteredUsers = userTable.proxy.users.filter((user) => {
    const matchesSearch = !search ||
      `${user.name} ${user.email}`.toLowerCase().includes(search);

    const matchesRole = role === 'all' ||
      user.role.toLowerCase() === role;

    return matchesSearch && matchesRole;
  });

  userTable.proxy.page = 1;
  updatePagination();
}

Pagination mengambil data dari hasil filter:

function updatePagination() {
  const total = userTable.proxy.filteredUsers.length;
  const pageCount = Math.max(
    1,
    Math.ceil(total / userTable.proxy.pageSize)
  );

  userTable.proxy.totalUsers = total;
  userTable.proxy.pageCount = pageCount;
  userTable.proxy.pages = Array.from(
    { length: pageCount },
    (_, index) => index + 1
  );

  userTable.proxy.rangeStart = total === 0
    ? 0
    : (userTable.proxy.page - 1) * userTable.proxy.pageSize + 1;

  userTable.proxy.rangeEnd = Math.min(
    userTable.proxy.page * userTable.proxy.pageSize,
    total
  );

  const start = (userTable.proxy.page - 1) * userTable.proxy.pageSize;
  userTable.proxy.pagedUsers = userTable.proxy.filteredUsers.slice(
    start,
    start + userTable.proxy.pageSize
  );
}

Rantai datanya menjadi:

search / role filter
        |
        v
filteredUsers
        |
        v
pageCount, pages, range
        |
        v
pagedUsers
        |
        v
table rows and pagination

Satu perubahan state memperbarui bagian-bagian yang bergantung padanya.

Event Tanpa Manipulasi DOM

Program cukup mengubah Proxy:

userTable.setProgram({
  searchUsers: (event) => {
    userTable.proxy.search = event.target.value;
    applyFilters();
  },

  filterByRole: (event) => {
    userTable.proxy.roleFilter = event.target.value;
    applyFilters();
  },

  changePageSize: (event) => {
    userTable.proxy.pageSize = Number(event.target.value);
    userTable.proxy.page = 1;
    updatePagination();
  },

  goToPage: (page) => {
    userTable.proxy.page = page;
    updatePagination();
  },

  editUser: (user) => {
    console.log('Edit user:', user.id);
  }
});

Mount dilakukan sekali setelah pattern, state, dan program siap:

userTable.mount();

Bagaimana Dengan jQuery?

HTMP tidak harus menggantikan jQuery.

jQuery atau AdminLTE tetap dapat mengelola bagian legacy seperti:

sidebar;
modal;
dropdown;
plugin pihak ketiga;
AJAX lama;
layout global.

HTMP mengelola projection root yang dipilih. Untuk hasil search, kita tidak perlu melakukan hal seperti ini:

$('.user-row').remove();
$('#user-table tbody').html(rowsHtml);
$('.pagination').html(paginationHtml);

Cukup ubah state, lalu HTMP memperbarui projection berdasarkan registry binding.

Self-Healing

Jika DOM di dalam root berubah karena script legacy, browser extension, atau plugin pihak ketiga, HTMP dapat mencari kembali node berdasarkan marker _htmp ketika path lama tidak lagi valid.

Setelah path ditemukan, registry diperbaiki dan update berikutnya kembali menggunakan surgical update.

Demo Lengkap

Implementasi lengkap halaman AdminLTE dapat dilihat di:

examples/admin-lte/users.html

Demo tersebut memakai halaman AdminLTE asli dan hanya mengganti isi User Directory dengan satu projection HTMP.

Penutup

HTMP cocok untuk aplikasi yang sudah memiliki HTML, CSS, dan plugin legacy. Kita tidak perlu memindahkan seluruh aplikasi ke framework baru untuk mendapatkan reaktivitas.

Mulai dari satu card. Tambahkan Proxy. Hubungkan event ke state. Biarkan HTMP mengurus projection DOM.

HTML tetap menjadi struktur. Proxy menjadi sumber data. HTMP menjaga projection tetap sinkron.

Reactivity Without the Framework: How to Get React-Like Behavior in a Single HTML File

Erlangga Satria — Mon, 14 Sep 2026 13:04:29 +0000

Copy the code below into test.html, open it in your browser, and you have a reactive app running from a static file. No build step. No npm install. No server. Just HTML and a 2.9 kB library.

The Problem: Reactivity Shouldn't Require a Framework

Modern web development has a secret: to get simple reactivity—a counter, a todo list, a form that updates live—you often need:

A build tool (Vite, Webpack)
A package manager (npm, yarn)
A framework (React, Vue, Angular)
A state management library (Redux, Pinia)
40+ kB of JavaScript

And after all that, you still have to learn JSX, hooks, lifecycle methods, and a dozen other concepts.

For many developers—especially those in PHP, WordPress, or legacy environments—this is overkill. They just want a button that updates a count, a list that adds items, a form that feels alive.

That's where HTMP comes in.

The Solution: HTMP — HyperText Mutation & Projection

HTMP is a zero-dependency, browser-native reactive UI engine built on three pillars:

Pattern – your HTML blueprint, parsed once by the browser's DOMParser
Proxy – reactive state via native Proxy
Program – your methods and event handlers

It weighs 2.9 kB gzipped. It has no dependencies. It works in any browser. And you can run it from a file:// URL.

No build. No npm. No framework.

Try It Yourself (30 Seconds)

Create a file called test.html on your desktop.
Paste the code below into it.
Save and double-click the file.


<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    .done { text-decoration: line-through; color: gray; }
    button { cursor: pointer; margin: 2px; }
  </style>
</head>
<body>
  <button onclick="app.unmount()">Unmount App</button>
  <button onclick="app.remount()">Remount App</button>
  <div id="app"></div>

  <script type="module">
    import { HTMP } from 'https://unpkg.com/htm-projection@latest/dist/esm/index.js';

    const pattern = `
      <div>
        <h1>{{ title }}</h1>
        <input type="text" @input="changeTitle(e)" placeholder="Type title..." />

        <p>Count: {{ count }}</p>
        <button @click="increment()">Increment</button>

        <hr>

        <p><i>{{ todos.length === 0 ? 'No todos yet. Add one below!' : '' }}</i></p>
        <input type="text" @input="changeInput(e)" :value="inputTodo" placeholder="New task..." />
        <button @click="addTodo()">Add Todo</button>

        <ul>
          <li :for="todo in todos">
            <span :class="todo.done ? 'done' : ''">{{ todo.text }}</span>
            <button @click="finishTodo(todo)">{{ todo.done ? 'Undo' : 'Finish' }}</button>
            <button @click="deleteTodo(todo)">Delete</button>
          </li>
        </ul>                
      </div>
    `;

    const app = new HTMP('app', pattern);

    app.setProxy({
      title: "",
      count: 0,
      inputTodo: '',
      todos: []
    });

    app.setProgram({
      changeTitle: (e) => { app.proxy.title = e.target.value; },
      increment: () => { app.proxy.count++; },
      changeInput: (e) => { app.proxy.inputTodo = e.target.value; },

      addTodo: () => {
        if (!app.proxy.inputTodo.trim()) return;
        app.proxy.todos = [...app.proxy.todos, { id: Date.now(), text: app.proxy.inputTodo, done: false }];
        app.proxy.inputTodo = '';
      },

      finishTodo: (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();
    window.app = app;
  </script>
</body>
</html>

Open it in your browser. You'll see:

A title that updates as you type.
A counter that increments.
A todo list that adds, finishes, and deletes items.
Buttons to unmount and remount the entire app—without losing state.

All from a static file. No server. No build.

Why This Works (The 3 Pillars)

P1 Pattern — The HTML Blueprint

HTMP parses your HTML string once using the browser's native DOMParser. Every dynamic binding— {{ }}, :for, :class, @click —is registered with a path to its DOM node.


<li :for="todo in todos">
  <span :class="todo.done ? 'done' : ''">{{ todo.text }}</span>
</li>

No JSX. No compiler. Just HTML.

P2 Proxy — The Reactive State

State lives in a Proxy object. When you change a property, HTMP knows exactly which bindings need updating.


app.proxy.todos = [...app.proxy.todos, newTodo];

No diffing. No virtual DOM. Just a proxy trap.

P3 Program — Your Methods

Event handlers are plain JavaScript functions. No hooks, no lifecycle methods.


app.setProgram({
  addTodo: () => {
    app.proxy.todos = [...app.proxy.todos, newTodo];
  }
});

No useState. No useEffect. Just functions.

The Magic: Slot-Based Rendering

Notice this line in the pattern:


<p><i>{{ todos.length === 0 ? 'No todos yet. Add one below!' : '' }}</i></p>

In React or Vue, you'd need a conditional (v-if, {condition && <p>}) to avoid rendering an empty element. In HTMP, the pattern is always there—the expression just evaluates to an empty string. The <p> remains, but it's invisible because it has no content.

No conditional rendering needed. The template is stable. State fills the slots.

The Bonus: Unmount & Remount

HTMP includes a lifecycle: mount(), unmount(), remount(), destroy().

In the example, the buttons let you unmount the app (remove it from the DOM) and remount it (put it back)—without losing state. This is perfect for SPAs or for widgets that need to be hidden and shown.

How It Compares

Feature	React	Vue	HTMX	HTMP
Build step	Yes	Optional	No	No
npm install	Yes	Yes	No	No
Bundle size	~40 kB	~30 kB	~14 kB	2.9 kB
Dependencies	Many	Many	0	0
Reactivity	Yes	Yes	No	Yes
Works from file://	No	No	Yes	Yes
Learning curve	High	Medium	Low	Very Low

HTMP is smaller than HTMX and gives you true client-side reactivity—without a build step.

Who Is This For?

PHP / Laravel / CodeIgniter developers who want reactivity without leaving their stack.
WordPress developers who need interactive widgets in a legacy environment.
jQuery users who want to modernize without learning React.
Anyone who needs a small, fast, reactive UI for a widget, a form, or a simple SPA.
AI agents – HTMP is so intuitive that LLMs can generate and refactor it without prior training.

Try It Live

Want to see more? These examples run entirely in your browser:

Basic Example – Title editor, counter, todo list.

Multi-Step Form – Step-by-step form with validation.

SPA Ticket App – Routing with History API and 404 fallback.

Note Guard with Polaris Runtime – Integration with a workflow engine.

Get Started


npm install htm-projection

Or use it directly from CDN:


<script type="module">
  import { HTMP } from 'https://unpkg.com/htm-projection@latest/dist/esm/index.js';
</script>

GitHub: github.com/erlanggasatria-source/HTMP

npm: npmjs.com/package/htm-projection

BundlePhobia: 2.9 kB gzipped, zero dependencies.

The Bottom Line

Reactivity should not require a framework.

HTMP proves that you can have React-like reactivity with just HTML, a tiny proxy-based engine, and no build step. It's not a replacement for React or Vue in large applications—but for the thousands of smaller projects, widgets, and legacy integrations, it's a breath of fresh air.

Copy the code, save it as test.html, open it. That's it.

Welcome to reactivity without the weight.

How I ended up with a 2.9 kB GZip reactive UI engine that runs from a static file

Erlangga Satria — Mon, 14 Sep 2026 04:17:55 +0000

A few weeks ago, I was working on a side project. Nothing fancy — just a small dashboard with a form, a list, and a few buttons. The kind of thing that should take an afternoon.

But I caught myself opening npm install react react-dom react-router-dom. Then Vite. Then TypeScript config. Then a state management library. Then a build pipeline.

For a form.

I closed the terminal. Something felt wrong. I've been writing JavaScript for years — I know how to do this without a framework. But every time I reach for vanilla, I end up with the same routine:

const el = document.createElement('li');
el.textContent = todo.text;
el.className = todo.done ? 'done' : '';
document.getElementById('list').appendChild(el);

It works. And some friends of mine, still using JQuery instead.

The Experiment

I started asking a simple question:

What if I could parse HTML once, register every dynamic part, and then update only the pieces that change?

No virtual DOM. No diffing. No compiler. Just the browser's own tools.

Three APIs came to mind:

DOMParser — the browser can already parse HTML into a DOM tree. I don't need a template compiler like htm.
Proxy — JavaScript's native reactive primitive. Every property change can be intercepted.
Child index paths — if I know the path to a node ([5, 0, 0]), I can update it directly.

So I wrote a prototype. It was rough — about 200 lines. But it worked:

HTML string → parsed into a DOM tree.

Every {{ }}, :for, @click, :class → registered with a path.

State changes → only the affected bindings update.

No diffing. No re-render. Just surgical DOM updates.

I called it HTMP— HyperText Mutation & Projection.

What I Ended Up With

Two weeks later, after some iteration, I had this:

import { HTMP } from 'https://unpkg.com/htm-projection@latest/dist/esm/index.js';

const pattern = `
  <div>
    <h1>{{ title }}</h1>
    <input type="text" @input="changeTitle(e)" placeholder="Type title..." />
    <p>Count: {{ count }}</p>
    <button @click="increment()">Increment</button>
    <ul>
      <li :for="todo in todos">
        <span :class="todo.done ? 'done' : ''">{{ todo.text }}</span>
        <button @click="finishTodo(todo)">Finish</button>
        <button @click="deleteTodo(todo)">Delete</button>
      </li>
    </ul>
  </div>
`;

const app = new HTMP('app', pattern);

app.setProxy({
  title: '',
  count: 0,
  todos: []
});

app.setProgram({
  changeTitle: (e) => { app.proxy.title = e.target.value; },
  increment: () => { app.proxy.count++; },
  finishTodo: (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();

That's it. No JSX. No hooks. No build step. No npm install.

It weighed 2.9 kB gzipped.

Try It Right Now (30 Seconds)

I want you to try this. Not because I'm selling anything — just because I want to see if it works for someone else.

Step 1: Create a file called test.html on your desktop.

Step 2: Paste this into it:


<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    .done { text-decoration: line-through; color: gray; }
    button { cursor: pointer; margin: 2px; }
  </style>
</head>
<body>
  <button onclick="app.unmount()">Unmount</button>
  <button onclick="app.remount()">Remount</button>
  <div id="app"></div>

  <script type="module">
    import { HTMP } from 'https://unpkg.com/htm-projection@latest/dist/esm/index.js';

    const pattern = `
      <div>
        <h1>{{ title }}</h1>
        <input type="text" @input="changeTitle(e)" placeholder="Type title..." />
        <p>Count: {{ count }}</p>
        <button @click="increment()">Increment</button>
        <hr>
        <p><i>{{ todos.length === 0 ? 'No todos yet.' : '' }}</i></p>
        <input type="text" @input="changeInput(e)" :value="inputTodo" placeholder="New task..." />
        <button @click="addTodo()">Add Todo</button>
        <ul>
          <li :for="todo in todos">
            <span :class="todo.done ? 'done' : ''">{{ todo.text }}</span>
            <button @click="finishTodo(todo)">{{ todo.done ? 'Undo' : 'Finish' }}</button>
            <button @click="deleteTodo(todo)">Delete</button>
          </li>
        </ul>
      </div>
    `;

    const app = new HTMP('app', pattern);

    app.setProxy({
      title: '',
      count: 0,
      inputTodo: '',
      todos: []
    });

    app.setProgram({
      changeTitle: (e) => { app.proxy.title = e.target.value; },
      increment: () => { app.proxy.count++; },
      changeInput: (e) => { app.proxy.inputTodo = e.target.value; },
      addTodo: () => {
        if (!app.proxy.inputTodo.trim()) return;
        app.proxy.todos = [...app.proxy.todos, { id: Date.now(), text: app.proxy.inputTodo, done: false }];
        app.proxy.inputTodo = '';
      },
      finishTodo: (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();
    window.app = app;
  </script>
</body>
</html>

Step 3: Save it. Double-click the file, now its run in your browser.

Step 4: Type a title. Increment the counter. Add a todo. Finish it. Delete it.

Step 5: Click "Unmount" — the app disappears. Click "Remount" — it comes back with state intact.

No server. No npm. No build. Just a static HTML file running a reactive app.

If it works, you'll understand in 30 seconds why I got excited.

If it doesn't work, tell me — I want to know.

What I Learned Along the Way

This experiment taught me a few things:

The browser already has everything.
DOMParser parses HTML. Proxy handles reactivity. addEventListener handles events. I didn't need to invent anything — just connect what was already there.
Less code means fewer bugs.
The entire engine is a few hundred lines. No virtual DOM, no diffing algorithm, no compiler. Less surface area for bugs.
Constraint drives creativity.
I forced myself to use only browser APIs. No dependencies. That constraint led to a design that's smaller than HTMX (which is server-rendered) and smaller than snabbdom (which is a VDOM library).
It just works — even for AI agents.
I asked a coding agent with zero knowledge of HTMP to learn README.md and API.md, then build an SPA with routing implements only what browser already have: history API. It did — no hallucination, no debugging. Because the pattern is HTML, and agents already know HTML.

What This Isn't

I want to be honest. HTMP isn't for everything.

Not a React replacement for large applications with complex state. But I tried it.

Not a Vue replacement for teams already invested in the ecosystem.

Not a HTMX replacement for server-rendered content sites.

It's for the in-between:

A form that needs reactivity usually use JQuery and some library like notification library, but doesn't need React.

A widget embedded in a PHP or WordPress page.

A small SPA that needs routing but not a framework.

A legacy project where npm install isn't an option.

Where It Stands

HTMP is at v1.0.1. as this article wrote. It has:

4 live examples (basic, form, SPA, note-guard)

Smoke tests

Zero dependencies

2.9 kB gzipped

Verified by BundlePhobia

Works in any browser

I don't know if anyone else will find it useful. But I built it for myself, and it solved my problem. If it solves yours too — great.

If you tried the test.html and it worked, I'd love to hear what you think.

Links

GitHub: github.com/erlanggasatria-source/HTMP

npm: npmjs.com/package/htm-projection

I'm not a framework author. I'm just a developer who got tired of VDOM and decided to try something simpler. If you're curious — copy the code, save it as test.html, and open it. That's the whole point.

DEV Community: Erlangga Satria

Hybrid Architecture: Fast Server Rendering Transitioning to Reactive SPA with Dual Response

Why This Approach?

Architecture Flow Diagram

The Client Library: HTMP

Let's Discuss!

Two Potential Bugs, One Fix: Price of 0.4 kB in a Reactive UI Engine

Test for AdminLTE

The Fixes (Both Used Native Browser APIs)

What It Costs

Native along the way

New Possibility after tables loop active and self healing

Membuat HTML AdminLTE Menjadi Reaktif dengan HTMP

Membuat HTML AdminLTE Menjadi Reaktif dengan HTMP

Apa Itu HTMP?

HTML Lama Tetap Bisa Dipakai

Membuat Pattern Card User

State Dengan Proxy

Efek Berantai

Event Tanpa Manipulasi DOM

Bagaimana Dengan jQuery?

Self-Healing

Demo Lengkap

Penutup

Reactivity Without the Framework: How to Get React-Like Behavior in a Single HTML File

The Problem: Reactivity Shouldn't Require a Framework

That's where HTMP comes in.

The Solution: HTMP — HyperText Mutation & Projection

Try It Yourself (30 Seconds)

Why This Works (The 3 Pillars)

P1 Pattern — The HTML Blueprint

P2 Proxy — The Reactive State

P3 Program — Your Methods

The Magic: Slot-Based Rendering

The Bonus: Unmount & Remount

Get Started

The Bottom Line

How I ended up with a 2.9 kB GZip reactive UI engine that runs from a static file

The Experiment

Three APIs came to mind:

What I Ended Up With

Try It Right Now (30 Seconds)

What I Learned Along the Way

Where It Stands

Links

Test for `AdminLTE`