LOCAL-FIRST · DATA INFRASTRUCTURE · OFFLINE RESILIENCE

Give your web application local memory.

Flux keeps data available in the browser, coordinates it across tabs, and keeps it synchronized with your backend as the network changes.

Your existing backend stays in place. Flux changes how your application uses it.

  • Local data
  • Offline changes
  • Tab coordination
  • Sync on reconnect
BackendFluxTab 1onlineTab 2onlineTab 3offline
Works with→
Supabase•
Socket.io•
PostgreSQL•
SQLite•
MongoDB•
SSE•
WebSocket•
Firebase•
GraphQL•
Redis•
Zustand•
Redux•
Jotai•
Stunk•
Works with→
Supabase•
Socket.io•
PostgreSQL•
SQLite•
MongoDB•
SSE•
WebSocket•
Firebase•
GraphQL•
Redis•
Zustand•
Redux•
Jotai•
Stunk•

Your app has no memory.So every visit starts from zero.

Every tab. Every refresh. Every session.

The browser can hold your application data, but most apps never let it. Each tab, refresh and session asks your server for data the browser had moments ago, and a dropped connection leaves your users with nothing to work with.

Local-first changes that. The browser keeps the data, and every tab shares it. An update in one tab shows up in the others at once, and changes made offline wait until the connection returns. Your server only moves when something actually changes.

That is Flux.
SYSTEM STATE: NO LOCAL MEMORY
FLOOD
GET/
20018ms
GET/about
20018ms
GET/contact
20018ms
GET/pricing
20018ms
LOCKflux:bootstrap:lead -> Tab 1 elected
3040ms
POST/api/bootstrap (seeds all stores)
20045ms
LOCALTab 2, Tab 3 served from local data
HIT0ms
Server Requests: REPEATED READS EVERY VISIT
Thread_ID: FX-801
Capabilities

Everything between your backend and your UI handled.

Instant reads after cold boot

Once your application loads the initial data envelope, Flux pre populates your local stores directly from disk before components even mount. Enjoy zero layout shifts and zero spinners on any return visit.

Tabs that stay in sync

Tabs talk to each other with signals. An update made in one tab shows up in every other open tab immediately, with no refresh. A single elected tab makes the network request while the rest hydrate from local data, so ten tabs open still means one server hit.

Delta catch up on reconnect

When a disconnected browser returns online, the leader tab passes sync anchors to the adapter. Your server streams only the changes missed during the gap instead of running a heavy, full database re bootstrap.

Mutations that survive everything

Edits made offline flow through a resilient three layer fallback pipeline. Your data stays safe through unexpected tab closures, mobile browser crashes, and aggressive OS sleep cycles.

Conflict detection before writing

If a record changes on the server while a user edits it offline, a precise two pass handshake traps the collision before touching your ledger. Resolve conflicts cleanly on your own terms.

Structural multi tenant isolation

Enforce firm data boundaries on shared public machines. Private data channels, cache nodes, and queued mutations are scoped per authenticated identity and scrubbed the moment a user logs out.

PWA Infrastructure

Your app is already a PWA.
Flux turns it on.

Flux handles the complex web primitives behind the scenes: the background Service Worker layer, namespaced local cache lifecycles, and predictive asset warming. When a page mounts, data chunks arrive in a single bootstrap request so requests never stack up.

The one step left on your side is static: provide a standard manifest.json with your application identity and icons.

  • Instant reads from local data after application cold boot
  • Flawless offline execution across dynamic templates the user has never opened
  • Updates made in one tab reach every other open tab immediately
  • Meets browser and mobile PWA installability requirements out of the box
  • Survives flaky connectivity or dropped tunnels without exposing broken UI states
next.config.ts
import type { NextConfig } from 'next'
import { withFlux } from '@tsworldtech/flux-next/plugin'
const nextConfig: NextConfig = {}
export default withFlux({
precacheRoutes: ['/', '/offline'],
offlineShell: '/offline',
storagePrefix: 'myapp',
dynamicRoutePrefixes: ['/products/', '/blog/'],
})(nextConfig)
Fewer Server Requests

Local memory means
fewer trips to your server.

When the app keeps its data locally, tabs and return visits stop asking your server for what it already sent. Less load on your infrastructure, your database connections and your serverless functions follows from that.

Flux serves repeat reads from local data and lets one elected tab fetch for all the others, so duplicate requests never reach your gateway.

10,000 DAU
100 DAU100,000 DAU
Without Flux150,000
Daily server readsEvery duplicate tab, manual page refresh, and refetch cycle.
With Flux10,000
Daily server readsOne bootstrap fetch per user. Other tabs read local data.
140,000 Requests AvoidedServed locally every day
Saves 4,200,000 read events / mo

Illustrative model: assumes 15 reads per user per day without Flux and 1 with it. Your numbers will vary.

Architecture

One engine, three primitives. Nothing else to configure.

// next.config.ts — Service Worker Injection import type { NextConfig } from 'next' import { withFlux } from '@tsworldtech/flux-next/plugin' const nextConfig: NextConfig = { // ...your existing Next.js config } export default withFlux({ precacheRoutes: ['/', '/dashboard', '/blog', '/offline'], offlineShell: '/offline', storagePrefix: 'flux-cache', syncTags: ['flux:sync:default'], dynamicRoutePrefixes: ['/blog/'] })(nextConfig)
01

Hydrate From Disk

Every registered store reads its IndexedDB envelope in parallel before any component mounts — a 2000ms hard timeout guarantees the app never blocks on cache.

02

Namespace Isolation

'user'-scoped stores resolve to keys namespaced per tenant in IndexedDB, structurally separate from global data — cleared on logout, self-healed on next boot.

03

Single-Packet Bootstrap

One leader tab fires one network request per scope. Follower tabs hydrate from disk instead of duplicating the fetch.

04

Live Delta Sync

Reconnects stream only what changed while offline, using per-channel sync anchors — never a full re-fetch of the dataset.

How it Compares

Most tools solve one layer.
Flux is the whole local-first stack.

Architectural FeatureFetching LibraryPersist OnlySW ToolkitSync ServiceFlux Engine
Leader Election (Cross Tab Bootstrap)Partial
Live Cross Tab Updates (Signals, No Refresh)PartialPartial
Realtime Leader Delegation (1 Socket Across Tabs)
Mutation Pipeline (Debounce and Coalesce)Partial
Two Pass Handshake Conflict DetectionPartial
Universal Conflict Clearinghouse Register
Dual Transport Job Tracker SystemPartial
Safari Blob Eviction URL RecoveryPartial
Dynamic Route Offline VirtualizationPartial
Per Channel Sync Anchors (Delta Only Reconnect)Partial
Multi Tenant Session Isolation (Structural + Boot Sweep)
Database Agnostic Client Integration
System Boundaries

What Flux does not do, and why that matters.

Not server-side Redis

Flux doesn't replace Redis for distributed locks, server-side job queues, or server-side sessions. Those stay on your backend exactly as they are today.

Not rate limiting or DDoS protection

The Mutation Pipeline shapes and conditions client-side traffic before it leaves the device, deduplicating spam clicks, coalescing rapid edits. It doesn't stop a direct API call from Postman or curl. Rate limiting and DDoS protection stay server-side.

Not server-to-server communication

Flux runs entirely in the browser. It has no role in how your own backend services talk to each other, and makes no server-to-server calls on your behalf.

Not for financial ledger writes

Wire transfers and direct debits must stay synchronous and server authoritative , never queued. The offline queue is for UI-layer mutations like preference changes, profile edits, and KYC updates, not ledger transactions.

Not authentication

Flux isolates the client-side cache by userId once an identity exists, it never establishes that identity. Session and auth validation remain entirely server-side.

Pricing

One engine. Four ways to run it.

Every tier ships the same offline-resilient core. Start free, stay free on localhost and preview deployments, and pay only once you're shipping features to production.

Free

$0/ forever

Core IndexedDB engine, SNAPSHOT/COLLECTION_ALL caching, and the offline write queue, production-ready from day one.

  • 10k monthly events quota
  • 1 production domain
  • SNAPSHOT + COLLECTION_ALL ingestion
  • Basic service worker caching
  • Single fire-and-forget queue replay
Most Popular

Starter

$9/ app / month

The full mutation pipeline, conflict resolution, and complete multi-tenant session security, everything Flux does, on a single production domain.

  • 100k monthly events quota
  • 1 production domain
  • Parallel image prehydration
  • Safari BlobRegistry eviction fix
  • Cross-tab Web Locks + bootstrap leader election
  • LRU cache strategy
  • Video prefetch
  • Clock skew correction
  • Mutation pipeline (coalesce/debounce)
  • Multiple offline queue channels
  • Job tracker (realtime + polling)
  • Two-pass handshake replay
  • Universal conflict register
  • Full multi-tenant session security (boot sweep + cross-tab teardown)

Pro

$19/ app / month

Same engine as Starter, unlocked across multiple production domains with 5x the event quota, for teams running more than one app off one key.

  • 500k monthly events quota
  • Multiple production domains
  • All Starter tier capabilities
  • Email support

Enterprise

$199+/ month flat

Everything in Pro, uncapped, for teams running at scale.

  • Unlimited monthly events
  • Unlimited apps under one key
  • All Pro tier capabilities
  • Usage dashboard + SLA
  • Slack support
  • Priority key-leak scanning

Free on localhost and preview deployments (*.vercel.app, *.netlify.app, *.pages.dev) — no console watermark in any dev environment.

Quick Start

Add it in five minutes.

01 / Install Core Bundles

Add the core engine, the Next.js plugin, and a realtime adapter to your workspace dependencies.

bash
npm install @tsworldtech/flux @tsworldtech/flux-next @tsworldtech/flux-supabase

02 / Wrap Your Next Config

Wrap your existing Next.js config to inject the service worker and pre-warm dynamic route chunks.

typescript
// next.config.ts import type { NextConfig } from 'next' import { withFlux } from '@tsworldtech/flux-next/plugin' const nextConfig: NextConfig = { // ...your existing Next.js config } export default withFlux({ precacheRoutes: ['/', '/offline'], offlineShell: '/offline', dynamicRoutePrefixes: ['/products/', '/blog/'] })(nextConfig)

03 / Wrap Your Root Layout

Mount FluxProvider around your app to run hydrate() and register the service worker on boot.

tsx
// app/layout.tsx import { FluxProvider } from '@tsworldtech/flux-next' import { engine } from '@/lib/flux' export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <FluxProvider engine={engine}> {children} </FluxProvider> ) }

Give your web application local memory.
Keep your backend exactly where it is.

Flux is free to install. Free to develop. Built for production.

Powered by Flux