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

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

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

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

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

export const db = new PowerSyncDatabase({
  schema: AppSchema,
  database: {
    dbFilename: 'exampleVFS.db',
    vfs: WASQLiteVFS.OPFSCoopSyncVFS
  }
});

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

export const db = new PowerSyncDatabase({
  schema: AppSchema,
  database: {
    dbFilename: 'exampleVFS.db',
    vfs: WASQLiteVFS.AccessHandlePoolVFS
  }
});

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

export const db = new PowerSyncDatabase({
  schema: AppSchema,
  database: {
    dbFilename: 'exampleVFS.db',
    vfs: WASQLiteVFS.OPFSWriteAheadVFS,
    additionalReaders: 2
  }
});

export const db = new PowerSyncDatabase({
  schema: AppSchema,
  database: {
    dbFilename: `memory-${crypto.randomUUID()}.db`,
    vfs: WASQLiteVFS.InMemoryVfs,
    enableMultiTabs: false
  }
});

import { InMemoryWriteAheadLogPool } from '@powersync/web/extra/shared-memory-pool';
import { PowerSyncDatabase } from '@powersync/web';

export const db = new PowerSyncDatabase({
  schema: AppSchema,
  opened: new InMemoryWriteAheadLogPool({
    numWorkers: 3 // Uses one writer, two additional workers for reads.
  }),
});

// 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}`);
  }
}

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

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,
});

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

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 }),
});