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 »

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

React

  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

Svelte

  <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

Vue

  <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

Angular

  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

That's all folks!

Now go make something awesome.