PowerSync is a Postgres-SQLite sync layer, which helps developers to create local-first real-time reactive apps that work seamlessly both online and offline.

PowerSync JavaScript SDKs

powersync-js is the monorepo for PowerSync JavaScript SDKs.

Monorepo Structure: Packages

• packages/react-native

  • React Native SDK implementation (extension of packages/common)

• packages/web

  • JS Web SDK implementation (extension of packages/common)

• packages/react

  • React integration for PowerSync.

• packages/vue

  • Vue composables for PowerSync.

• packages/attachments

  • Attachments helper package for React Native and JavaScript/TypeScript projects.

• packages/kysely-driver

  • Kysely integration (ORM) for React Native and JavaScript/TypeScript projects.

• packages/common

  • Shared package: TypeScript implementation of a PowerSync database connector and streaming sync bucket implementation.

Demo Apps / Example Projects

Demo applications are located in the demos/ directory. Also see our Demo Apps / Example Projects gallery which lists all projects by the backend and client-side framework they use.

React Native

• demos/react-native-supabase-todolist: A React Native to-do list example app using a Supabase backend.
• demos/react-native-supabase-group-chat: A React Native group chat example app using a Supabase backend.
• demos/django-react-native-todolist A React Native to-do list example app using a Django backend.

Web

• demos/react-supabase-todolist: A React to-do list example app using the PowerSync Web SDK and a Supabase backend.

• demos/react-multi-client: A React widget that illustrates how data flows from one PowerSync client to another.

• demos/yjs-react-supabase-text-collab: A React real-time text editing collaboration example app powered by Yjs CRDTs and Tiptap, using the PowerSync Web SDK and a Supabase backend.

• demos/vue-supabase-todolist: A Vue to-do list example app using the PowerSync Web SDK and a Supabase backend.

• demos/angular-supabase-todolist An Angular to-do list example app using the PowerSync Web SDK and a Supabase backend.

• demos/example-webpack: A minimal example demonstrating bundling with Webpack.

• demos/example-vite: A minimal example demonstrating bundling with Vite.

• demos/example-nextjs: An example demonstrating setup with Next.js.

Electron

• demos/example-electron An Electron example web rendered app using the PowerSync Web SDK.

Capacitor

• demos/example-capacitor A Capacitor example app using the PowerSync Web SDK.

Tools

• tools/diagnostics-app: A standalone web app that presents stats about a user's local database (incl. tables and sync buckets).

Development

This monorepo uses pnpm.

Install workspace dependencies

pnpm install

Build packages

pnpm build:packages

Versioning

Development Packages

Development packages can be published by manually triggering the dev-packages workflow. Development packages are versioned as 0.0.0-{tag}-DATETIMESTAMP.

Production Packages

Pull requests should contain Changesets for changed packages.

Add changesets with

pnpm changeset add

Merging a PR with Changesets will automatically create a PR with version bumps. That PR will be merged when releasing.

React Native Quick SQLite Development

The PowerSync React Native SDK uses a fork of react-native-quick-sqlite

Testing live development changes to @journeyapps/react-native-quick-sqlite will not work with standard yarn link commands. Metro does not work well with symlinks https://github.com/facebook/metro/issues/286.

The process of releasing development packages for @journeyapps/react-native-quick-sqlite for each change can be tedious and slow. A faster (and hackier) method is to use mtsl which will watch and copy the package into this workspace's node_modules.

npm install -g mtsl

mtsl add -s "[source path to your react-native-quick-sqlite repo folder]" -d "[this workspaces root node_modules folder]"/@journeyapps/react-native-quick-sqlite

mtsl start "[the id returned from step above]"