📖 Introduction#

Le Truc adds a reactive layer to server-rendered HTML. Keep your existing backend. Le Truc wires type-safe component properties directly to DOM updates in the browser. It needs no re-rendering step and no JavaScript server.

What is Le Truc?#

We Can Have Nice Things!

Embrace the Web Platform
Use any server-side technology to render HTML
Type-safe reactive components
Fine-grained DOM updates — no VDOM, no diffing
Core under 9 kB gzipped, tree-shakeable extensions

HTML First.

Le Truc assumes you start with semantic HTML. You add behavior on top:

html

<hello-world>
  <p>Hello, <span>Alice</span>!</p>
</hello-world>

This approach gives you:

Better SEO
Faster initial page loads
Progressive enhancement — the page still works when JavaScript fails

Add JavaScript.

Add JavaScript to progressively enhance the user experience:

import { bindText, defineComponent } from '@zeix/le-truc'

defineComponent('hello-world', ({ expose, first, watch }) => {
  const span = first('span')
  expose({ name: span.textContent ?? '' })
  watch('name', bindText(span))
})

The component is a native Custom Element. Its name property is reactive. Reading it inside an effect tracks the dependency. Writing it triggers only the affected DOM update.

Faster. Because We Do Less.

SPA frameworks (React, Vue, Angular, Svelte, Lit, etc.) render on the client. Le Truc never does. The server renders HTML. The browser shows it immediately. There is no hydration and no double templates. There is no pipeline from database to JSON to JavaScript to HTML.
Hypermedia frameworks (HTMX, Datastar) avoid client rendering. They fetch new HTML from the server on every state change. Le Truc updates state locally. It sends a network request only when the logic needs data from the server.
Le Truc sets up event listeners and a signal graph. It causes no layout shifts.

Minimal Size.

Le Truc adds few abstractions, so the library stays small. The core is under 9 kB gzipped. Extensions are fully tree-shakeable.

HTML, CSS, and JavaScript already solve most of the problem. Le Truc adds what is missing: component boundaries, compile-time type safety, and predictable reactive updates without tight coupling.