wa-sqlite

ElectricSQL supports running in the web browser using wa-sqlite.

wa-sqlite is a WebAssembly build of SQLite that supports in-browser persistence using IndexedDB and the Origin Private File System.

You can use any configuration of wa-sqlite that you like. However, the instructions below are for the IndexedDB mode.

Dependencies

Add wa-sqlite as a dependency to your app, e.g.:

npm install rhashimoto/wa-sqlite

Copy the WASM files into your app's public folder, e.g.:

cp ./node_modules/wa-sqlite/dist/wa-sqlite-async.* ./static

See the wa-sqlite repo for more information.

Usage

import { electrify, ElectricDatabase } from 'electric-sql/wa-sqlite'

// Import your generated database schema.
import { schema } from './generated/client'

// Define custom configuration if needed
const config = {
  url: 'https://example.com:5133'
}

// Create the wa-sqlite database connection. The first argument
// is your database name. Changing this will create/use a new
// local database file. The second argument is the public URL
// path to use when loading the wa-sqlite WASM files.
const conn = await ElectricDatabase.init('electric.db')

// Instantiate your electric client.
const electric = await electrify(conn, schema, config)

// Connect to Electric, passing along your authentication token
// See Usage -> Authentication for more details.
await electric.connect('your token')

You can now use the client to read, write and sync data, e.g.:

const { db } = electric

const results = await db.projects.findMany()
console.log(results)

See the examples/web-wa-sqlite demo app, Usage -> Data access and Integrations -> Frontend for more information.