Introduction

OTF Web compiles your JSX directly into imperative native DOM operations. There is no virtual DOM and no diffing — every component becomes a standard Custom Element, and state changes update only the exact DOM node bound to them.

Why OTF Web

• Zero-VDOM — the compiler emits the exact DOM calls your view needs and binds each update to the node it touches. No reconciliation loop at runtime.

• Native components — every component is a real HTMLElement. It works in any page, with or without a framework.

• Fine-grained signals — $state, $derived, and $effect macros wire reactivity at compile time, so there is no manual .value.

• Fullstack — file-based routing and layouts, middleware and API routes, route loaders and cookies, client route guards, plus SSG, SSR, and hydration.

A first component

export default function Counter() {
  let count = $state(0);

  return <button onclick={() => count++}>Clicked {count} times</button>;
}

count is a signal. Reassigning it updates only the text node it feeds — nothing else re-runs.

That button is the snippet above, compiled and running — click it.