Counter Component

Problem

You want to understand the minimal Craftit component before adding routing, directives, or shared state. A self-contained counter covers the full cycle: reactive signal, DOM binding, and event handling.

Solution

import { define, html, signal } from '@vielzeug/craftit';

define('simple-counter', {
  setup() {
    const count = signal(0);

    return () => html`
      <div>
        <button @click=${() => count.value--}>-</button>
        <strong>${count}</strong>
        <button @click=${() => count.value++}>+</button>
      </div>
    `;
  },
});