dexie vs idb
IndexedDB Libraries
Search packages..
dexieidbSimilar Packages:

IndexedDB Libraries

Dexie and idb are JavaScript libraries that simplify the use of IndexedDB, a low-level API for client-side storage of significant amounts of structured data, including files/blobs. Both libraries provide a more user-friendly API compared to the native IndexedDB API, making it easier for developers to perform CRUD operations and manage data in web applications. Dexie offers a rich set of features and a fluent API, while idb focuses on providing a promise-based wrapper around the IndexedDB API, making it lightweight and straightforward for basic use cases.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package
Downloads
Stars
Size
Issues
Publish
License
dexie014,1093.09 MB5913 months agoApache-2.0
idb07,27482.8 kB5710 months agoISC

Feature Comparison: dexie vs idb

API Design

  • dexie:

    Dexie provides a fluent and chainable API that allows developers to write queries in a more readable and expressive manner. It supports complex queries, transactions, and indexing, making it easier to work with large datasets and perform advanced operations.

  • idb:

    idb offers a simple promise-based API that closely resembles the native IndexedDB API. It is designed to be minimalistic, providing essential methods for CRUD operations without additional abstractions, making it easy to learn and use for basic scenarios.

Querying Capabilities

  • dexie:

    Dexie excels in querying capabilities, allowing for complex queries with ease. It supports filtering, sorting, and multi-indexed queries, enabling developers to retrieve data efficiently and effectively. Its powerful query syntax allows for a more expressive way to interact with the database.

  • idb:

    idb provides basic querying capabilities through the native IndexedDB API. While it supports simple get and put operations, it lacks the advanced querying features found in Dexie, making it less suitable for applications that require complex data retrieval.

Performance

  • dexie:

    Dexie is optimized for performance, leveraging IndexedDB's capabilities while providing additional features like bulk operations and automatic transaction management. It minimizes the overhead of database interactions, making it suitable for applications that require high performance with large datasets.

  • idb:

    idb is lightweight and performs well for basic operations. However, since it directly wraps the native IndexedDB API, performance may vary based on how well developers manage transactions and data retrieval, especially in more complex scenarios.

Error Handling

  • dexie:

    Dexie has built-in error handling mechanisms that provide clearer error messages and easier debugging. It allows developers to catch and handle errors in a more structured way, improving the overall robustness of applications that rely on IndexedDB.

  • idb:

    idb requires developers to handle errors manually, as it relies on the native IndexedDB API's error handling. This can lead to more complex error management in applications, especially for those less familiar with the intricacies of IndexedDB.

Community and Ecosystem

  • dexie:

    Dexie has a strong community and a rich ecosystem of plugins and extensions, allowing for enhanced functionality and integration with other libraries. This makes it a popular choice among developers looking for a comprehensive solution for IndexedDB management.

  • idb:

    idb, while simpler, has a smaller community and fewer extensions compared to Dexie. It is primarily focused on providing a straightforward interface for IndexedDB, making it less versatile in terms of additional features and community support.

How to Choose: dexie vs idb

  • dexie:

    Choose Dexie if you need a powerful and feature-rich library that offers advanced querying capabilities, a fluent API, and support for complex data structures. It is ideal for applications that require extensive data manipulation and performance optimizations.

  • idb:

    Choose idb if you prefer a lightweight library that provides a simple promise-based interface for basic IndexedDB operations. It is suitable for projects that require minimal overhead and straightforward data storage without the need for advanced features.

Similar Npm Packages to dexie

dexie is a powerful wrapper for IndexedDB, designed to simplify the process of working with client-side databases in web applications. It provides a straightforward API for performing CRUD operations, handling transactions, and managing complex queries, making it easier for developers to interact with IndexedDB without dealing with its verbose and complex native API. Dexie supports features like versioning, schema migrations, and reactive queries, making it a popular choice for developers looking to implement offline storage solutions in their applications.

One notable alternative to Dexie is idb. The idb library is a small, simple, and lightweight wrapper around the IndexedDB API. It aims to provide a more user-friendly interface while maintaining the performance and capabilities of the native IndexedDB. idb is particularly useful for developers who prefer a minimalistic approach and want to work directly with promises rather than callbacks. While it may not offer all the advanced features of Dexie, it is a great choice for simpler use cases where a lightweight solution is sufficient.

For a detailed comparison of these two libraries, you can check out the following link: Comparing dexie vs idb.

Similar Npm Packages to idb

idb is a small and simple library that provides a convenient way to interact with IndexedDB, a low-level API for client-side storage of significant amounts of structured data. It simplifies the complexities of using IndexedDB by providing a promise-based API that makes it easier to work with. This makes it an excellent choice for developers looking to implement client-side storage solutions in their web applications without getting bogged down by the intricacies of the underlying API.

While idb is a great option for managing IndexedDB, there are other libraries that also facilitate similar functionalities. Here are a few alternatives:

  • dexie is a powerful wrapper for IndexedDB that provides a more feature-rich and developer-friendly API. It offers a simple syntax for querying and managing data, supports transactions, and provides advanced features like versioning and schema migrations. If you need a more robust solution with additional capabilities for managing your data, dexie is an excellent choice. Its extensive documentation and community support make it a popular option for developers looking to leverage IndexedDB effectively.

  • localforage is another library that provides a simple API for storing data in the browser. It abstracts away the complexities of different storage mechanisms, including IndexedDB, WebSQL, and localStorage, allowing developers to use a consistent API regardless of the underlying storage technology. If you require a cross-browser solution that automatically selects the best storage option available, localforage is a great choice. It is particularly useful for applications that need to store data offline and provide a seamless user experience.

To see how idb compares with dexie and localforage, check out the comparison: Comparing dexie vs idb vs localforage.

README for dexie

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:

  • 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.
  • It's an easy step to make it sync.

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 a commercial offering that can be used as an add-on to Dexie.js. It syncs a Dexie database with a server and enables developers to build apps without having to care about backend or database layer else than the frontend code with Dexie.js as the sole database layer.

Source for a sample Dexie Cloud app: Dexie Cloud To-do app

See the sample Dexie Cloud app in action: https://dexie.github.io/Dexie.js/dexie-cloud-todo-app/

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 LAMDBATEST

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.