LOCAL-FIRST · OFFLINE RESILIENCE · ZERO INFRASTRUCTURE

The native state sync engine that slashes your server bills.

Flux handles state sync, offline resilience, and Client Side caching in one engine so your backend only hears from your app when something actually needs to change.

97%Fewer server reads
<1msRepeat visit load
1Request per Browser

Across 10,000 daily active users. Architecture, not estimate.

APIFluxTab 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•

Every time a user opens your app,your server answers.

Every tab. Every refresh. Every session.

You are paying for compute the browser could have handled efficiently. Your users are left waiting for data layers they already downloaded completely moments ago.

There is a better architecture. The browser stores it. The browser syncs it. The browser resolves it locally. Your server only moves when something actually changes.

That is Flux.
SYSTEM STATE: UNCONTROLLED NOISE
FLOOD
GET/
20018ms
GET/about
20018ms
GET/contact
20018ms
GET/pricing
20018ms
LOCKflux:bootstrap:lead -> Elected Tab 1 (Other tabs hydrate from disk)
3040ms
POST/api/bootstrap (Seeds all stores + warms SW dynamic routes)
20045ms
Inbound Traffic Impact: 15 SEPARATE READS / SEC
Thread_ID: FX-801
Capabilities

Everything between your backend and your UI handled.

Instant access 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.

One server fetch per User Browser

Our cross-tab bootstrap leader election forces a single tab to orchestrate the outbound network request while every other parallel tab hydrates synchronously from disk. Ten tabs open; your server logs one hit.

Smart Delta Catch-Up on Reconnect

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

Mutations that survive everything

Edits performed offline flow through a resilient 3-layer fallback pipeline. Your data is guaranteed safe against unexpected tab closures, mobile browser crashes, and aggressive OS sleep cycles.

Conflict detection before writing

If a record changes concurrently on the server while a user modifies 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 ironclad data boundaries on shared public machines. Private data channels, cache nodes, and queued mutations are rigidly scoped per authenticated identity and explicitly scrubbed out the moment a user logs out.

PWA Infrastructure

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

Flux orchestrates the complex web primitives entirely behind the scenes: the background Service Worker layer, namespaced local cache lifecycles, and predictive asset warming. When a page mounts, data chunks are fetched as part of a single bootstrap request to prevent request stacking.

The step remaining on your side is completely static: provide a standard manifest.json containing your application identity blueprints and application icons.

  • Instant access reads from local disk after application cold boot
  • Flawless offline execution across dynamic templates the user has never opened
  • Fulfills 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 { withFlux } from '@tsworldtech/flux-next' export default withFlux({ precacheRoutes: ['/', '/offline'], dynamicRoutePrefixes: [ '/products/', '/blog/', ], })
Server Load Reduction

Less server noise.
Measurable, not theoretical.

Your infrastructure bills, relational database connection limits, and serverless edge function invocations fall instantly.

This mitigation scales directly because Flux captures redundant reads locally, intercepting duplicate runtime cycles before traffic ever knocks on your gateway.

Adjust your traffic10,000 DAU
100 DAU100,000 DAU
Without Flux150,000
Daily server readsEvery duplicate tab, manual page refresh, and re-fetch cycle.
With Flux10,000
Daily server readsOne fetch per user browser scope. The rest never leave the hardware.
140,000 Requests StoppedIntercepted on the client every single day
Saves 4,200,000 read events / mo

Based on immediate local data hydration and leader tab synchronization rules.

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 stack.

Architectural FeatureFetching LibraryPersist-OnlySW ToolkitSync ServiceFlux Engine
Leader Election (Cross-Tab Bootstrap)Partial
Real-Time Leader Delegation (1 Socket Across Tabs)
Mutation Pipeline (Debounce/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> ) }

Your backend deserves fewer requests.
Your users deserve a faster app.

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

Powered by Flux