import { useLiveQuery } from "dexie-react-hooks";
import { db } from "./db";
export function TaskList() {
const tasks = useLiveQuery(
() => db.tasks.orderBy("created").toArray()
);
return (
<ul>
{tasks?.map(task =>
<li key={task.id}>{task.title}</li>
)}
</ul>
);
}
Perfect integration with React hooks and state management
Dexie is a lightweight API over IndexedDB that removes callback complexity and exposes a promise/async-friendly API.
liveQuery() keeps UI in sync with DB in real-time – components update when relevant records change, even across multiple tabs.
Indexes, transactions, and clear schema definition make it fast to query and safe to write – without wrestling with IndexedDB's raw API.
Add two-way sync, user auth, and access control on top of Dexie – without having to develop and maintain your own sync API.
Data is private by default; share selectively via 'realms', roles, and members with fine-grained access control.
Start free with OTP login out-of-the-box, scale up as users grow; manage seats in Cloud Manager with transparent pricing.
Run as SaaS or self-hosted (Node.js + PostgreSQL) when you need full control over your infrastructure.
Dexie 4 integrates better with front-end frameworks. Query the db without boilerplate and let your components mirror the database in real time.
Dexie was written to be straightforward and easy to learn. If you've ever had to work with native IndexedDB then you'll certainly appreciate Dexie's concise API.
With only a few lines of extra code, you can build a consistent, authenticated and access controlled local-first app!
const db = new Dexie('MyDatabase');
// Declare tables, IDs and indexes
db.version(1).stores({
friends: '++id, name, age'
});
// Find some old friends
const oldFriends = await db.friends
.where('age').above(75)
.toArray();
// or make a new one
await db.friends.add({
name: 'Camilla',
age: 25,
street: 'East 13:th Street',
picture: await getBlob('camilla.png')
});
import { useLiveQuery } from "dexie-react-hooks";
function FriendList() {
const friends = useLiveQuery(
() => db.friends
.where("age")
.between(18, 65)
.toArray()
);
return (
<ul>
{friends?.map(friend =>
<li key={friend.id}>
{friend.name}, {friend.age}
</li>
)}
</ul>
);
}
import dexieCloud from "dexie-cloud-addon";
const db = new Dexie('SyncedDB', {
addons: [dexieCloud]
});
db.version(1).stores({
friends: '@id, name, age' // '@' for global ID
});
db.cloud.configure({
databaseUrl: "https://yourdatabase.dexie.cloud",
requireAuth: true
});
// Now it syncs automatically! 🚀
Local Storage
Queries
Reactivity
Global Sync
The simplest possible Dexie Cloud application, built with vanilla JavaScript. It is a great starting point for building your own Dexie Cloud application.
Dexie Cloud Starter is a fully functional showcase application. Inspired by the popular MyMind app, it demonstrates how to build a collaborative note-taking application using Dexie Cloud.
An example of a Dexie Cloud application built with Svelte. It is a great starting point for building your own Dexie Cloud application using Svelte.
Ready to build offline-first apps? Start with Dexie.js for local storage, add Dexie Cloud when you need sync, auth, and collaboration. No backend required.
© 2014-2025 Awarica AB
Made with love for great people.
Read Terms & Conditions and Privacy Policy.