Frontend SDK overview

Add user-controlled browser encryption with vanilla TypeScript or optional headless React bindings.

The frontend SDK is one Ownfold integration path, not a requirement for the backend packages. Use it when plaintext and root keys must remain in the user’s browser.

Choose a frontend layer

@ownfold/browser manages vault state, local device identity, IndexedDB persistence, Recovery Kits, pairing, rotation, and record cryptography. @ownfold/react only exposes a provider and hooks over a browser client. Your application owns every component, label, confirmation, download, layout, and accessibility decision.

Vanilla TypeScript

pnpm add @ownfold/browser@beta @ownfold/fetch@beta

import { createVaultClient } from "@ownfold/browser"
import { createFetchVaultTransport } from "@ownfold/fetch"

export const vault = createVaultClient({
  transport: createFetchVaultTransport({ baseURL: "/api/ownfold" }),
})

Continue to the browser client reference for every lifecycle and record method.

React is optional

pnpm add @ownfold/react@beta

Use VaultProvider and the specific hook needed by your own component. Importing React is never required by @ownfold/core, @ownfold/crypto, @ownfold/server, framework adapters, authentication adapters, or database adapters.

See React bindings for the complete hook reference.

Security boundary

Browser E2EE protects plaintext from an honest-but-curious application backend and storage-only compromise. It cannot protect plaintext from malicious JavaScript executing in the same page. Use a strict CSP, minimize third-party scripts, isolate keys in the Ownfold worker, and read the threat model before handling real user data.

Related paths

• Need an API-only service? Start with the backend SDK.
• Need server-owned encryption? Use trusted backend encryption.
• Need a full-stack framework? Choose a framework adapter.