Skip to content
Vidact

Getting started

Introduction

Compile function components, JSX, and hooks into JavaScript that creates and updates the DOM.

Vidact compiles React function components into DOM code. You write JSX and hooks; the compiler generates the code that creates elements and updates them when their data changes. The browser runs that code with the Vidact runtime.

A component runs once per mount. State updates run the generated bindings for the affected values. The compiler identifies dependencies within each component; the runtime connects them across props, context, and component boundaries.

Here is a counter compiled by Vidact. Click the button and the number updates in place. The Counter function is never called again.

tsx
import { useState } from 'react'export function Counter() {  const [count, setCount] = useState(0)  return (    <div>      <button onClick={() => setCount((value) => value + 1)}>Increment</button>      <output>Count: {count}</output>    </div>  )}
Count: 0

How updates work

In the counter above, a click changes count. Vidact updates the existing text node inside <output>. It keeps the button, its event listener, and the rest of the component in place.

Derived values work the same way. An expression such as const total = count * price becomes an updater when the compiler can trace its dependencies. The runtime schedules that updater before bindings that read total.

See Reactivity for dependency tracking and Thinking in Vidact for what this changes in everyday component code.

React compatibility

Vidact supports a documented subset of React 19. Class components, most Children helpers, and React internals are unsupported. Events use native DOM objects, and some hooks have different semantics because components do not re-render. Read React compatibility before migrating an app or choosing a component library.

Where to go next