Tarve documentation

Your view is a plain function that returns TSX. Tarve compiles it into a retained tree, diffs it against the previous one and sends only the changed nodes to the native runtime, where Taffy lays them out and Vello, D3D11 or the CPU renderer paints them.

State can live in ordinary variables. When a native event handler such as onClick or onChange runs, Tarve schedules a re-render automatically. For changes that happen outside an event (timers, network responses, file watchers) call app.update() on the handle returned by createApp.

Controls are controlled: pass the current value (checked, value, open…) and update it in the matching on…Change callback. An idle window presents zero frames.

For values that change many times a second (a clock, a progress bar, an animation), use a signal(). Passed as a text child or a style value, it is bound to that node: setting count.value sends only that field to the native runtime, with no render, diff or layout when the size stays the same. batch() groups several changes into one update, and <audio time={position}> writes the playback position into a signal.

import { Text, Window, createApp, signal } from "@tarve/core";

const time = signal(new Date().toLocaleTimeString());
setInterval(() => { time.value = new Date().toLocaleTimeString(); }, 1000);

createApp(() => (
  <Window title="Clock">
    <Text size={48}>{time}</Text>
  </Window>
));

<Scroll followTail> keeps a chat or a log at its end while content grows, until the user scrolls away; app.scrollTo(id, { y: "end", smooth: true }) scrolls a Scroll after the next layout.

Style anything with the style prop or with Tailwind classes: class="flex gap-2 p-4 hover:bg-muted" compiles to the same native style, with no CSS involved.