Skip to main content
zerotal

Documentation

Documentation / @zerotal/flow / index

index

Flow — reactive server-side rendering over WebSocket for Zerotal.

You write a Component as a server-side class: public state lives on the instance, render() returns server-rendered HTML, and methods marked expose are callable from the browser. When a user interacts, the action runs on the server, the component re-renders, and only the HTML diff is streamed back and morphed into the DOM (Alpine-style) — no client-side component code, no separate API. Snapshots that cross the wire are HMAC-signed and only exposed / locked properties are shared.

The toolkit here covers the whole authoring surface: the Component base and Layout, the decorator set (expose, locked, computed, task, validate, on, url, session, presence, shared, …), Forms, pagination, file uploads (FileUploads), realtime presence and cross-client stores, and a library of ready-made view components (Modal, Link, Flash, …).

Examples

Register the provider

// bootstrap/providers.ts
import { SessionProvider } from "@zerotal/session";
import { FlowProvider } from "@zerotal/flow";

export default [SessionProvider, FlowProvider];

A reactive counter component

import { Component, expose } from "@zerotal/flow";
import type { HtmlNode } from "@zerotal/flow";

export class Counter extends Component {
  count = 0;

  @expose increment(): void {
    this.count++;
  }

  render(): HtmlNode {
    return (
      <button flow:click="increment">
        Clicked {this.count} times
      </button>
    );
  }
}

Remarks

Components are authored in .tsx with jsxImportSource set to @zerotal/flow (see @zerotal/flow/jsx-runtime). Register FlowProvider after SessionProvider. Requires Bun ≥ 1.1.

Actions

Connections

Document head

Exposure & state

Feedback

Flash

Forms & inputs

Frames

Headless components

Other

defineStore

Re-exports defineStore

FlowStore

Re-exports FlowStore

Overlays

Persistence

Provider

Reactivity

Realtime

Snapshot

Validation