Raw IndexedDB is powerful, but working with its native API directly can be painful. You have to manage database upgrades, transaction scopes, and verbose callbacks. It is easy to end up writing dozens of lines of boilerplate just to fetch a single document.

Libraries like Dexie.js make IndexedDB easier, but RxDB takes it a step further by providing a reactive database built on top of storage primitives like IndexedDB, OPFS (Origin Private File System), or LokiJS. Because it is reactive, you can subscribe to query results just like you would with a state management library.

When a document changes anywhere in the app, your UI updates automatically. This removes the need for complex global state management or manual cache invalidation.

Setting Up RxDB in a TypeScript Project

Let us walk through setting up RxDB with the IndexedDB plugin in a modern web application.

First, install the required packages:

npm install rxdb rxjs

Next, define your database schema. RxDB uses JSON Schema to validate all data before it enters the local storage engine. This ensures your local state remains clean and type-safe.

import { createRxDatabase, addRxPlugin } from 'rxdb';
import { getRxStorageDexie } from 'rxdb/plugins/storage-dexie';
import { wrappedValidateAjvStorage } from 'rxdb/plugins/validate-ajv';

// Define the schema for a notes or tasks collection
const taskSchema = {
  title: 'task schema',
  version: 0,
  primaryKey: 'id',
  type: 'object',
  properties: {
    id: {
      type: 'string',
      maxLength: 36
    },
    title: {
      type: 'string'
    },
    completed: {
      type: 'boolean'
    },
    updatedAt: {
      type: 'number'
    }
  },
  required: ['id', 'title', 'completed', 'updatedAt']
};

export async function initDatabase() {
  const db = await createRxDatabase({
    name: 'myofflineappdb',
    storage: wrappedValidateAjvStorage({
      storage: getRxStorageDexie()
    })
  });

  // Add collections
  await db.addCollections({
    tasks: {
      schema: taskSchema
    }
  });

  return db;
}

Querying and Reacting to Local Data

Once your database is initialized, interacting with it feels familiar if you have used MongoDB or Mongoose. Because RxDB is reactive, you can turn any query into an observable stream.

Here is how you can fetch and subscribe to tasks in a frontend component:

import { useEffect, useState } from 'react';

export function useTasks(db) {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    if (!db) return;

    // Subscribe to query results
    const subscription = db.tasks
      .find({
        selector: {
          completed: { $eq: false }
        },
        sort: [{ updatedAt: 'desc' }]
      })
      $.subscribe(documents => {
        setTasks(documents.map(doc => doc.toJSON()));
      });

    return () => subscription.unsubscribe();
  }, [db]);

  return tasks;
}

When a user adds or checks off a task, you simply write to the local collection:

async function addTask(db, titleText) {
  await db.tasks.insert({
    id: crypto.randomUUID(),
    title: titleText,
    completed: false,
    updatedAt: Date.now()
  });
}

Your UI updates instantly without waiting for any server response. The user experience feels snappy and native, even if they are offline on an airplane.

Syncing with a Remote Server

An offline-first app is only half-finished if it never syncs back to the cloud. RxDB provides built-in replication plugins that make it straightforward to sync local collections with a remote CouchDB-compatible endpoint, a GraphQL server, or a custom REST backend.

For most custom SaaS products, setting up a replication endpoint involves:

1. Exposing an endpoint that accepts a stream of local changes (push).
2. Exposing an endpoint that returns changes newer than a given timestamp or sequence number (pull).

RxDB handles conflict resolution, batching, and retry logic when the connection drops and reconnects.

Best Practices for Local-First Apps

If you are planning to build your next product using an offline-first approach, keep these practical tips in mind:

• Validate schemas early: Always use strict schemas so corrupted data never enters local storage.
• Handle storage quotas: Browsers have limits on IndexedDB storage. Monitor storage usage if your app handles large media files.
• Encrypt sensitive fields: If your app stores sensitive user information, use RxDB's built-in encryption plugin to secure data at rest.
• Design for conflict: When two devices edit the same record offline, make sure you have a strategy—such as last-write-wins or custom merge functions—to handle the conflict.

Summary

Building offline-first web apps with local databases like RxDB gives your users the speed, reliability, and privacy they deserve. By treating the device as the primary database and the cloud as a sync target, you can create applications that feel instant and bulletproof.

Need help architecting an offline-first web app, mobile app, or custom SaaS product for your business? Get in touch and let us build something great together.