Add-on (plugin) for connecting Dexie database with a database in the cloud, Dexie Cloud. The add-on is loaded on the client and integrates with Dexie to track changes, sync, authenticate and observe remote changes.


Install dexie-cloud-addon

npm install dexie@^4.0.1-beta.1 # Only dexie version >=4 supports dexie-cloud-addon
npm install dexie-cloud-addon@latest

Create a cloud database to sync with

Use dexie-cloud (another package) to create a database in the cloud, so that dexie-cloud-addon will have a database URL to sync with. Dexie Cloud has a forever free edition for 3 production users, unlimited devices and unlimited evaluation users.

npx dexie-cloud create


import Dexie from 'dexie';
import dexieCloud from 'dexie-cloud-addon'; // Import the addon

const db = new Dexie('mydb', {
  addons: [dexieCloud] // Include addon in your Dexie instance

  myTable: '@myId, myIndex1, myIndex2, ...'
  databaseUrl: '', // URL from `npx dexie-cloud create`



Method Description Connect your client to the cloud Authenticate user. Useful in combination with option {requireAuth: false} Logout current user. Force a sync. Useful in combination with option {disableWebSocket: true} and {disableEagerSync: true} Observe access permissions for given object - see also usePermission()


Property Type Description string Version of dexie-cloud-addon DexieCloudOptions Options configured using DexieCloudSchema Dexie-Cloud specific schema (complementary to dexie schema) string UserID of the currently logged in user Observable<UserLogin> Observable of currently logged in user. Observable<string> Observable of websocket status: “not-started”, “connecting”, “connected”, “disconnected” or “error” Observable<SyncState> Observable of sync state Observable<PersistedSyncState> Observable of persisted sync state Observable<void> Observable of persisted sync state Observable<DXCUserInteraction> Observable of login GUI. Use in combination with option {customLoginGui: true} Observable<Invite[]> Observable of invites from other users to their realms Observable<Role[]> Observable of global roles in your database boolean Whether service worker is used or not. Depends on a combination of config options and whether a service worker that imports dexie-cloud’s service worker module was found

Consuming Observable<T>

Many properties in are Observables and the method returns an Observable. Observables represents reactive data and allows your app to subscribe to them and re-render whenever they emit a value. Observables can be consumed in any GUI framework and we give two samples below.

Example (React)

import { useObservable } from 'dexie-react-hooks';
import { db } from './db.js';

function MyComponent() {
  // is an Observable of Invite[] array.
  const invites = useObservable(;

  return (
        { => (
          <li key={}>
            You are invited to act as {invite.roles?.join(', ')}
            in the realm {}
            <button onClick={() => invite.accept()}>Accept</button>
            <button onClick={() => invite.reject()}>Reject</button>

This component would render the current invites for your user at any time and re-render whenever an invite is added, updated or removed.

See useObservable()

Example (Svelte)

  import { db } from "./db.js";

  let oInvites =;

  {#each $oInvites as invite (}

For more samples, see also and