Offline Sync in the Browser Without a Framework

I've been building apps with IndexedDB for years. The local part works fine — store data, query it, show it on screen. The hard part is keeping that data in sync with a server when the network comes and goes.

Most tutorials show you how to build an offline app with a framework. Firebase, RxDB, WatermelonDB. Those work, but they bring their own abstractions, their own sync protocols, their own opinions.

I wanted something simpler. A database with a sync API that doesn't dictate how my backend works.

Here's the setup I landed on.

npm: npm install ctrodb
Docs: ctrodb.vercel.app/docs/sync/overview

What We're Building

A notes app that works offline. Create and edit notes on the train, in a tunnel, on a plane. When the network comes back, everything syncs automatically.

The database is ctrodb (zero-dependency, browser-based). The backend is anything that speaks HTTP.

Step 1: Database Setup

import { Database, syncPlugin, HttpTransport } from "ctrodb"

const db = new Database({
  name: "notes-app",
  schema: {
    version: 1,
    collections: {
      notes: {
        fields: {
          title: { type: "string", required: true },
          body: { type: "string" },
          updatedAt: { type: "string", default: () => new Date().toISOString() },
        },
        indexes: [{ field: "updatedAt" }],