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

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 »

Easy to sync

With only a few lines of extra code, you can build a consistent, authenticated and access controlled local-first app!

Add sync »


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')
	});
								

Getting started with Sync Add Sync

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

Turn on sync with 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@latest
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' // '++' = auto-incremented ID
    friends: '@id, name, age' // '@' = auto-generated global ID
  });

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

Read more about authentication, access control and consistency in the Dexie Cloud documentation.

Read more »



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.