Star

Dexie.js

A Minimalistic Wrapper for IndexedDB

( only ~25k minified and gzipped )
Getting started Get started

Play in JSFiddle

Reactive (Since v3.2)

Dexie 3.2 integrates better with front-end frameworks. Query the db without boilerplate and let your components mirror the database in real time.

Show me »

Easy to learn

Dexie was written to be straightforward and easy to learn. If you've ever had to work with native IndexedDB then you'll certainly appreciate Dexie's concise API.

Dive right in »

Well documented

What good is any development tool without great documentation? Dexie is thoroughly explained, and examples are available to help you on your way.

Check it out »


Basic examples


	/*
	|----------------------------|
	| Declare your database      |
	|----------------------------|
	*/

	const db = new Dexie('MyDatabase');

	// Declare tables, IDs and indexes
	db.version(1).stores({
		friends: '++id, name, age'
	});






					

	/*
	|-----------------------|
	| Then run some queries |
	|-----------------------|
	*/

	// Find some old friends
	const oldFriends = await db.friends
		.where('age').above(75)
		.toArray();

	// or make a new one
	await db.friends.add({
		name: 'Camilla',
		age: 25,
		street: 'East 13:th Street',
		picture: await getBlob('camilla.png')
	});
								

Live Queries

  import { useLiveQuery } from "dexie-react-hooks";
  import { db } from "./db";

  export function FriendList () {
    const friends = useLiveQuery(async () => {
      //
      // Query the DB using our promise based API.
      // The end result will magically become
      // observable.
      //
      return await db.friends
        .where("age")
        .between(18, 65)
        .toArray();
    });

    return <>
      <h2>Friends</h2>
      <ul>
        {
          friends?.map(friend =>
            <li key={friend.id}>
              {friend.name}, {friend.age}
            </li>
          )
        }
      </ul>
    </>;
  }

Get started with Dexie in React »

Play with Dexie.js and React in Codesandbox

  <script>
    import { liveQuery } from "dexie";
    import { db } from "./db";
    
    let friends = liveQuery(async () => {
      //
      // Query the DB using our promise based API.
      // The end result will magically become
      // observable.
      //
      return await db.friends
        .where("age")
        .between(18, 65)
        .toArray();
    });
  </script>

  <div>
    <h2>Friends</h2>
    <ul>
    {#each ($friends || []) as friend (friend.id)}
      <li>{friend.name}, {friend.age}</li>
    {/each}
    </ul>
  </div>




Get started with Dexie in Svelte »

Play with Dexie.js and Svelte in Codesandbox

  <template>
    <h2>Friends</h2>
    <ul>
      <li v-for="friend in friends" :key="friend.id">
        {{ friend.name }}, {{ friend.age }}
      </li>
    </ul>  
  </template>
  <script>
    import { liveQuery } from "dexie";
    import { db } from "../db";
    import { useObservable } from "@vueuse/rxjs";
    
    export default {
      name: "FriendList",
      setup() {
        return {
          friends: useObservable(
            liveQuery(async () => {
              //
              // Query the DB using our promise based API.
              // The end result will magically become
              // observable.
              //
              return await db.friends
                .where("age")
                .between(18, 65)
                .toArray();      
            })
          )
        };
      }
    };
  </script>

Get started with Dexie in Vue »

Play with Dexie.js and Vue in Codesandbox

  import { Component } from '@angular/core';
  import { liveQuery } from 'dexie';
  import { db } from '../db';
  
  @Component({
    selector: 'friendlist',
    template: `
      <h2>Friends</h2>
      <ul>
        <li *ngFor="let friend of friends$ | async">
          {{ friend.name }}, {{ friend.age }}
        </li>
      </ul>
    `
  })
  export class FriendsComponent {
    friends$ = liveQuery(() => listFriends());
  }

  async function listFriends() {
    //
    // Query the DB using our promise based API.
    // The end result will magically become
    // observable.
    //
    return await db.friends
      .where("age")
      .between(18, 65)
      .toArray();
  }


  

Get started with Dexie in Angular »

Play with Dexie.js in Angular on Stackblitz


Sync


1. Create your database in the cloud

1. Create your db in the cloud

npx dexie-cloud create

2. Whitelist your app origin(s)

npx dexie-cloud whitelist http://localhost:3000

3. Add dexie-cloud-addon

npm install dexie-cloud-addon

4. Update your DB declaration

  import Dexie from "dexie";
  import dexieCloud from "dexie-cloud-addon";

  const db = new Dexie('MySyncedDB', {addons: [dexieCloud]});

  db.version(1).stores({
    friends: '@id, name, age'
  });

  db.cloud.configure({
    databaseUrl: "https://<yourdatabase>.dexie.cloud",
    requireAuth: true
  });

Read more » Pricing »




That's all folks!

Now go make something awesome.