JavaScript Web SDK

// 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'];

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

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',
    // Select storage based on browser capabilities.
    vfs: 'auto',
    // Optional. Directory where the database file is located.
    // dbLocation: 'path/to/directory'
  }
});

export const setupPowerSync = async () => {
  // Uses the backend connector that you create in the next step
  const connector = new Connector();
  db.connect(connector);
};

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

export class Connector {
  async fetchCredentials() {
    // Implement fetchCredentials to obtain a JWT from your authentication service. 
    // See https://docs.powersync.com/configuration/auth/overview
    return {
        endpoint: '[Your PowerSync instance URL or self-hosted endpoint]',
        // Use a development token (see Authentication Setup https://docs.powersync.com/configuration/auth/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-sdks/usage-examples#send-changes-in-local-data-to-your-backend-service
  }
}

// Subscribe to a stream with parameters
const sub = await db.syncStream('list_todos', { list_id: 'abc123' }).subscribe();

// Wait for the initial data to sync
await sub.waitForFirstSync();

// The stream's rows are now in the local SQLite database.
// TODO: Read the todos for this list with a local query.

// When the data is no longer needed
sub.unsubscribe();

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

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

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

// OR: delete the list and its todos in one transaction
export const deleteListWithTodos = async (id) => {
  await db.writeTransaction(async (tx) => {
    await tx.execute('DELETE FROM todos WHERE list_id = ?', [id]);
    await tx.execute('DELETE FROM lists WHERE id = ?', [id]);
  });
};

// Opt in when connecting
await db.connect(connector, { checkpointMode: 'requests' });

// Later: wait until local data is up to date
const checkpoint = await db.requestCheckpoint();
await checkpoint.waitForSync({ signal: AbortSignal.timeout(30_000) });

import { createConsoleLogger, LogLevels } from '@powersync/web';

// Create a logger with trace minimum level to see all log messages
// Available levels: trace, debug, info, warn, error
const logger = createConsoleLogger({ minLevel: LogLevels.trace });

chrome://inspect/#workers

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

// HTTP Streaming (default)
db.connect(connector);

// WebSocket
db.connect(connector, { connectionMethod: SyncStreamConnectionMethod.WEB_SOCKET });

import { PowerSyncDatabase } from '@powersync/web';
import { AppSchema } from '@/library/powersync/AppSchema';

export const db = new PowerSyncDatabase({
  schema: AppSchema,
  database: {
    dbFilename: 'example.db',
    enableMultiTabs: true,
  },
  broadcastLogs: true,
});

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

export const db = new PowerSyncDatabase({
  schema: AppSchema,
  database: {
    dbFilename: 'my_app_db.sqlite',
    enableMultiTabs: false,
  },
});

import { createConsoleLogger, LogLevels, PowerSyncDatabase } from '@powersync/web';

export const db = new PowerSyncDatabase({
  schema: AppSchema,
  database: {
    dbFilename: 'my_app_db.sqlite',
    databaseWorkerLogLevel: LogLevels.debug,
  },
  sync: {
    logLevel: LogLevels.debug,
  },
  logger: createConsoleLogger({ minLevel: LogLevels.debug }),
});