Fine-grained reactive UI framework with a virtual filesystem model

Documentation | API Reference

Sairin is a fine-grained reactive UI framework built around a virtual filesystem model. Every piece of state lives at a path, and reactivity flows through those paths like a living directory tree.

Features

| Feature | Description | | --------- | ------------- | | Path-Based Graph | Signals at paths like /user/name, subscribe to namespaces | | Fine-Grained Updates | Only exactly what changes gets updated | | Three Scheduling Tiers | Sync, microtask, and idle effects | | Locks and Ownership | Prevent writes from outside designated scopes | | Memory Efficient | Incremental cleanup, effect pooling, retained memory caps | | Satori Integration | Structured logging with full context |

Quick Start

import { signal, effect, path } from 'sairin';

const count = signal(path("counter", "value"), 0);

effect(() => {
  console.log("Count is now:", count.get());
});

count.set(1);  // Logs: "Count is now: 1"

Why Path-Based

Most reactive systems use a flat model:

signal -> Set<subscriber>

Sairin uses a filesystem model:

/user/name     <- signal
/user/age      <- signal
/user          <- namespace
/ui/header     <- derived, depends on /user/name

This gives you namespace subscriptions, natural scoping, and path-based debugging.

Installation

npm install @nisoku/sairin

Sairin is available on NPM!

Documentation

| Section | Description | | --------- | ------------- | | Quick Start | Your first Sairin app | | Configuration | Lock behavior and logging | | Path System | Paths, globs, and aliases | | Signals | Creating and using signals | | Effects | Running code when signals change | | Derived | Computed values that auto-update | | Batching | Grouping updates efficiently | | Locks | Preventing unauthorized writes | | API Reference | Complete API documentation |

Used By

• Sakko - A DSL compiler that uses Sairin for reactive state in compiled components

Project Structure

Sairin/
  Build/            # Source code and build config
    src/            # TypeScript source
      kernel/      # Core reactivity (signals, effects, derived)
      store/       # Reactive data structures
      flow/        # Async flow utilities
      async/       # Async patterns
      dom/         # DOM bindings
  Docs/             # Documentation (docmd)

Development

Install dependencies

cd Build && npm install

Run tests

cd Build && npm test

Type check

cd Build && npm run typecheck

Build

cd Build && npm run build

Build docs

cd ../Docs && npm run build

License

Apache License v2.0