Introduction

OTF Web compiles JSX directly into imperative native DOM operations. There is no virtual DOM and no diffing: every component compiles to a standard Custom Element, and a state change updates only the DOM node bound to it.

Why OTF Web

• No virtual DOM — the compiler emits exactly the DOM calls a view requires and binds each update to the node it affects. No reconciliation loop runs at runtime.

• Standards-based components — every component is a real HTMLElement, usable in any page, with or without a framework.

• Fine-grained reactivity — the $state, $derived, and $effect macros wire dependencies at compile time, so application code never handles .value directly.

• Full-stack by default — file-based routing and layouts, middleware and API routes, route loaders and cookies, client-side route guards, plus static generation, server rendering, 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.

The button above is that snippet, compiled and running on this page — click it.