RoutierReactive data for any datastore

A fast, front-end-first data toolkit with schemas, live queries, optimistic mutations, and swappable storage plugins. No lock-in, no rewrite.

Quick Start

Why Routier?

Try the Playground

npm install @routier/core @routier/datastore @routier/memory-plugin

Live demo

A live, paginated grid in one query

This grid is a real React or Vue component running on Routier in your browser. One useQuery call sorts, pages, and subscribes, so the page stays current with no cache to invalidate and no refetch to wire up. Try restocking a row, turning on traffic, or switching frameworks: both read the same store. Then open the Routier button in the bottom-right corner: devtools shows this store's rows and every query the grid runs.

ProductGrid.tsxthe code this grid runs

import { useState } from "react";import { useQuery } from "@routier/react";import { store, type Product } from "./inventory";export function ProductGrid() {  const [page, setPage] = useState(1);  const [pageSize, setPageSize] = useState(6);  const rows = useQuery<Product[]>(    onResult =>      store.products        .sort(p => p.name)        .skip((page - 1) * pageSize)        .take(pageSize)        .subscribe()        .toArray(onResult),    [page, pageSize],  );

  const total = useQuery<number>(onResult => store.products.subscribe().count(onResult), []);  const count = total.status === "success" ? total.data : 0;  const pageCount = Math.max(1, Math.ceil(count / pageSize));  const restock = async (product: Product) => {    product.stock += 10;    await store.saveChangesAsync();  };  return (    <>      <table>        <thead>          <tr>            <th>Product</th>            <th>Category</th>            <th>Price</th>            <th>Stock</th>            <th />          </tr>        </thead>        <tbody>          {rows.status === "error" && (            <tr>              <td colSpan={5}>{String(rows.error)}</td>            </tr>          )}          {rows.status === "success" &&            rows.data.map(product => (              <tr key={product.id}>                <td>{product.name}</td>                <td>{product.category}</td>                <td>${product.price.toFixed(2)}</td>                <td>{product.stock}</td>                <td>                  <button onClick={() => restock(product)}>+10</button>                </td>              </tr>            ))}        </tbody>      </table>      <footer>        <select          value={pageSize}          onChange={event => {            setPageSize(Number(event.target.value));            setPage(1);          }}        >          <option value={6}>6 / page</option>          <option value={10}>10 / page</option>          <option value={20}>20 / page</option>        </select>        <button disabled={page === 1} onClick={() => setPage(p => p - 1)}>          ‹        </button>        <span>          Page {page} of {pageCount}        </span>        <button disabled={page >= pageCount} onClick={() => setPage(p => p + 1)}>          ›        </button>      </footer>    </>  );}

New · Devtools

See inside your store

@routier/devtools adds a drawer to your page that shows what your store holds and how every query runs. One line to set up, in React, Vue, or plain JavaScript, and stripped from production builds. It is running on this page now: click the Routier button in the bottom-right corner.

mountRoutierDevtools(store);

Set up devtools See query plans in the Lab

Your data, live
Every collection and view with a live row count, a paged table of rows, and the full value of any row. It updates as saves, syncs, and other tabs change the data.
Every query, explained
The Queries tab records each query your app runs and shows its plan: the SQL or other statement it sent, its parameters, and anything that ran in memory, and why.

What you get

Everything a data layer needs, built in

Start with a schema and a plugin. Reach for the rest when your app needs it.

📐

Powerful Schemas

Defaults, identity keys, indexes, computed properties, transforms, and property mapping. Bring your own validation with Zod or AJV.

Schema guide

🔗

Joins and Rich Queries

Inner and left joins across collections, views, stores, and plugins, plus filtering, aggregation, reusable queries, full-text search, and vector similarity.

Explore queries

🔄

Live Queries

Subscriptions push updates when data changes. Zero-config reactivity for real-time UIs with built-in change detection.

Live queries guide

🌐

Local-First Ready

Optimistic writes, history tracking, entity tagging, and sync patterns for apps that work offline and reconcile later.

Local-first guide

⚛️

React Integration

First-class hooks keep components in sync with your data. No extra state-management layer required.

React adapter

⚡

Less Work Per Row

Key lookups skip the scan. Filters run before copies. Routier generates copy functions from schemas instead of calling structuredClone.

Performance

Swappable storage

Change one line. Keep your app.

The grid above runs on the memory plugin. Moving it to IndexedDB, SQLite, or PostgreSQL means changing the plugin the store is built with, and nothing else.

import { MemoryPlugin } from "@routier/memory-plugin";class InventoryStore extends DataStore {  products = this.collection(productSchema).proxy().create();  constructor() {    super(new MemoryPlugin("inventory"));  }}

npm install @routier/memory-pluginRuns in: AnywhereMemory plugin docs →

Why Routier

The data layer you would end up building anyway

Every app grows a data abstraction: defaults, business rules, computed fields, and adapters for whatever datastore you started with. That works until you hit a performance ceiling, need local-first, or want different storage. Routier is that layer, datastore-agnostic and under your control.

Enhance, don't replace
Keep your existing datastore. Add structure with schemas and defaults, speed with indexes and caching, and better ergonomics with live queries and optimistic updates.
Swap without rewrites
Move from IndexedDB to SQLite or adopt OPFS by changing the plugin. Your app code remains unchanged.
Type checking by choice
Use Zod or AJV for validation. Routier handles transformation and persistence.
Client-first, backend-capable
Designed for the browser and local-first workflows, while remaining adaptable to backend runtimes.

Next steps

Pick your path

Build your first live query

npm install @routier/core @routier/datastore @routier/memory-plugin

Quick Start Star on GitHub

RoutierReactive data for any datastore

A live, paginated grid in one query

See inside your store

Your data, live

Every query, explained

Everything a data layer needs, built in

Powerful Schemas

Joins and Rich Queries

Live Queries

Local-First Ready

React Integration

Less Work Per Row

Change one line. Keep your app.

The data layer you would end up building anyway

Enhance, don't replace

Swap without rewrites

Type checking by choice

Client-first, backend-capable

Pick your path

Build my first app

Try it without installing

Decide whether it fits

Understand the core ideas

Use it with React

Explore real patterns

Build your first live query