fast-idb

Ultra-simple, typed IndexedDB CRUD. Just collection<T>('name') and go.

Optional React + Zustand integration included.

Install

bun add fast-idb
# peer dep (optional — only if you use fast-idb/react):
#   zustand >= 4.0

Quick Start

import { collection } from 'fast-idb'

interface Todo {
  id: string
  title: string
  done: boolean
  createdAt: string
  updatedAt: string
}

const todos = collection<Todo>('todos')

// Create — id + timestamps are auto-generated
await todos.create({ title: 'Buy milk', done: false })

// Read
await todos.get('some-id')
await todos.getAll()
await todos.getAll({ direction: 'desc', limit: 10 })

// Update — merges fields, updates updatedAt
await todos.update('some-id', { done: true })

// Delete
await todos.delete('some-id')

// Bulk
await todos.bulkCreate([{ title: 'A', done: false }, { title: 'B', done: true }])
await todos.bulkDelete(['id-1', 'id-2'])

// Filter / Find
await todos.filter(t => t.done === true)
await todos.find(t => t.title.includes('milk'))

// Count / Clear
await todos.count()
await todos.clear()

That's it. No database config, no version management, no setup. The library handles everything internally:

• Single shared IndexedDB database
• Object stores created on demand
• Auto-generated IDs (timestamp + random)
• Auto-managed createdAt / updatedAt timestamps

With React + Zustand

// db.ts
import { collection } from 'fast-idb'
import { createCrudStore } from 'fast-idb/react'
import { toast } from 'sonner'

interface Todo {
  id: string
  title: string
  done: boolean
  createdAt: string
  updatedAt: string
}

const todos = collection<Todo>('todos')

export const useTodos = createCrudStore(todos, {
  sortDirection: 'desc',
  labels: { entity: 'Todo' },
  toast: (type, title, desc) => toast[type](title, { description: desc }),
})

// TodoList.tsx
import { useEffect } from 'react'
import { useTodos } from './db'

export function TodoList() {
  const { items, isLoading, fetchAll, create, remove } = useTodos()

  useEffect(() => { fetchAll() }, [])

  if (isLoading) return <p>Loading...</p>

  return (
    <div>
      <button onClick={() => create({ title: 'New todo', done: false })}>
        Add Todo
      </button>
      <ul>
        {items.map(t => (
          <li key={t.id}>
            {t.title}
            <button onClick={() => remove(t.id)}>x</button>
          </li>
        ))}
      </ul>
    </div>
  )
}

Collection API

| Method | Description | |---|---| | get(key) | Get one record | | getAll(options?) | Get all, with optional direction/limit/offset | | count() | Count records | | create(data) | Create (auto ID + timestamps) | | update(key, data) | Partial merge update | | put(item) | Full upsert (no merge) | | delete(key) | Delete by key | | clear() | Delete all records | | bulkCreate(items) | Batch create in one transaction | | bulkDelete(keys) | Batch delete in one transaction | | forEach(cb, options?) | Cursor iteration | | find(predicate) | First match | | filter(predicate) | All matches |

Query Options

await todos.getAll({ direction: 'desc', limit: 10, offset: 5 })

| Option | Type | Default | Description | |---|---|---|---| | direction | 'asc' \| 'desc' | 'asc' | Sort order | | limit | number | - | Max results | | offset | number | 0 | Skip N results |

Zustand Store API (fast-idb/react)

| Property/Method | Description | |---|---| | items | Current array of records | | isLoading | Loading state | | hasFetched | True after first fetch | | error | Error message or null | | fetchAll() | Load all from DB | | create(data) | Create + prepend to items | | update(key, data) | Update + sync items | | remove(key) | Delete + remove from items | | getOne(key) | Read single item | | search(predicate, query?) | Client-side filter | | clearSearch() | Reset to full list | | openDialog(name, item?) | Open named dialog | | closeDialog(name) | Close named dialog | | selectedItem | Item selected via openDialog | | refresh() | Re-fetch everything |

License

MIT