Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 2,736 Commits
.github		.github
addons		addons
dist		dist
libs		libs
samples		samples
src		src
test		test
tools		tools
.gitignore		.gitignore
.npmignore		.npmignore
.npmrc		.npmrc
.prettierrc		.prettierrc
.prettierrc.yml		.prettierrc.yml
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
NOTICE		NOTICE
README.md		README.md
SECURITY.md		SECURITY.md
import-wrapper-prod.d.mts		import-wrapper-prod.d.mts
import-wrapper-prod.mjs		import-wrapper-prod.mjs
import-wrapper.d.mts		import-wrapper.d.mts
import-wrapper.mjs		import-wrapper.mjs
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
tsconfig.json		tsconfig.json

Repository files navigation

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 tomake it sync.

Hello World (vanilla JS)

<!DOCTYPE html><html><head><scripttype="module">// Import Dexieimport{Dexie}from'https://unpkg.com/dexie/dist/modern/dexie.mjs';//// Declare Database//constdb=newDexie('FriendDatabase');db.version(1).stores({friends:'++id, age'});//// Play with it//try{awaitdb.friends.add({name:'Alice',age:21});constyoungFriends=awaitdb.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. Readthe docs to get into the details.

Hello World (legacy script tags)

<!DOCTYPE html><html><head><scriptsrc="https://unpkg.com/dexie/dist/dexie.js"></script><script>//// Declare Database//constdb=newDexie('FriendDatabase');db.version(1).stores({friends:'++id, age'});//// Play with it//db.friends.add({name:'Alice',age:21}).then(()=>{returndb.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...

importReactfrom'react';import{Dexie,typeEntityTable}from'dexie';import{useLiveQuery}from'dexie-react-hooks';// Typing for your entities (hint is to move this to its own module)exportinterfaceFriend{id:number;name:string;age:number;}// Database declaration (move this to its own module also)exportconstdb=newDexie('FriendDatabase')asDexie&{friends:EntityTable<Friend,'id'>;};db.version(1).stores({friends:'++id, age',});// Component:exportfunctionMyDexieReactComponent(){constyoungFriends=useLiveQuery(()=>db.friends.where('age').below(30).toArray());return(<><h3>My young friends</h3><ul>{youngFriends?.map((f)=>(<likey={f.id}>            Name:{f.name}, Age:{f.age}</li>))}</ul><buttononClick={()=>{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. Itsbulk 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 fromWhereClause,Table andCollection. Dive into theAPI 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/