1 · Counter

The smallest possible kerf app. A signal holds the count, mount binds JSX to a DOM element, and a delegated click handler increments. Re-renders happen automatically when count.value changes.

What to look at: the render fn reads count.value inside the closure — that’s how the dependency is tracked. Reading it outside (e.g. into a const first) would not trigger re-renders.

src/main.tsx

import { signal, mount, delegate } from 'kerfjs';

const count = signal(0);

const root = document.getElementById('app')!;

mount(root, () => (
  <div class="kerf-toolbar">
    <button data-action="dec" aria-label="Decrement">−</button>
    <span class="kerf-mono" style="min-width: 3ch; text-align: center; font-size: 1.25rem;">
      {count.value}
    </span>
    <button data-action="inc" aria-label="Increment">+</button>
  </div>
));

delegate(root, 'click', '[data-action="inc"]', () => { count.value += 1; });
delegate(root, 'click', '[data-action="dec"]', () => { count.value -= 1; });