Star

Dexie.js

A Minimalistic Wrapper for IndexedDB

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

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 on Stackblitz

  <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

Dexie Cloud transforms your Local Dexie into a synced Dexie through a few simple steps:


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. Upgrade dexie + install dexie-cloud-addon

npm install dexie@next
npm install dexie-cloud-addon

4. Update your DB declaration

highlighted parts represents changes needed to activate sync:

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

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

  db.version(1).stores({
    // Prefix with '@' to auto-generate globally unique keys.
    friends: '@id, name, age' // '@' is optional.
  });

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

Read more » Pricing »


Dexie Cloud Public Release in days!


That's all folks!

Now go make something awesome.

Browser testing via


© 2014-2024 Dexie.js is the creation of David Fahlander and managed by Awarica AB.