Satus2

A lightweight UI framework for building browser extension interfaces — popups, options pages, sidepanels, and devtools panels.

Satus2 is a reactive, plugin-based framework purpose-built for the Chrome/Firefox extension environment. It handles reactivity, rendering, routing, storage sync, cross-context messaging, and theming — all in a single cohesive package with no external dependencies.

Features

• Reactive store — Proxy-based state with fine-grained subscriptions, batching, and middleware
• Declarative renderer — Skeleton-object rendering model with automatic garbage collection
• Plugin architecture — Install only what you need (ThemePlugin, RouterPlugin, StoragePlugin, BridgePlugin, etc.)
• JSX support — Optional hyperscript layer (h / Fragment) for JSX-style authoring
• Cross-context messaging — Bridge (runtime messages), IPC (long-lived ports), Mesh (background state sync), RPC (background function calls)
• Theme engine — Light/dark/auto modes with named browser presets (chrome, firefox, safari, minimal) and density settings
• Built-in components — Button, Toggle, Input, Select, Modal, Tabs, Tooltip, and more via CommonComponentsPlugin
• Accessibility — Focus trapping, roving tabindex, ARIA live regions
• DevTools — Time-travel debugger with step-back/forward and a mountable inspector widget

Install

npm install satus2

Or import directly as an ES module from your extension's source.

Quick Start

import satus2, { FullPlugin } from 'satus2';

// FullPlugin installs: Theme, Router, Toast, A11y, Storage, Bridge, IPC, Mesh, RPC, CommonComponents
satus2.use(FullPlugin);

// Set initial state
satus2.store.user = { name: 'Ada', premium: false };

// Render a component
satus2.render({ component: 'div', text: 'Hello from Satus2!' }, document.body);

// React to state changes
satus2.bind('user.name', name => console.log('Name changed:', name));

Core Concepts

| Concept | API | |---|---| | Reactive state | satus2.store.key = value | | Subscribe | satus2.bind('key', cb) | | Signals | satus2.signal(initialValue) | | Effects | satus2.effect(() => { ... }) | | Render | satus2.render(skeleton, container) | | Navigate | satus2.router.push('/settings') | | Storage | satus2.storage.get('key') | | Messaging | satus2.bridge.send('action', payload) | | Toast | satus2.toast.success('Saved!') | | Theme | satus2.theme.apply('chrome', { mode: 'dark' }) |

Plugin System

import { createFramework, StoragePlugin, BridgePlugin, ThemePlugin } from 'satus2';

const fw = createFramework();
fw.use(ThemePlugin);
fw.use(StoragePlugin);
fw.use(BridgePlugin);

Every plugin is a plain function (fw) => void, making custom plugins trivial to write.

License

MIT — MIT License