granthdb

Getting started with granthdb ​

Pick what you're building on and we'll take you straight to the setup for it.

ReactNext.js too — SSR-safeVueNuxt tooSvelteNo adapter neededAngularNo adapter needed
Vanilla JSNo framework — start from the tutorialNo WorkerStrict CSP, SSR, Node and tests

Already using Dexie or raw IndexedDB? Migrating from Dexie covers the codemod, the data import, and every behavioural difference worth knowing.

The three-minute version ​

Whatever the framework, the setup is the same three pieces.

1. Install.

bash
npm install granthdb @sqlite.org/sqlite-wasm

2. Declare the database. The string after each table names the primary key first, then the fields you want to query by.

js
// db.js
import Granth from 'granthdb';

export const db = new Granth('myapp', {
  worker: () => new Worker(new URL('./db.worker.js', import.meta.url), { type: 'module' }),
});

db.version(1).stores({
  friends: '++id, name, age, *tags',
});

3. Add the worker. SQLite runs off the main thread. This file is the whole of it.

js
// db.worker.js
import sqlite3InitModule from '@sqlite.org/sqlite-wasm';
import { startGranthWorker, opfsStorage, indexeddbStorage, memoryStorage } from 'granthdb/worker';

startGranthWorker({
  sqlite3InitModule,
  filename: '/myapp.sqlite3',
  storage: [opfsStorage(), indexeddbStorage(), memoryStorage()],
});

Then query it. No open() call — the first query opens the database.

js
await db.friends.add({ name: 'Ada', age: 36, tags: ['maths'] });
await db.friends.where('age').above(30).toArray();

Where to go next ​

TutorialThe full walkthrough, start to finish
SandboxWrite real queries against a real database, no install
ShowcaseA 5,000-row app you can poke at
FrameworksReact, Vue, Svelte, Angular, Solid
TanStack Query, RxJS, ZustandUsing it with the state library you already have
Replacing localStorageMoving tokens and app state off web storage