Documentation edits made through Mintlify web editor

Author: benitav

client-sdk-references/javascript-web.mdx

@@ -1,25 +1,22 @@
 ---
 title: "JavaScript Web"
 description: "Full SDK reference for using PowerSync in JavaScript Web clients"
-sidebarTitle: Overview
+sidebarTitle: "Overview"
 ---
 
 import SdkFeatures from '/snippets/sdk-features.mdx';
 import JavaScriptWebInstallation from '/snippets/javascript-web/installation.mdx';
 
-<CardGroup>
+<CardGroup cols={2}>
   <Card title="PowerSync SDK on NPM" icon="npm" href="https://www.npmjs.com/package/@powersync/web">
-    This SDK is distributed via NPM [\[External link\].](https://www.npmjs.com/package/@powersync/web)
+    This SDK is distributed via NPM [[External link].](https://www.npmjs.com/package/@powersync/web)
   </Card>
-
   <Card title="Source Code" icon="github" href="https://github.com/powersync-ja/powersync-js/tree/main/packages/web">
     Refer to packages/web in the powersync-js repo on GitHub.
   </Card>
-
   <Card title="API Reference" icon="book" href="https://powersync-ja.github.io/powersync-js/web-sdk">
-    Full API reference for the PowerSync SDK [\[External link\].](https://powersync-ja.github.io/powersync-js/web-sdk)
+    Full API reference for the PowerSync SDK [[External link].](https://powersync-ja.github.io/powersync-js/web-sdk)
   </Card>
-
   <Card title="Example Projects" icon="code" href="/resources/demo-apps-example-projects">
     Gallery of example projects/demo apps built with JavaScript Web stacks and PowerSync.
   </Card>
@@ -37,9 +34,9 @@ import JavaScriptWebInstallation from '/snippets/javascript-web/installation.mdx
 
 Before implementing the PowerSync SDK in your project, make sure you have completed these steps:
 
-* Signed up for a PowerSync Cloud account ([here](https://accounts.journeyapps.com/portal/powersync-signup?s=docs)) or [self-host PowerSync](/self-hosting/getting-started).
-* [Configured your backend database](/installation/database-setup) and connected it to your PowerSync instance.
-* [Installed](/client-sdk-references/javascript-web#installation) the PowerSync Web SDK.
+- Signed up for a PowerSync Cloud account ([here](https://accounts.journeyapps.com/portal/powersync-signup?s=docs)) or [self-host PowerSync](/self-hosting/getting-started).
+- [Configured your backend database](/installation/database-setup) and connected it to your PowerSync instance.
+- [Installed](/client-sdk-references/javascript-web#installation) the PowerSync Web SDK.
 
 ### 1. Define the Schema
 
@@ -55,7 +52,7 @@ This schema represents a "view" of the downloaded data. No migrations are requir
   Similar functionality exists in the [CLI](/usage/tools/cli).
 </Info>
 
-The types available are `text`, `integer` and `real`. These should map directly to the values produced by the [Sync Rules](/usage/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](/usage/sync-rules/types) in the *Sync Rules* documentation.
+The types available are `text`, `integer` and `real`. These should map directly to the values produced by the [Sync Rules](/usage/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](/usage/sync-rules/types) in the _Sync Rules_ documentation.
 
 **Example**:
 
@@ -110,7 +107,7 @@ Its primary functions are to record all changes in the local database, whether o
 ```js
 import { PowerSyncDatabase } from '@powersync/web';
 import { Connector } from './Connector';
-import { AppSchema } from './Schema';
+import { AppSchema } from './AppSchema';
 
 export const db = new PowerSyncDatabase({
   // The schema you defined in the previous step
@@ -151,9 +148,9 @@ It is used to:
 
 Accordingly, the connector must implement two methods:
 
-1. [PowerSyncBackendConnector.fetchCredentials](https://github.com/powersync-ja/powersync-js/blob/ed5bb49b5a1dc579050304fab847feb8d09b45c7/packages/common/src/client/connection/PowerSyncBackendConnector.ts#L16) - This is called every couple of minutes and is used to obtain credentials for your app backend API. -> See [Authentication Setup](/installation/authentication-setup) for instructions on how the credentials should be generated.
+1. [PowerSyncBackendConnector.fetchCredentials](https://github.com/powersync-ja/powersync-js/blob/ed5bb49b5a1dc579050304fab847feb8d09b45c7/packages/common/src/client/connection/PowerSyncBackendConnector.ts#L16) - This is called every couple of minutes and is used to obtain credentials for your app backend API. -\> See [Authentication Setup](/installation/authentication-setup) for instructions on how the credentials should be generated.
 2. [PowerSyncBackendConnector.uploadData](https://github.com/powersync-ja/powersync-js/blob/ed5bb49b5a1dc579050304fab847feb8d09b45c7/packages/common/src/client/connection/PowerSyncBackendConnector.ts#L24) - Use this to upload client-side changes to your app backend.
-   -> See [Writing Client Changes](/installation/app-backend-setup/writing-client-changes) for considerations on the app backend implementation.
+   -\> See [Writing Client Changes](/installation/app-backend-setup/writing-client-changes) for considerations on the app backend implementation.
 
 **Example**:
 
@@ -189,10 +186,10 @@ Once the PowerSync instance is configured you can start using the SQLite DB func
 
 The most commonly used CRUD functions to interact with your SQLite data are:
 
-* [PowerSyncDatabase.get](/client-sdk-references/javascript-web#fetching-a-single-item) - get (SELECT) a single row from a table.
-* [PowerSyncDatabase.getAll](/client-sdk-references/javascript-web#querying-items-powersync.getall) - get (SELECT) a set of rows from a table.
-* [PowerSyncDatabase.watch](/client-sdk-references/javascript-web#watching-queries-powersync.watch) - execute a read query every time source tables are modified.
-* [PowerSyncDatabase.execute](/client-sdk-references/javascript-web#mutations-powersync.execute) - execute a write (INSERT/UPDATE/DELETE) query.
+- [PowerSyncDatabase.get](/client-sdk-references/javascript-web#fetching-a-single-item) - get (SELECT) a single row from a table.
+- [PowerSyncDatabase.getAll](/client-sdk-references/javascript-web#querying-items-powersync.getall) - get (SELECT) a set of rows from a table.
+- [PowerSyncDatabase.watch](/client-sdk-references/javascript-web#watching-queries-powersync.watch) - execute a read query every time source tables are modified.
+- [PowerSyncDatabase.execute](/client-sdk-references/javascript-web#mutations-powersync.execute) - execute a write (INSERT/UPDATE/DELETE) query.
 
 ### Fetching a Single Item
 
@@ -259,6 +256,7 @@ const deleteList = async (id) => {
   });
 };
 ```
+
 ## Configure Logging
 
 ```js
@@ -299,7 +297,6 @@ This SDK supports two methods for streaming sync commands:
    - 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](https://roadmap.powersync.com/c/88-support-for-blob-column-types) feature.
-
 2. **HTTP Streaming (Legacy)**
    - This is the original implementation method.
    - This method will not support the future BLOB column feature.
@@ -319,14 +316,17 @@ powerSync.connect(connector, { connectionMethod: SyncStreamConnectionMethod.HTTP
 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:
@@ -350,17 +350,18 @@ export const db = new PowerSyncDatabase({
 ```
 
 ##### 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
 
-| VFS Type | Multi-Tab Support (Standard Browsers) | Multi-Tab Support (Safari/iOS) | Notes |
-|----------|---------------------------|---------------------|--------|
-| IDBBatchAtomicVFS | ✅ | ❌ | Default, some Safari stability issues |
-| OPFSCoopSyncVFS | ✅ | ✅ | Recommended for multi-tab support |
-| AccessHandlePoolVFS | ❌ | ❌ | Best for single-tab applications |
+| VFS Type            | Multi-Tab Support (Standard Browsers) | Multi-Tab Support (Safari/iOS) | Notes                                 |
+| ------------------- | ------------------------------------- | ------------------------------ | ------------------------------------- |
+| IDBBatchAtomicVFS   | ✅                                     | ❌                              | Default, some Safari stability issues |
+| OPFSCoopSyncVFS     | ✅                                     | ✅                              | Recommended for multi-tab support     |
+| AccessHandlePoolVFS | ❌                                     | ❌                              | Best for single-tab applications      |
 
 **Note**: There are known issues with OPFS when using Safari's incognito mode.
 
@@ -405,4 +406,4 @@ See [JavaScript ORM Support](/client-sdk-references/javascript-web/javascript-or
 
 ## Troubleshooting
 
-See [Troubleshooting](/resources/troubleshooting) for pointers to debug common issues.
+See [Troubleshooting](/resources/troubleshooting) for pointers to debug common issues.