IDB ActiveRecord

idb-activerecord is a small library that wraps the IndexedDB API with a familiar ActiveRecord pattern. This experiment focuses on the zero-build, plain-HTML use case — pulling the library directly from a CDN and using it on the page.

I was heavily inspired by Ruby on Rails' ActiveRecord, which I've always loved for how natural it makes working with data feel. Class-based models, expressive query chaining like .where(...).all(), validations, callbacks, and migrations — I really feel that Rails nailed the developer experience, and I wanted to bring a taste of that same ergonomic feel to IndexedDB in the browser.

How It Works

• CDN Bundle: Loaded from jsDelivr as a UMD bundle exposing a global IDBActiveRecord.
• Model Definition: Extend ActiveRecord, set tableName, and declare your columns.
• Persistence: Records live in the browser's IndexedDB and survive page reloads.
• Inspect It: Open DevTools → Application → IndexedDB → idb-ar-demo → users to peek at the underlying store.

Live Demo

Add a few users, query them, and inspect the IndexedDB store. Data persists across reloads — try refreshing the page.

The Code

Here is all you need to get started:

<script src="https://cdn.jsdelivr.net/npm/idb-activerecord@1/dist/idb-activerecord.min.js"></script>

<script>
  // The UMD bundle exposes a global on window
  const { ActiveRecord, Database } = window.IDBActiveRecord;

  class User extends ActiveRecord {
    static tableName = 'users';
    static columns = {
      name:  { type: 'string',  nullable: false },
      email: { type: 'string',  nullable: false },
      age:   { type: 'integer', default: 0 }
    };
  }

  const db = new Database('idb-ar-demo');
  db.registerModel(User);

  db.connect().then(async () => {
    // Create a record from form input
    await User.create({ name, email, age });

    // Query with a filter
    const adults = await User.where('age', '>=', 18).all();

    // Delete a record
    const user = await User.find(1);
    await user.destroy();
  });
</script>

Learn More

idb-activerecord is open source. Check out the repository for the full API reference, TypeScript support, relationship definitions, validation hooks, and the optional sync engine for multi-user scenarios.

View idb-activerecord on GitHub →

Try It Yourself

Fork a version of this experiment in CodeSandbox to play with the API:

← Back to Experiments