Introduction
Reactive values with get() and subscribe(); writable values also have set().
Seitu gives stores, browser storage, and browser state one small API. Use a handle in plain TypeScript or subscribe to it in React, Vue, Solid, or Svelte.
Install
npm install seituImport stores from seitu, browser primitives from seitu/web, and your framework binding from seitu/react, seitu/vue, seitu/solid, or seitu/svelte. Bindings ship in the same package. Storage values need a Standard Schema validator such as Zod, Valibot, or ArkType.
Use a handle
'use client'
import { } from 'seitu'
import { } from 'seitu/react'
const = (0) // shared by every importer
export default function () {
const = ()
return < ={() => .( => + 1)}>{}</>
}| Method | Behavior |
|---|---|
get() | Read the current value. |
subscribe(callback, { immediate? }) | Receive changes; returns an unsubscribe function. |
set(value | updater) | Change a writable value. Browser state such as media queries is read-only. |
Create shared handles at module scope. For a value owned by one component, pass a factory to its framework's useSubscription binding.
Pick a primitive
| Need | Use |
|---|---|
| In-memory value or derived value | createStore, createComputed |
Validated localStorage or sessionStorage | createWebStorageValue for one key; createWebStorage for several |
| A persisted value the server must read | createCookieValue |
| IndexedDB data | createIndexedDb |
| Media, online, or scroll state | seitu/web |
Browser storage uses defaults during server rendering and reads persisted values after hydration. For a server-rendered persisted value, use a cookie with getServerCookies.
Building with an agent? Install the Seitu skills. Writing your own handle? See Custom primitives.
Last updated on