Update demos to use sync streams (#878)

bean1352 · web-flow · commit 6d3cb2e98e0a · 2026-03-03T15:56:14.000+02:00
diff --git a/demos/django-react-native-todolist/README.md b/demos/django-react-native-todolist/README.md
@@ -58,13 +58,14 @@ Create a new PowerSync instance, connecting to the database of the Supabase proj
 Then deploy the following sync rules:
 
 ```yaml
-bucket_definitions:
+config:
+  edition: 3
+
+streams:
   user_lists:
-    # Separate bucket per todo list
-    parameters: select id as list_id from lists where owner_id = request.user_id()
-    data:
-      - select * from lists
-      - select * from todos
+    queries:
+      - SELECT * FROM lists WHERE owner_id = auth.user_id()
+      - SELECT todos.* FROM todos JOIN lists ON todos.list_id = lists.id WHERE lists.owner_id = auth.user_id()
 ```
 
 #### Configure The App
diff --git a/demos/nuxt-supabase-todolist/README.md b/demos/nuxt-supabase-todolist/README.md
@@ -46,7 +46,7 @@ This demo can be started with local PowerSync and Supabase services.
    docker run \
      -p 6060:6060 \
      -e POWERSYNC_CONFIG_B64=$(base64 -i ./powersync.yaml) \
-     -e POWERSYNC_SYNC_RULES_B64=$(base64 -i ./sync-rules.yaml) \
+     -e POWERSYNC_SYNC_RULES_B64=$(base64 -i ./sync-config.yaml) \
      --env-file ./.env \
      --network supabase_network_nuxt-supabase-todolist \
      --name powersync-nuxt journeyapps/powersync-service:latest
@@ -87,7 +87,7 @@ You can use either PowerSync Cloud or self-host PowerSync:
 - **PowerSync Cloud**: [Create a new project on the PowerSync dashboard](https://dashboard.powersync.com) and connect it to your Supabase database using the `powersync_role` credentials created in step 2.
 - **Self-hosting**: Follow the [self-hosting guide](https://docs.powersync.com/self-hosting/getting-started) to deploy your own PowerSync instance.
 
-The sync rules for this demo are provided in [`sync-rules.yaml`](sync-rules.yaml) in this directory.
+The sync streams for this demo are provided in [`sync-config.yaml`](sync-config.yaml) in this directory.
 
 ### 5. Set up local environment variables
 
@@ -131,7 +131,7 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to try out
 ├── db/
 │   └── seed.sql              # Database setup SQL
 ├── powersync.yaml             # PowerSync server configuration
-├── sync-rules.yaml           # PowerSync sync rules
+├── sync-config.yaml          # PowerSync sync streams
 └── nuxt.config.ts            # Nuxt configuration
 ```
 
diff --git a/demos/nuxt-supabase-todolist/pages/login.vue b/demos/nuxt-supabase-todolist/pages/login.vue
@@ -1,11 +1,11 @@
 <template>
   <UContainer class="h-[calc(100vh-var(--ui-header-height))] flex items-center justify-center px-4">
     <UPageCard class="max-w-sm w-full">
-      <UAuthForm :title="sign === 'in' ? 'Login' : 'Sign up'" icon="i-lucide-user" :fields="fields" @submit="onSubmit">
+      <UAuthForm :title="isSignIn ? 'Login' : 'Sign up'" icon="i-lucide-user" :fields="fields" @submit="onSubmit">
         <template #description>
-          {{ sign === 'up' ? "Don't have an account?" : 'Already have an account?' }}
-          <UButton variant="link" class="p-0" @click="sign = sign === 'up' ? 'in' : 'up'">
-            {{ sign === 'in' ? 'Sign In' : 'Sign Up' }} </UButton
+          {{ isSignIn ? "Don't have an account?" : 'Already have an account?' }}
+          <UButton variant="link" class="p-0" @click="toggleSign">
+            {{ isSignIn ? 'Sign Up' : 'Sign In' }} </UButton
           >.
         </template>
       </UAuthForm>
@@ -20,6 +20,8 @@ const user = useSupabaseUser();
 const toast = useToast();
 
 const sign = ref<'in' | 'up'>('in');
+const isSignIn = computed(() => sign.value === 'in');
+const toggleSign = () => (sign.value = sign.value === 'in' ? 'up' : 'in');
 
 watchEffect(() => {
   if (user.value) {
diff --git a/demos/nuxt-supabase-todolist/plugins/powersync.client.ts b/demos/nuxt-supabase-todolist/plugins/powersync.client.ts
@@ -2,9 +2,6 @@ import {
   AppSchemaWithDiagnostics,
 } from '~/powersync/AppSchema'
 import { SupabaseConnector } from '~/powersync/SuperbaseConnector'
-import { SyncClientImplementation } from '@powersync/web'
-
-
 export default defineNuxtPlugin({
   async setup(nuxtApp) {
     const db = new NuxtPowerSyncDatabase({
@@ -18,9 +15,7 @@ export default defineNuxtPlugin({
 
     await db.init()
 
-    await db.connect(connector, {
-      clientImplementation: SyncClientImplementation.RUST,
-    })
+    await db.connect(connector)
 
     const plugin = createPowerSyncPlugin({ database: db })
 
diff --git a/demos/nuxt-supabase-todolist/powersync.yaml b/demos/nuxt-supabase-todolist/powersync.yaml
@@ -13,8 +13,8 @@ storage:
   sslmode: disable
   # sslmode: verify-full
 
-sync_rules:
-  path: ./sync-rules.yaml
+sync_config:
+  path: ./sync-config.yaml
 
 port: !env PS_PORT
 
diff --git a/demos/nuxt-supabase-todolist/sync-config.yaml b/demos/nuxt-supabase-todolist/sync-config.yaml
@@ -0,0 +1,8 @@
+config:
+  edition: 3
+
+streams:
+  user_tasks:
+    auto_subscribe: true
+    queries:
+      - SELECT * FROM tasks WHERE user_id = auth.user_id()
diff --git a/demos/nuxt-supabase-todolist/sync-rules.yaml b/demos/nuxt-supabase-todolist/sync-rules.yaml
diff --git a/demos/react-multi-client/README.md b/demos/react-multi-client/README.md
@@ -38,10 +38,10 @@ The RLS rules defined in the `database.sql` script are setup to only allow the a
 
 Follow the [Connect PowerSync to Your Supabase](https://docs.powersync.com/integration-guides/supabase-+-powersync#connect-powersync-to-your-supabase) section.
 
-### 5. Create Sync Rules on PowerSync
+### 5. Create Sync Streams on PowerSync
 
-Create sync rules by following the [Configure Sync Rules](https://docs.powersync.com/integration-guides/supabase-+-powersync#configure-sync-rules) section.
-The sync rules for this demo are defined in [`sync-rules.yaml`](sync-rules.yaml) in this directory. Copy its contents and paste it into the 'sync-rules.yaml' file in the Dashboard as described in the guide.
+Create sync streams by following the [Configure Sync Streams](https://docs.powersync.com/integration-guides/supabase-+-powersync#configure-sync-streams) section.
+The sync streams for this demo are defined in [`sync-config.yaml`](sync-config.yaml) in this directory. Copy its contents and paste it into the sync streams editor in the Dashboard.
 
 ### 6. Set up local environment variables
 
diff --git a/demos/react-multi-client/sync-config.yaml b/demos/react-multi-client/sync-config.yaml
@@ -0,0 +1,8 @@
+config:
+  edition: 3
+
+streams:
+  user_lists:
+    auto_subscribe: true
+    queries:
+      - SELECT * FROM pebbles WHERE user_id = auth.user_id()
diff --git a/demos/react-multi-client/sync-rules.yaml b/demos/react-multi-client/sync-rules.yaml
diff --git a/demos/react-neon-tanstack-query-notes/README.md b/demos/react-neon-tanstack-query-notes/README.md
@@ -100,7 +100,7 @@ PowerSync uses logical replication to sync data from your Neon project to your P
 
 In the PowerSync dashboard, create a project, an instance and then create a database connection to your Neon database using the credentials from the "Connect" button in the Neon Console.
 
-### 7. Configure PowerSync auth and Sync Rules
+### 7. Configure PowerSync auth and Sync Streams
 
 ### Auth
 
@@ -110,34 +110,38 @@ Navigate to "Client Auth" in the PowerSync dashboard and configure:
 - Populate the "JWKS URI" with the value from the "JWKS URL" field in the Neon Console → Auth page
 - Populate the "JWT Audience" with your project root URL (e.g., `https://ep-restless-resonance-adom1z4w.neonauth.c-2.us-east-1.aws.neon.tech/`)
 
-### Sync Rules
+### Sync Streams
 
-Navigate to "Sync Rules" in the PowerSync dashboard and configure these sync rules:
+Navigate to "Sync Rules" in the PowerSync dashboard and configure these sync streams:
 
 ```yaml
 config:
-  edition: 2
-
-bucket_definitions:
-  by_user:
-    # Only sync rows belonging to the user
-    parameters: SELECT id as note_id FROM notes WHERE owner_id = request.user_id()
-    data:
-      - SELECT * FROM notes WHERE id = bucket.note_id
-      - SELECT * FROM paragraphs WHERE note_id = bucket.note_id
-  # Sync all shared notes to all users (not recommended for production)
+  edition: 3
+
+streams:
+  user_notes:
+    auto_subscribe: true
+    # Sync notes and paragraphs belonging to the authenticated user
+    queries:
+      - SELECT * FROM notes WHERE owner_id = auth.user_id()
+      - SELECT paragraphs.* FROM paragraphs
+          INNER JOIN notes ON notes.id = paragraphs.note_id
+          WHERE notes.owner_id = auth.user_id()
   shared_notes:
-    parameters: SELECT id as note_id from notes where shared = TRUE
-    data:
-      - SELECT * FROM notes WHERE id = bucket.note_id
-      - SELECT * FROM paragraphs WHERE note_id = bucket.note_id
+    auto_subscribe: true
+    # Sync all shared notes to all users (not recommended for production)
+    queries:
+      - SELECT * FROM notes WHERE shared = TRUE
+      - SELECT paragraphs.* FROM paragraphs
+          INNER JOIN notes ON notes.id = paragraphs.note_id
+          WHERE notes.shared = TRUE
 ```
 
 ### 8. Test Sync
 
-You can use the Sync Test to validate your Sync Rules, but since your app won't have any data at this point yet, you can skip this step for now.
+You can use the Sync Test to validate your Sync Streams, but since your app won't have any data at this point yet, you can skip this step for now.
 
-Click on "Sync Test" test in the PowerSync dashboard, and enter the UUID of a user in your Neon Auth database to generate a test JWT. Then, click "Launch Sync Diagnostics Client" to test the sync rules.
+Click on "Sync Test" in the PowerSync dashboard, and enter the UUID of a user in your Neon Auth database to generate a test JWT. Then, click "Launch Sync Diagnostics Client" to test the sync streams.
 
 ### 9. Start the Development Server
 
diff --git a/demos/react-neon-tanstack-query-notes/src/lib/powersync.ts b/demos/react-neon-tanstack-query-notes/src/lib/powersync.ts
@@ -8,7 +8,6 @@ import {
   createBaseLogger,
   CrudEntry,
   UpdateType,
-  SyncClientImplementation,
 } from "@powersync/web";
 import { client } from "@/lib/auth";
 import {
@@ -214,9 +213,7 @@ export async function connectPowerSync() {
   if (isInitialized) {
     return;
   }
-  await powersync.connect(neonConnector, {
-    clientImplementation: SyncClientImplementation.RUST,
-  });
+  await powersync.connect(neonConnector);
   isInitialized = true;
   console.log("powersync connected");
 }
diff --git a/demos/react-supabase-todolist-optional-sync/README.md b/demos/react-supabase-todolist-optional-sync/README.md
@@ -60,16 +60,20 @@ It does the following:
 
 Create a new PowerSync instance, connecting to the database of the Supabase project. See instructions [here](https://docs.powersync.com/integration-guides/supabase-+-powersync#connect-powersync-to-your-supabase).
 
-Then deploy the following sync rules:
+Then deploy the following sync streams:
 
 ```yaml
-bucket_definitions:
-  user_lists:
-    # Separate bucket per todo list
-    parameters: select id as list_id from lists where owner_id = request.user_id()
-    data:
-      - select * from lists where id = bucket.list_id
-      - select * from todos where list_id = bucket.list_id
+config:
+  edition: 3
+
+streams:
+  user_data:
+    auto_subscribe: true
+    queries:
+      - SELECT * FROM lists WHERE owner_id = auth.user_id()
+      - SELECT todos.* FROM todos
+          INNER JOIN lists ON todos.list_id = lists.id
+          WHERE lists.owner_id = auth.user_id()
 ```
 
 ## Configure the app
diff --git a/demos/react-supabase-todolist-sync-streams/README.md b/demos/react-supabase-todolist-sync-streams/README.md
@@ -23,7 +23,7 @@ streams:
     query: SELECT * FROM todos WHERE list_id = subscription.parameter('list') AND list_id IN (SELECT id FROM lists WHERE owner_id = auth.user_id())
 
 config:
-  edition: 2
+  edition: 3
 ```
 
 Switch into the demo's directory:
diff --git a/demos/react-supabase-todolist/README.md b/demos/react-supabase-todolist/README.md
@@ -4,6 +4,8 @@
 
 Demo app demonstrating use of the [PowerSync SDK for Web](https://www.npmjs.com/package/@powersync/web) together with Supabase.
 
+This demo uses [Sync Streams](https://docs.powersync.com/usage/sync-streams). Both lists and todos are auto-subscribed.
+
 ## Run Demo
 
 Prerequisites:
diff --git a/demos/yjs-react-supabase-text-collab/README.md b/demos/yjs-react-supabase-text-collab/README.md
@@ -13,7 +13,7 @@ This demo is built using the [PowerSync JS web SDK](https://docs.powersync.com/c
 Switch into the demo's directory:
 
 ```bash
-cd demos/vue-supabase-todolist
+cd demos/yjs-react-supabase-text-collab
 ```
 
 Use [pnpm](https://pnpm.io/installation) to install dependencies:
@@ -31,7 +31,7 @@ Follow the [instructions](https://supabase.com/docs/guides/cli/getting-started)
 Copy the environment variables template file
 
 ```bash
-cp .env.template .env.local
+cp .env.local.template .env.local
 ```
 
 Start the Supabase project
@@ -40,15 +40,15 @@ Start the Supabase project
 supabase start
 ```
 
-Copy the `anon key` and `JWT secret` into the `.env` file.
+Copy the `anon key` and `JWT secret` into the `.env.local` file.
 
 Run the PowerSync service with
 
 ```bash
 docker run \
 -p 8080:8080 \
 -e POWERSYNC_CONFIG_B64=$(base64 -i ./powersync.yaml) \
--e POWERSYNC_SYNC_RULES_B64=$(base64 -i ./sync-rules.yaml) \
+-e POWERSYNC_SYNC_RULES_B64=$(base64 -i ./sync-config.yaml) \
 --env-file ./.env.local \
 --network supabase_network_yjs-react-supabase-text-collab \
 --name my-powersync journeyapps/powersync-service:latest
@@ -78,11 +78,11 @@ Then, in the [PowerSync dashboard](https://powersync.journeyapps.com/), create a
 8. Tick the "Use Supabase Auth" checkbox and configure the JWT secret.
 9. Click "Save" to save all the changes to your PowerSync instance. The instance will now be deployed — this may take a minute or two.
 
-### 4. Create Sync Rules on PowerSync
+### 4. Create Sync Streams on PowerSync
 
-1. Open the [`sync-rules.yaml`](sync-rules.yaml) in this repo and copy the contents.
-2. In the [PowerSync dashboard](https://powersync.journeyapps.com/), paste that into the 'sync-rules.yaml' editor panel.
-3. Click the "Deploy sync rules" button and select your PowerSync instance from the drop-down list.
+1. Open the [`sync-config.yaml`](sync-config.yaml) in this repo and copy the contents.
+2. In the [PowerSync dashboard](https://powersync.journeyapps.com/), paste that into the sync streams editor panel.
+3. Click the "Deploy sync streams" button and select your PowerSync instance from the drop-down list.
 
 ### 5. Set up local environment variables
 
@@ -138,7 +138,7 @@ Note that this is not a production-grade implementation of merging updates – t
 To-do
 
 - [ ] Add user sessions. For ease of demoing, still allow anonymously signing in (perhaps using [this Supabase workaround](https://github.com/supabase/gotrue/issues/68)), but keep track of session data so that each user has a unique `user_id` which we can associate with edits to the document.
-- [ ] Improve sync rules: Use a many-to-many relationship between users and documents, so that all documents and their updates are not synced to all users. Dependent on user sessions.
+- [ ] Improve sync streams: Use a many-to-many relationship between users and documents, so that all documents and their updates are not synced to all users. Dependent on user sessions.
 - [ ] Add suggested RLS rules for Supabase. Dependent on user sessions.
 - [ ] Add live cursor support; allow user to set their name, prepopulate with auto-generated name if none set. Dependent on user sessions.
 - [ ] Show PowerSync connection status; allow user to toggle offline/online for testing purposes
diff --git a/demos/yjs-react-supabase-text-collab/sync-config.yaml b/demos/yjs-react-supabase-text-collab/sync-config.yaml
@@ -0,0 +1,11 @@
+config:
+  edition: 3
+
+streams:
+  documents:
+    # Allow remote changes to be synchronized even while there are local changes
+    priority: 0
+    auto_subscribe: true
+    queries:
+      - SELECT * FROM documents WHERE id = connection.parameter('document_id')
+      - SELECT id, document_id, base64(update_data) as update_b64 FROM document_updates WHERE document_id = connection.parameter('document_id')
diff --git a/demos/yjs-react-supabase-text-collab/sync-rules.yaml b/demos/yjs-react-supabase-text-collab/sync-rules.yaml
diff --git a/tools/diagnostics-app/README.md b/tools/diagnostics-app/README.md
@@ -99,7 +99,7 @@ Execute read-only SQL queries against the live PowerSync database:
 
 The schema is dynamically inferred from downloaded data and automatically updated as new data arrives. This page displays the current inferred schema for reference.
 
-Note: Tables with 0 synced rows won't appear in the schema. To refresh after sync rule changes, use "Clear & Redownload" on the Sync Overview page.
+Note: Tables with 0 synced rows won't appear in the schema. To refresh after sync rule/stream changes, use "Clear & Redownload" on the Sync Overview page.
 
 ### Client Parameters
 
diff --git a/tools/diagnostics-app/src/app/views/inspector-overview.tsx b/tools/diagnostics-app/src/app/views/inspector-overview.tsx
@@ -215,7 +215,7 @@ export default function InspectorOverviewPage() {
           <div className="space-y-4">
             <h2 className="text-xl font-semibold">PowerSync Stats</h2>
             <div className="grid grid-cols-2 gap-4 md:grid-cols-3">
-              <StatCard label="Buckets" value={powerSyncStats.bucketCount.toLocaleString()} tooltip="Number of sync buckets defined by your sync rules" />
+              <StatCard label="Buckets" value={powerSyncStats.bucketCount.toLocaleString()} tooltip="Number of sync buckets defined by your sync streams" />
               <StatCard label="Total Rows" value={powerSyncStats.totalRows.toLocaleString()} tooltip="Total synced data rows across all ps_data__ tables" />
               <StatCard label="Total Ops" value={powerSyncStats.totalOps.toLocaleString()} tooltip="Total sync operations processed. When this significantly exceeds total rows, compacting may help." />
               <StatCard label="Data Size" value={formatBytes(powerSyncStats.dataSize)} tooltip="Sum of all column data sizes across synced rows" />
