Dexie.js : The Smart Way to Handel Local Database in JavaScript

Introduction

If you’ve ever worked with IndexedDB, you know it can be a bit painful—lots of boilerplate and a complex API just to do simple things. That’s where Dexie.js comes in. It’s a lightweight wrapper that makes IndexedDB simple, clean, and developer-friendly.

I recently started building an offline-first application, and I needed something more powerful than localStorage and less messy than raw IndexedDB. After exploring a few options, Dexie.js turned out to be the perfect fit.

In this article, I’ll walk you through the basics—setting up a database, performing CRUD operations, and integrating it with React (don’t worry if you’re not into React, the concepts will still make sense).

Why I Chose Dexie.js for Offline Data Management.

Dexie.js is a smart wrapper around IndexedDB that makes working with local databases in JavaScript much easier and cleaner. If you’ve ever tried IndexedDB directly, you know how tricky it can be. Dexie simplifies that headache.

While building an offline-first application, one big challenge is choosing the right way to manage local data. localStorage is too limited, and working directly with IndexedDB feels like wrestling with unnecessary complexity.

Dexie.js—a lightweight and developer-friendly solution that keeps things simple while still giving you the power of IndexedDB under the hood.

Let’s write the code.

First, we need to set up the database instance:

import Dexie from "dexie";

const db = new Dexie('myDatabase);
            db.version(1).stores({
                    user : '++id, name, email, password, roleId',
                    tasks : '++id, title, description, isCompleted, createdAt, updatedAt'
            })

That’s it! This small setup gives you two tables: user and tasks. Now you can start performing different operations without the hassle of raw IndexedDB code.

CRUD Operations with Dexie.js

Below are the most common operations:

import db from 'path-to-db'
//Add Task
const addTaskToDB = async(data)=>{
    await db.tasks.add(data)
}

//Delete Task
const deleteTaskById = async(id)=>{
    await db.tasks.delete(id)
}

//Update Task
const updateTask = async(data)=>{
    await db.tasks.put(data)
}

//Get Task by Id
const getTaskById = async (id)=>{
    return db.tasks.get(id)
}

//Get all Tasks
const getAllTasks = async()=>{
    return db.tasks.toArray();
}

export {addTaskToDB}

Using Dexie in a React Component

Here’s a quick example to show how we can integrate it with React:

import {addTaskToDB} from 'actions'
const MyReactComponent = ()=>{
    const [newTask, setNewTask] = useState({
            title : "",
            description : ""
      });

    const addTask = async()=>{
        await addTaskToDB(newTask);
         globalThis.alert("Task Added")
    }

    const handelTaskInputChange = (evt)=>{
        const {name, value} = evt.target;
        setNewTask((prev)=>({...prev, [name]: value}))
     }


    return(
        <form onSubmit={addTask}>
            <input type='text' onChange={handelTaskInputChange} value={newTask.title}/>
            <input type='text' onChange={handelTaskInputChange} value={newTask.description}>
            <button>Add Task +</button>
        </form>
    )
}

Final Thoughts

If you’re tired of the limitations of localStorage or the complexity of IndexedDB, Dexie.js is the perfect middle ground. It’s fast, reliable, and a great tool for building offline-first applications.

I hope this guide helped you get started. If you’ve used Dexie before, share your experience in the comments!