Browser quickstart

By the end of this page you will have a web app running in your browser that creates an end-to-end encrypted document store using the Web Crypto API — no server-side keys, no plaintext on the wire.

1) Create a project & install

We use Vite as bundler here, but any bundler that supports ESM imports works (webpack, Parcel, etc.).

npm create vite@latest my-mindoodb-app -- --template vanilla
cd my-mindoodb-app
npm install mindoodb

2) Add the MindooDB code

Replace the contents of main.js with the code below. The key difference from Node.js: you import from mindoodb/browser and pass a cryptoAdapter that uses the browser's native Web Crypto API for all cryptographic operations.

import {
  BaseMindooTenantFactory,
  InMemoryContentAddressedStoreFactory,
  createCryptoAdapter,
} from "mindoodb/browser";

async function main() {
  // The browser build uses Web Crypto under the hood
  const cryptoAdapter = createCryptoAdapter();
  const storeFactory = new InMemoryContentAddressedStoreFactory();
  const factory = new BaseMindooTenantFactory(storeFactory, cryptoAdapter);

  // One call creates admin + user keys, KeyBag, and directory
  const { tenant, adminUser, appUser, keyBag } =
    await factory.createTenant({
      tenantId: "my-first-tenant",
      adminName: "cn=admin/o=demo",
      adminPassword: "admin-password",
      userName: "cn=alice/o=demo",
      userPassword: "user-password",
    });

  // Open a database and create a todo document
  const db = await tenant.openDB("todos");
  const todo = await db.createDocument();
  await db.changeDoc(todo, async (d) => {
    const data = d.getData();
    data.title = "Ship web MVP";
    data.done = false;
  });

  // Read it back
  const ids = await db.getAllDocumentIds();
  const loaded = await db.getDocument(ids[0]);
  return loaded.getData();
}

main().then((data) => {
  console.log("Web todo:", data);
  document.querySelector("#app").innerHTML =
    `<h2>Todo: ${data.title} (done: ${String(data.done)})</h2>`;
});

3) Run the dev server

npm run dev

Open the URL shown in the terminal (usually http://localhost:5173). You should see:

Todo: Ship web MVP (done: false)

Check the browser console for the full object: Web todo: { title: 'Ship web MVP', done: false }

Persistent storage

The example above uses in-memory storage. For data that survives page reloads, swap InMemoryContentAddressedStoreFactory for IndexedDBContentAddressedStoreFactory (also exported from mindoodb/browser).