Dexie.js README

The project's README from github.com/dexie/Dexie.js. As one markdown file: README.md.

Dexie.js

NPM Version Build Status Join our Discord

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:

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>
    </>
  );
}

Tutorials for React, Svelte, Vue, Angular and vanilla JS

API Reference

Samples

Performance

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.

Supported operations

above(key): Collection;
aboveOrEqual(key): Collection;
add(item, key?): Promise;
and(filter: (x) => boolean): Collection;
anyOf(keys[]): Collection;
anyOfIgnoreCase(keys: string[]): Collection;
below(key): Collection;
belowOrEqual(key): Collection;
between(lower, upper, includeLower?, includeUpper?): Collection;
bulkAdd(items: Array): Promise;
bulkDelete(keys: Array): Promise;
bulkPut(items: Array): Promise;
clear(): Promise;
count(): Promise;
delete(key): Promise;
distinct(): Collection;
each(callback: (obj) => any): Promise;
eachKey(callback: (key) => any): Promise;
eachPrimaryKey(callback: (key) => any): Promise;
eachUniqueKey(callback: (key) => any): Promise;
equals(key): Collection;
equalsIgnoreCase(key): Collection;
filter(fn: (obj) => boolean): Collection;
first(): Promise;
get(key): Promise;
inAnyRange(ranges): Collection;
keys(): Promise;
last(): Promise;
limit(n: number): Collection;
modify(changeCallback: (obj: T, ctx:{value: T}) => void): Promise;
modify(changes: { [keyPath: string]: any } ): Promise;
noneOf(keys: Array): Collection;
notEqual(key): Collection;
offset(n: number): Collection;
or(indexOrPrimayKey: string): WhereClause;
orderBy(index: string): Collection;
primaryKeys(): Promise;
put(item: T, key?: Key): Promise;
reverse(): Collection;
sortBy(keyPath: string): Promise;
startsWith(key: string): Collection;
startsWithAnyOf(prefixes: string[]): Collection;
startsWithAnyOfIgnoreCase(prefixes: string[]): Collection;
startsWithIgnoreCase(key: string): Collection;
toArray(): Promise;
toCollection(): Collection;
uniqueKeys(): Promise;
until(filter: (value) => boolean, includeStopEntry?: boolean): Collection;
update(key: Key, changes: { [keyPath: string]: any }): Promise;

This is a mix of methods from WhereClause, Table and Collection. Dive into the API reference to see the details.

Dexie Cloud

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:

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. 👋

→ Quickstart guide

Sample app:

Source: Dexie Cloud To-do app

Live demo: https://dexie.github.io/Dexie.js/dexie-cloud-todo-app/

Legacy Addons (dexie-observable, dexie-syncable)

⚠️ 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.

Samples

https://dexie.org/docs/Samples

https://github.com/dexie/Dexie.js/tree/master/samples

Knowledge Base

https://dexie.org/docs/Questions-and-Answers

Website

https://dexie.org

Install via npm

npm install dexie

Download

For those who don't like package managers, here's the download links:

UMD (for legacy script includes as well as commonjs require):

https://unpkg.com/dexie@latest/dist/dexie.min.js

https://unpkg.com/dexie@latest/dist/dexie.min.js.map

Modern (ES module):

https://unpkg.com/dexie@latest/dist/modern/dexie.min.mjs

https://unpkg.com/dexie@latest/dist/modern/dexie.min.mjs.map

Typings:

https://unpkg.com/dexie@latest/dist/dexie.d.ts

Contributing

See CONTRIBUTING.md

Build

pnpm install
pnpm run build

Test

pnpm test

Watch

pnpm run watch

Browser testing via
TestMu AI (Formerly LambdaTest)

Dexie.js (dexie/Dexie.js)

Searching Database…

14.6K ·GitHub
Dexie.js
Что это такое?Dexie.js — это библиотека-обёртка над IndexedDB, стандартной базой данных в браузере. Она упрощает работу с локальными данными приложения и широко используется сотнями тысяч сайтов, приложений и других проектов.
Чем это лучше, чем использовать IndexedDB напрямую?Сам по себе IndexedDB низкоуровневый и работает по-разному в разных браузерах; Dexie оборачивает его в удобный API и обходит ошибки несовершенных реализаций, чтобы всё работало стабильнее.
Как подключить его к проекту?Установите через npm и импортируйте в код, либо обойдитесь без пакетных менеджеров и скачайте сразу UMD-сборку для старых script-тегов или современную сборку в виде ES-модуля.
Нужен ли какой-то определённый фреймворк или сборка, чтобы им пользоваться?Ничего особенного не нужно: обычный чистый JS работает сразу, старые script-теги тоже поддерживаются, а для React, Svelte, Vue и Angular есть примеры и туториалы, плюс готовые типы для TypeScript.
В старых туториалах упоминаются dexie-observable и dexie-syncable — это всё ещё способ делать синхронизацию?Нет: это устаревшие аддоны, несовместимые с Dexie Cloud. Для офлайн-first синхронизации в новых проектах используйте вместо них dexie-cloud-addon.
Где моё приложение сможет его запускать — работает ли он за пределами обычных браузеров?Везде, где работает браузерный движок: во всех основных браузерах, в десктопных приложениях на Electron, в приложениях на Capacitor для iOS и Android, а также в чистых PWA.
Где на самом деле хранятся мои данные?Данные хранятся локально в IndexedDB на устройстве пользователя, поэтому приложения по умолчанию работают офлайн. Dexie Cloud добавляет синхронизацию в реальном времени, которая полностью работает офлайн и догоняет изменения при возвращении в сеть.
Мне понадобится собственный бэкенд, если я хочу синхронизировать данные между устройствами?Нет. Dexie Cloud добавляет поверх Dexie.js синхронизацию в реальном времени, аутентификацию и совместную работу — бэкенд строить не нужно: изменения распространяются мгновенно, без опроса сервера, а сам сервис можно использовать в облаке или развернуть на своей инфраструктуре.
Что входит в Dexie Cloud кроме синхронизации?Встроенная аутентификация пользователей без стороннего провайдера идентификации, гибкое управление доступом для обмена данными между пользователями, хранение файлов и блобов для вложений, а также офлайн-first поведение с синхронизацией при восстановлении соединения.
Откуда у Dexie такая производительность?Его bulk-методы задействуют малоизвестную возможность IndexedDB, чтобы сохранять записи без ожидания каждого события onsuccess — это выжимает максимум из скорости записи.
What are similar projects?rxdb, localForage, redux-persist, gun, lowdb, nedb, squoosh, ai
Which topics is it in?indexeddb, realtime, nosql, svelte, angular, pwa, storage, offline-first, authentication, electron, vue, offline
Creator
dexie
Size
72.2 MB
Stars
14.6K
Updated
CommitOct 16Releasev4.4.6Sep 10
Age
12y
Commits · 90 Days