rxfy (/ɑɹ ɪks faɪ/) is a reactive data-flow layer for your UI: declare typed models, states, and normalized stores as Observables, and scale from a client-only store to a fully live app with server-side rendering and real-time updates. It's built for consistency and granular reactivity at no extra cost.
rxfy is built on four principles:
- Every entity lives in a normalized store, accessed granularly by its id; an update reaches every subscriber automatically.
- Each page has its own state composed with the data from normalized stores; components are the granular consumers of that state — each updates only when the data it reads changes.
- Values unwrap late: data travels through the app still wrapped as Observables, only the leaf component that renders a value unwraps it, and a write to the store never unwraps anything.
- States and stores are serializable: rxfy has first-class Server-Side Rendering (SSR) support.
Why rxfy? explains the thinking behind this design.
Documentation: rxfy.vanya2h.me
Agent skills
# client-only store setup
npx skills add vanya2h/rxfy --skill rxfy
# live-app (framework) setup
npx skills add vanya2h/rxfy --skill rxfy-frameworkInstalls one of two agent skills for AI coding assistants — rxfy (store + React + SSR) or rxfy-framework (everything in rxfy plus the real-time layer). Install the one matching your setup — never both. See Agent Skills.
Install
npm install rxfy
# peer deps: rxjs zod lodashLinks
- Getting Started
- Model —
createModel,array,single - State —
defineState, plain value fields, mutations - Atom —
createAtom - Lens —
createLens,keyLens - Normalization
- Server-Side Rendering —
dehydrate,hydrate,hydrationScript - rxfy-react — React bindings