explaingit

jakearchibald/idb

7,326TypeScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

A tiny 1.19KB JavaScript library that wraps the browser's built-in IndexedDB storage in a modern promise-based API, making offline data storage as straightforward to write as any other async JavaScript.

Mindmap

mindmap
  root((repo))
    What it does
      IndexedDB wrapper
      Promise-based API
      Browser storage
    Features
      Await syntax
      Shortcut methods
      Tiny file size
    Use Cases
      Offline storage
      Cache API data
      Local database
    Setup
      npm install
      CDN link
      No build step
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Store user data in the browser so your web app continues to work offline without hitting the server

USE CASE 2

Cache API responses locally in IndexedDB using clean async/await syntax instead of tangled callback code

USE CASE 3

Read and write single values to the browser's local database with one-line shortcut methods without manually opening a transaction

Tech stack

TypeScriptJavaScriptnpmwebpackRollup

Getting it running

Difficulty · easy Time to first run · 30min

IndexedDB transactions close automatically after the current JavaScript task, avoid mixing network calls inside a transaction.

In plain English

The idb library is a small JavaScript wrapper around IndexedDB, a database built directly into web browsers. IndexedDB lets websites store data on a user's device so it can be accessed later, even without an internet connection. The native IndexedDB API uses an older style of handling results through event callbacks, which tends to produce tangled, hard-to-read code. This library replaces that style with promises, which is how modern JavaScript code handles operations that take a moment to complete. In practical terms, reading and writing to the local database looks much like any other modern JavaScript code. You can use the await keyword to wait for a result instead of wiring up callback functions. The library also adds shortcut methods for common one-off operations such as getting or putting a value, so you do not need to manually set up a transaction for each simple task. The file weighs about 1.19 kilobytes after compression, making it inexpensive to include on a web page. It can be installed as an npm package and imported in projects built with bundlers like webpack or Rollup, or loaded directly in the browser from a CDN address with no build step required. One important constraint described in the README: IndexedDB transactions close automatically once JavaScript finishes processing its current batch of work. If you make an unrelated network request in the middle of a transaction, the transaction may close before you are done, which causes an error. The library does not change this browser behavior, and the README includes an example showing exactly where the failure happens and why.

Copy-paste prompts

Prompt 1
I'm building a web app that needs to store user preferences offline using IndexedDB. Show me how to install idb via npm and write a setup function that opens a database, creates an object store, and saves and retrieves a value using async/await.
Prompt 2
I want to cache API responses in IndexedDB using the idb library so my web app loads from local storage when offline. Show me the code to check for a cached value first and fall back to a fetch call if it's missing.
Prompt 3
I'm getting an error where my IndexedDB transaction closes unexpectedly when I make a network request in the middle of it. Explain why this happens with idb and show me how to restructure my code to avoid the issue.
Open on GitHub → Explain another repo

← jakearchibald on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.