JavaScript Web

​

SDK Features

• Provides real-time streaming of database changes.
• Offers direct access to the SQLite database, enabling the use of SQL on both client and server sides.
• Operations are asynchronous by default, ensuring the user interface remains unblocked.
• Enables subscription to queries for receiving live updates.
• Eliminates the need for client-side database migrations as these are managed automatically.
• Allows using PowerSync between multiple tabs

​

Installation

See the SDK’s README for installation instructions.

​

Getting Started

Before implementing the PowerSync SDK in your project, make sure you have completed these steps:

• Signed up for a PowerSync Cloud account (here) or self-host PowerSync.
• Configured your backend database and connected it to your PowerSync instance.
• Installed the PowerSync Web SDK.

​

1. Define the Schema

The first step is defining the schema for the local SQLite database.

This schema represents a “view” of the downloaded data. No migrations are required — the schema is applied directly when the local PowerSync database is constructed (as we’ll show in the next step).

The types available are text, integer and real. These should map directly to the values produced by the Sync Rules. If a value doesn’t match, it is cast automatically. For details on how Postgres types are mapped to the types below, see the section on Types in the Sync Rules documentation.

Example:

// AppSchema.ts
import { column, Schema, Table } from '@powersync/web';

const lists = new Table({
  created_at: column.text,
  name: column.text,
  owner_id: column.text
});

const todos = new Table(
  {
    list_id: column.text,
    created_at: column.text,
    completed_at: column.text,
    description: column.text,
    created_by: column.text,
    completed_by: column.text,
    completed: column.integer
  },
  { indexes: { list: ['list_id'] } }
);

export const AppSchema = new Schema({
  todos,
  lists
});

// For types
export type Database = (typeof AppSchema)['types'];
export type TodoRecord = Database['todos'];
// OR:
// export type Todo = RowType<typeof todos>;
export type ListRecord = Database['lists'];

​

2. Instantiate the PowerSync Database

Next, you need to instantiate the PowerSync database — this is the core managed database.

Its primary functions are to record all changes in the local database, whether online or offline. In addition, it automatically uploads changes to your app backend when connected.

Example:

import { PowerSyncDatabase } from '@powersync/web';
import { Connector } from './Connector';
import { AppSchema } from './Schema';

export const db = new PowerSyncDatabase({
  // The schema you defined in the previous step
  schema: AppSchema,
  database: {
    // Filename for the SQLite database — it's important to only instantiate one instance per file.
    dbFilename: 'powersync.db'
    // Optional. Directory where the database file is located.'
    // dbLocation: 'path/to/directory'
  }
});

Once you’ve instantiated your PowerSync database, you will need to call the connect() method to activate it.

export const setupPowerSync = async () => {
  // Uses the backend connector that will be created in the next section
  const connector = new Connector();
  db.connect(connector);
};

​

3. Integrate with your Backend

The PowerSync backend connector provides the connection between your application backend and the PowerSync client-slide managed SQLite database.

It is used to:

1. Retrieve an auth token to connect to the PowerSync instance.
2. Apply local changes on your backend application server (and from there, to Postgres)

Accordingly, the connector must implement two methods:

1. PowerSyncBackendConnector.fetchCredentials - This is called every couple of minutes and is used to obtain credentials for your app backend API. -> See Authentication Setup for instructions on how the credentials should be generated.
2. PowerSyncBackendConnector.uploadData - Use this to upload client-side changes to your app backend. -> See Writing Client Changes for considerations on the app backend implementation.

Example:

import { UpdateType } from '@powersync/web';

export class Connector {

    constructor() {
        // Setup a connection to your server for uploads
        this.serverConnectionClient = TODO;
    }

    async fetchCredentials() {
        // Implement fetchCredentials to obtain a JWT from your authentication service.
        // See https://docs.powersync.com/installation/authentication-setup
        // If you're using Supabase or Firebase, you can re-use the JWT from those clients, see
        // - https://docs.powersync.com/installation/authentication-setup/supabase-auth
        // - https://docs.powersync.com/installation/authentication-setup/firebase-auth
        return {
            endpoint: '[Your PowerSync instance URL or self-hosted endpoint]',
            // Use a development token (see Authentication Setup https://docs.powersync.com/installation/authentication-setup/development-tokens) to get up and running quickly
            token: 'An authentication token'
        };
    }

    async uploadData(database) {
    // Implement uploadData to send local changes to your backend service.
    // You can omit this method if you only want to sync data from the database to the client

    // See example implementation here: https://docs.powersync.com/client-sdk-references/javascript-web#3-integrate-with-your-backend
}

​

Using PowerSync: CRUD functions

Once the PowerSync instance is configured you can start using the SQLite DB functions.

The most commonly used CRUD functions to interact with your SQLite data are:

• PowerSyncDatabase.get - get (SELECT) a single row from a table.
• PowerSyncDatabase.getAll - get (SELECT) a set of rows from a table.
• PowerSyncDatabase.watch - execute a read query every time source tables are modified.
• PowerSyncDatabase.execute - execute a write (INSERT/UPDATE/DELETE) query.

​

Fetching a Single Item

The get method executes a read-only (SELECT) query and returns a single result. It throws an exception if no result is found. Use getOptional to return a single optional result (returns null if no result is found).

// Find a list item by ID
export const findList = async (id) => {
  const result = await db.get('SELECT * FROM lists WHERE id = ?', [id]);
  return result;
}

​

Querying Items (PowerSync.getAll)

The getAll method returns a set of rows from a table.

// Get all list IDs
export const getLists = async () => {
  const results = await db.getAll('SELECT * FROM lists');
  return results;
}

​

Watching Queries (PowerSync.watch)

The watch method executes a read query whenever a change to a dependent table is made.

// Watch changes to lists
const abortController = new AbortController();

export const function watchLists = (onUpdate) => {
    for await (const update of PowerSync.watch(
        'SELECT * from lists',
        [],
        { signal: abortController.signal }
      )
    ) {
      onUpdate(update);
    }
}

​

Mutations (PowerSync.execute, PowerSync.writeTransaction)

The execute method can be used for executing single SQLite write statements.

// Delete a list item by ID
export const deleteList = async (id) => {
  const result = await db.execute('DELETE FROM lists WHERE id = ?', [id]);
  return TodoList.fromRow(results);
}

// OR: using a transaction
const deleteList = async (id) => {
  await db.writeTransaction(async (tx) => {
    // Delete associated todos
    await tx.execute(`DELETE FROM ${TODOS_TABLE} WHERE list_id = ?`, [id]);
    // Delete list record
    await tx.execute(`DELETE FROM ${LISTS_TABLE} WHERE id = ?`, [id]);
  });
};

​

Additional Usage Examples

See Usage Examples for further examples of the SDK.

​

Developer Notes

​

Connection Methods

This SDK supports two methods for streaming sync commands:

1. WebSocket (Default)

   • The implementation leverages RSocket for handling reactive socket streams.
   • Back-pressure is effectively managed through client-controlled command requests.
   • Sync commands are transmitted efficiently as BSON (binary) documents.
   • This method is recommended since it will support the future BLOB column support feature.

2. HTTP Streaming (Legacy)

   • This is the original implementation method.
   • This method will not support the future BLOB column feature.

By default, the PowerSyncDatabase.connect() method uses WebSocket. You can optionally specify the connectionMethod to override this:

// WebSocket (default)
powerSync.connect(connector);

// HTTP Streaming
powerSync.connect(connector, { connectionMethod: SyncStreamConnectionMethod.HTTP });

​

SQLite Virtual File Systems

This SDK supports multiple Virtual File Systems (VFS), responsible for storing the local SQLite database:

​

1. IDBBatchAtomicVFS (Default)

• This system utilizes IndexedDB as its underlying storage mechanism.
• Multiple tabs are fully supported across most modern browsers.
• Users may experience stability issues when using Safari.

​

2. OPFS-based Alternatives

PowerSync supports two OPFS (Origin Private File System) implementations that generally offer improved performance:

OPFSCoopSyncVFS (Recommended)

• This implementation provides comprehensive multi-tab support across all major browsers.
• It offers the most reliable compatibility with Safari and Safari iOS.
• Example configuration:

import { PowerSyncDatabase, WASQLiteOpenFactory, WASQLiteVFS } from '@powersync/web';

export const db = new PowerSyncDatabase({
  schema: AppSchema,
  database: new WASQLiteOpenFactory({
    dbFilename: 'exampleVFS.db',
    vfs: WASQLiteVFS.OPFSCoopSyncVFS,
    flags: {
      enableMultiTabs: typeof SharedWorker !== 'undefined'
    } 
  }),
  flags: {
    enableMultiTabs: typeof SharedWorker !== 'undefined'
  }
});

AccessHandlePoolVFS

• This implementation delivers optimal performance for single-tab applications.
• The system is not designed to handle multiple tab scenarios.
• The configuration is similar to OPFSCoopSyncVFS, but requires using WASQLiteVFS.AccessHandlePoolVFS.

​

VFS Compatibility Matrix

Note: There are known issues with OPFS when using Safari’s incognito mode.

​

Managing OPFS Storage

Unlike IndexedDB, OPFS storage cannot be managed through browser developer tools. The following utility functions can help you manage OPFS storage programmatically:

// Clear all OPFS storage
async function purgeVFS() {
  await powerSync.disconnect();
  await powerSync.close();
  
  const root = await navigator.storage.getDirectory();
  await new Promise(resolve => setTimeout(resolve, 1)); // Allow .db-wal to become deletable
  
  for await (const [name, entry] of root.entries!()) {
    try {
      if (entry.kind === 'file') {
        await root.removeEntry(name);
      } else if (entry.kind === 'directory') {
        await root.removeEntry(name, { recursive: true });
      }
    } catch (err) {
      console.error(`Failed to delete ${entry.kind}: ${name}`, err);
    }
  }
}

// List OPFS entries
async function listVfsEntries() {
  const root = await navigator.storage.getDirectory();
  for await (const [name, entry] of root.entries()) {
    console.log(`${entry.kind}: ${name}`);
  }
}

​

ORM Support

See JavaScript ORM Support for details.

​

Troubleshooting

See Troubleshooting for pointers to debug common issues.