Dexie.js is a wrapper library for indexedDB - the standard database in the browser. https://dexie.org.
Why Dexie.js?
IndexedDB is the portable database for all browser engines. Dexie.js makes it fun and easy to work with.
But also:
Dexie.js is widely used by 100,000 of web sites, apps and other projects and supports all browsers, Electron for Desktop apps, Capacitor for iOS / Android apps and of course pure PWAs.
Dexie.js works around bugs in the IndexedDB implementations, giving a more stable user experience.
Need sync? Dexie Cloud adds real-time sync, auth, and collaboration on top of Dexie.js — no backend needed.
Hello World (vanilla JS)
<!DOCTYPE html>
<html>
<head>
<script type="module">
// Import Dexie
import { Dexie } from 'https://unpkg.com/dexie/dist/modern/dexie.mjs';
//
// Declare Database
//
const db = new Dexie('FriendDatabase');
db.version(1).stores({
friends: '++id, age'
});
//
// Play with it
//
try {
await db.friends.add({ name: 'Alice', age: 21 });
const youngFriends = await db.friends
.where('age')
.below(30)
.toArray();
alert(`My young friends: ${JSON.stringify(youngFriends)}`);
} catch (e) {
alert(`Oops: ${e}`);
}
</script>
</head>
</html>
Yes, it's that simple. Read the docs to get into the details.
Hello World (legacy script tags)
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/dexie/dist/dexie.js"></script>
<script>
//
// Declare Database
//
const db = new Dexie('FriendDatabase');
db.version(1).stores({
friends: '++id, age'
});
//
// Play with it
//
db.friends.add({ name: 'Alice', age: 21 }).then(() => {
return db.friends
.where('age')
.below(30)
.toArray();
}).then(youngFriends => {
alert (`My young friends: ${JSON.stringify(youngFriends)}`);
}).catch (e => {
alert(`Oops: ${e}`);
});
</script>
</head>
</html>
Hello World (React + Typescript)
Real-world apps are often built using components in various frameworks. Here's a version of Hello World written for React and Typescript. There are also links below this sample to more tutorials for different frameworks...
import React from 'react';
import { Dexie, type EntityTable } from 'dexie';
import { useLiveQuery } from 'dexie-react-hooks';
// Typing for your entities (hint is to move this to its own module)
export interface Friend {
id: number;
name: string;
age: number;
}
// Database declaration (move this to its own module also)
export const db = new Dexie('FriendDatabase') as Dexie & {
friends: EntityTable<Friend, 'id'>;
};
db.version(1).stores({
friends: '++id, age',
});
// Component:
export function MyDexieReactComponent() {
const youngFriends = useLiveQuery(() =>
db.friends
.where('age')
.below(30)
.toArray()
);
return (
<>
<h3>My young friends</h3>
<ul>
{youngFriends?.map((f) => (
<li key={f.id}>
Name: {f.name}, Age: {f.age}
</li>
))}
</ul>
<button
onClick={() => {
db.friends.add({ name: 'Alice', age: 21 });
}}
>
Add another friend
</button>
</>
);
}
Dexie has kick-ass performance. Its bulk methods take advantage of a lesser-known feature in IndexedDB that makes it possible to store stuff without listening to every onsuccess event. This speeds up the performance to a maximum.
Dexie Cloud is the easiest way to add sync, authentication, and real-time collaboration to your Dexie app. You keep writing frontend code with Dexie.js — Dexie Cloud handles the rest.
What you get:
🔄 Sync across devices — changes propagate in real time, no polling needed
🔐 Authentication — built-in user auth, no identity provider required
🛡️ Access control — share data between users with fine-grained permissions
📁 File & blob storage — store attachments alongside your structured data
✈️ Offline-first — works fully offline, syncs when back online
Getting started is just a few lines:
npm install dexie-cloud-addon
import Dexie from 'dexie';
import dexieCloud from 'dexie-cloud-addon';
const db = new Dexie('MyDatabase', { addons: [dexieCloud] });
db.version(1).stores({ items: '@id, title' });
db.cloud.configure({ databaseUrl: 'https://<your-db>.dexie.cloud' });
That's it. Your existing Dexie app now syncs. Hosted cloud or self-hosted on your own infrastructure. 👋
⚠️ These packages are legacy and no longer maintained.
If you find references to dexie-observable or dexie-syncable in tutorials, blog posts, or old code, be aware that these are deprecated sync solutions. They are not compatible with Dexie Cloud and should not be used in new projects.
For local-first sync, use dexie-cloud-addon instead. It is the modern, actively maintained solution for offline-first apps with real-time sync.
Dexie.js 是 IndexedDB 的封装库,IndexedDB 是浏览器内置的标准数据库。它让本地应用数据的操作变得简单,被数十万个网站、应用和其他项目广泛使用。