Installations
npm install dexieDeveloper Guide
Typescript
No
Module System
CommonJS, ESM
Node Version
20.16.0
NPM Version
10.8.2
Score
99.5
Supply Chain
100
Quality
92.2
Maintenance
100
Vulnerability
100
License
Releases
Contributors
Unable to fetch Contributors
Languages
JavaScript (53.7%)
TypeScript (45.34%)
Shell (0.53%)
HTML (0.43%)
Developer
Download Statistics
Total Downloads
52,499,679
Last Day
21,085
Last Week
322,899
Last Month
1,957,613
Last Year
20,706,300
GitHub Statistics
11,844 Stars
2,510 Commits
641 Forks
110 Watching
151 Branches
92 Contributors
Bundle Size
94.59 kB
Minified
29.63 kB
Minified + Gzipped
Maintainers
Package Meta Information
Latest Version
4.0.10
Package Id
dexie@4.0.10
Unpacked Size
2.85 MB
Size
715.61 kB
File Count
22
NPM Version
10.8.2
Node Version
20.16.0
Publised On
15 Nov 2024
Total Downloads
Cumulative downloads
Total Downloads
52,499,679
Last day
-77%
21,085
Compared to previous day
Last week
-36.8%
322,899
Compared to previous week
Last month
-5.3%
1,957,613
Compared to previous month
Last year
49.9%
20,706,300
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
25
Dexie.js
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
1<!DOCTYPE html> 2<html> 3 <head> 4 <script src="https://unpkg.com/dexie/dist/dexie.js"></script> 5 <script> 6 7 // 8 // Declare Database 9 // 10 const db = new Dexie('FriendDatabase'); 11 db.version(1).stores({ 12 friends: '++id, age' 13 }); 14 15 // 16 // Play with it 17 // 18 db.friends.add({ name: 'Alice', age: 21 }).then(() => { 19 return db.friends 20 .where('age') 21 .below(30) 22 .toArray(); 23 }).then(youngFriends => { 24 alert (`My young friends: ${JSON.stringify(youngFriends)}`); 25 }).catch (e => { 26 alert(`Oops: ${e}`); 27 }); 28 29 </script> 30 </head> 31</html>
Yes, it's that simple. Read the docs to get into the details.
Hello World (for modern browsers)
All modern browsers support ES modules and top-level awaits. No transipler needed. Here's the previous example in a modern flavour:
1<!DOCTYPE html> 2<html> 3 <head> 4 <script type="module"> 5 // Import Dexie 6 import { Dexie } from 'https://unpkg.com/dexie/dist/modern/dexie.mjs'; 7 8 // 9 // Declare Database 10 // 11 const db = new Dexie('FriendDatabase'); 12 db.version(1).stores({ 13 friends: '++id, age' 14 }); 15 16 // 17 // Play with it 18 // 19 try { 20 await db.friends.add({ name: 'Alice', age: 21 }); 21 22 const youngFriends = await db.friends 23 .where('age') 24 .below(30) 25 .toArray(); 26 27 alert(`My young friends: ${JSON.stringify(youngFriends)}`); 28 } catch (e) { 29 alert(`Oops: ${e}`); 30 } 31 </script> 32 </head> 33</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...
1import React from 'react'; 2import { Dexie, type EntityTable } from 'dexie'; 3import { useLiveQuery } from 'dexie-react-hooks'; 4 5// Typing for your entities (hint is to move this to its own module) 6export interface Friend { 7 id: number; 8 name: string; 9 age: number; 10} 11 12// Database declaration (move this to its own module also) 13export const db = new Dexie('FriendDatabase') as Dexie & { 14 friends: EntityTable<Friend, 'id'>; 15}; 16db.version(1).stores({ 17 friends: '++id, age', 18}); 19 20// Component: 21export function MyDexieReactComponent() { 22 const youngFriends = useLiveQuery(() => 23 db.friends 24 .where('age') 25 .below(30) 26 .toArray() 27 ); 28 29 return ( 30 <> 31 <h3>My young friends</h3> 32 <ul> 33 {youngFriends?.map((f) => ( 34 <li key={f.id}> 35 Name: {f.name}, Age: {f.age} 36 </li> 37 ))} 38 </ul> 39 <button 40 onClick={() => { 41 db.friends.add({ name: 'Alice', age: 21 }); 42 }} 43 > 44 Add another friend 45 </button> 46 </> 47 ); 48}
Tutorials for React, Svelte, Vue, Angular and vanilla JS
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
1above(key): Collection; 2aboveOrEqual(key): Collection; 3add(item, key?): Promise; 4and(filter: (x) => boolean): Collection; 5anyOf(keys[]): Collection; 6anyOfIgnoreCase(keys: string[]): Collection; 7below(key): Collection; 8belowOrEqual(key): Collection; 9between(lower, upper, includeLower?, includeUpper?): Collection; 10bulkAdd(items: Array): Promise; 11bulkDelete(keys: Array): Promise; 12bulkPut(items: Array): Promise; 13clear(): Promise; 14count(): Promise; 15delete(key): Promise; 16distinct(): Collection; 17each(callback: (obj) => any): Promise; 18eachKey(callback: (key) => any): Promise; 19eachPrimaryKey(callback: (key) => any): Promise; 20eachUniqueKey(callback: (key) => any): Promise; 21equals(key): Collection; 22equalsIgnoreCase(key): Collection; 23filter(fn: (obj) => boolean): Collection; 24first(): Promise; 25get(key): Promise; 26inAnyRange(ranges): Collection; 27keys(): Promise; 28last(): Promise; 29limit(n: number): Collection; 30modify(changeCallback: (obj: T, ctx:{value: T}) => void): Promise; 31modify(changes: { [keyPath: string]: any } ): Promise; 32noneOf(keys: Array): Collection; 33notEqual(key): Collection; 34offset(n: number): Collection; 35or(indexOrPrimayKey: string): WhereClause; 36orderBy(index: string): Collection; 37primaryKeys(): Promise; 38put(item: T, key?: Key): Promise; 39reverse(): Collection; 40sortBy(keyPath: string): Promise; 41startsWith(key: string): Collection; 42startsWithAnyOf(prefixes: string[]): Collection; 43startsWithAnyOfIgnoreCase(prefixes: string[]): Collection; 44startsWithIgnoreCase(key: string): Collection; 45toArray(): Promise; 46toCollection(): Collection; 47uniqueKeys(): Promise; 48until(filter: (value) => boolean, includeStopEntry?: boolean): Collection; 49update(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
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
Stable Version
Stable Version
4.0.10
HIGH
2
7.3/10
Summary
Prototype Pollution in Dexie
Affected Versions
>= 4.0.0-alpha.1, <= 4.0.0-alpha.2
Patched Versions
4.0.0-alpha.3
7.3/10
Summary
Prototype Pollution in Dexie
Affected Versions
< 3.2.2
Patched Versions
3.2.2
No security vulnerabilities found.
Other packages similar to dexie
dexie-react-hooks
React hooks for reactive data fetching using Dexie.js
dexie-export-import
Dexie addon that adds export and import capabilities
dexie-observable
Addon to Dexie that makes it possible to observe database changes no matter if they occur on other db instance or other window.
@types/dexie
Stub TypeScript definitions entry for dexie, which provides its own types definitions