chore(docs): PG on the client

docs/api/clients/typescript.md

@@ -10,19 +10,19 @@ sidebar_position: 10
 The Typescript client provides a number of functions for developing front-end applications with Electric: 
 
 - [Authenticating](../../usage/auth/) with the sync service
-- [Synchronising database](#shapes) to a local SQLite database
+- [Synchronising database](#shapes) to a local embedded database
 - [Type-safe data access](#queries) to read and update the database
 - [Reactive live queries](#live-queries) that update in realtime as the database changes
 
 ## Instantiation
 
 A Typescript client comprises of:
 
-1. SQLite database connection from a [supported driver](../../integrations/drivers/)
+1. A local database connection from a [supported driver](../../integrations/drivers/)
 2. A client schema [generated using the generator command](../cli.md#generate)
 3. A [configuration object](#configuration)
 
-To instantiate the client, these are passed to an `electrify` function that is specific to your SQLite database driver and platform.
+To instantiate the client, these are passed to an `electrify` function that is specific to your database driver and platform.
 
 ```ts
 import { schema } from './generated/client'

docs/examples/basic.md

@@ -9,15 +9,15 @@ import BrowserOnly from '@docusaurus/BrowserOnly'
 
 # Basic example
 
-See the basic web example running online at [basic-items.electric-sql.com](https://basic-items.electric-sql.com):
+See the basic web example running online using the SQLite driver at [basic-items.electric-sql.com](https://basic-items.electric-sql.com) and using PGlite at [basic-items-pg.electric-sql.com/](https://basic-items-pg.electric-sql.com/).
 
 <div className="my-6">
 
 [![Basic example sreenshot](./basic-demo-screenshot.png)](https://basic-items.electric-sql.com)
 
 </div>
 
-It's a basic app running in the web browser [using wa-sqlite](../integrations/drivers/web/wa-sqlite.md). You can also open in your mobile browser by scanning this QR code:
+It's a basic app running in the web browser [using wa-sqlite](../integrations/drivers/web/wa-sqlite.md) or [PGlite](../integrations/drivers/web/pglite.md). You can also open in your mobile browser by scanning this QR code:
 
 <div className="grid grid-cols-1 gap-4 my-6 mb-8">
   <div className="tile">
@@ -57,10 +57,16 @@ Clone the monorepo:
 git clone https://github.com/electric-sql/electric
 ```
 
-Change into the `web-wa-sqlite` example directory:
+Change into the `web-wa-sqlite` example directory for the wa-sqlite version:
 
 ```shell
 cd electric/examples/web-wa-sqlite
 ```
 
 Follow the instructions in the [README.md](https://github.com/electric-sql/electric/blob/main/examples/web-wa-sqlite/README.md) and see the page here on [running the examples](./notes/running).
+
+Alternatively the `web-pglite` example directory contains the PGlite version:
+
+```shell
+cd electric/examples/web-pglite
+```

docs/examples/linear-lite.md

@@ -9,7 +9,7 @@ import BrowserOnly from '@docusaurus/BrowserOnly'
 
 # LinearLite example
 
-This LinearLite example is a simplified clone of [Linear](https://linear.app) developed using ElectricSQL. You can open it online at [linear-lite.electric-sql.com](https://linear-lite.electric-sql.com):
+This LinearLite example is a simplified clone of [Linear](https://linear.app) developed using ElectricSQL. We have two versions available online, one using [wa-sqlite](../integrations/drivers/web/wa-sqlite.md) at [linear-lite.electric-sql.com](https://linear-lite.electric-sql.com) and another using [PGlite](../integrations/drivers/web/pglite.md) at [linear-lite-pg.electric-sql.com](https://linear-lite-pg.electric-sql.com/):
 
 <div className="my-6">
 

docs/integrations/drivers/_category_.yml

@@ -1,6 +1,6 @@
 customProps:
   description: >-
-    Adapt the SQLite database driver for your target environment.
+    Adapt the local database driver for your target environment.
   hide_overview: true
   icon: /img/icons/nodejs.png
 link:

docs/integrations/drivers/index.md

@@ -5,11 +5,11 @@ sidebar_position: 10
 
 import DocCardList from '@theme/DocCardList';
 
-Adapt the SQLite database driver for your target environment.
+Adapt the local database driver for your target environment.
 
 ## How drivers work
 
-ElectricSQL works with existing SQLite database drivers. Connect to your local SQLite database using your existing driver library. Then pass the database `conn` to your driver adapter's `electrify` function when [instantiating your Client](../../usage/data-access/client.md#instantiating-the-client).
+The ElectricSQL client works with existing SQLite and Postgres database drivers as well as [PGlite](http://github.com/electric-sql/pglite/), our WASM build of Postgres. Connect to your local database using your existing driver library. Then pass the database `conn` to your driver adapter's `electrify` function when [instantiating your Client](../../usage/data-access/client.md#instantiating-the-client).
 
 ## Supported drivers
 

docs/integrations/drivers/mobile/_category_.yml

@@ -1,7 +1,7 @@
 label: Mobile
 customProps:
   description: >-
-    SQLite driver adapters for mobile apps.
+    Database driver adapters for mobile apps.
   hide_overview: true
   icon: /img/icons/android.svg
 position: 20

docs/integrations/drivers/other/_category_.yml

@@ -1,7 +1,7 @@
 label: Other
 customProps:
   description: >-
-    Create your own SQLite driver adapter.
+    Create your own database driver adapter.
   hide_overview: true
   icon: /img/icons/other.svg
 position: 40

docs/integrations/drivers/other/generic.md

@@ -5,7 +5,7 @@ description: >-
 sidebar_position: 10
 ---
 
-You can integrate any SQLite database driver by adapting it to the ElectricSQL [`DatabaseAdapter` interface](https://github.com/electric-sql/electric/blob/main/clients/typescript/src/electric/adapter.ts):
+You can integrate any SQLite or Postgres database driver by adapting it to the ElectricSQL [`DatabaseAdapter` interface](https://github.com/electric-sql/electric/blob/main/clients/typescript/src/electric/adapter.ts):
 
 ```tsx
 export interface DatabaseAdapter {

docs/integrations/drivers/server/_category_.yml

@@ -1,7 +1,7 @@
 label: Server
 customProps:
   description: >-
-    SQLite driver adapters for the server.
+    Database driver adapters for NodeJS on the server.
   hide_overview: true
   icon: /img/icons/nodejs.png
 position: 30

docs/integrations/drivers/server/node.md → docs/integrations/drivers/server/better-sqlite3.md

@@ -1,5 +1,5 @@
 ---
-title: NodeJS
+title: better-sqlite3
 ---
 
 ElectricSQL supports [Node.js](https://nodejs.org) server application using the [better-sqlite3](https://github.com/WiseLibs/better-sqlite3) driver.

docs/integrations/drivers/server/pglite.md

@@ -0,0 +1,56 @@
+---
+title: PGlite
+---
+
+ElectricSQL supports [Node.js](https://nodejs.org) server applications using [PGlite](https://github.com/electric-sql/pglite/), our lightweight WebAssembly build of Postgres.
+
+## Dependencies
+
+Add `@electric-sql/pglite` as a dependency to your app, e.g.:
+
+```shell
+npm install @electric-sql/pglite
+```
+
+See the [PGlite repo](https://github.com/electric-sql/pglite/) for more information.
+
+## Usage
+
+```tsx
+// Import the PGlite database client.
+import { electrify } from 'electric-sql/pglite'
+
+// Import the adapter to electrify PGlite from the ElectricSQL library.
+import { PGlite } from '@electric-sql/pglite'
+
+// Import your generated database schema.
+import { schema } from './generated/client'
+
+// Define custom configuration if needed
+const config = {
+  url: 'https://example.com:5133'
+}
+
+// Create the PGlite database connection. The first argument
+// is your Postgres `pgdata` directory. Changing this will 
+// create/use a new local database.
+const conn = new PGlite('/path/to/postgres/datadir')
+
+// Instantiate your electric client.
+const electric = await electrify(conn, schema, config)
+
+// Connect to the sync service, passing along your authentication token
+// See Usage -> Authentication for more details.
+await electric.connect('your token')
+```
+
+You can now use the client to read, write and sync data, e.g.:
+
+```tsx
+const { db } = electric
+
+const results = await db.projects.findMany()
+console.log(results)
+```
+
+See <DocPageLink path="usage/data-access" /> and <DocPageLink path="integrations/frontend" /> for more information.

docs/integrations/drivers/server/postgres.md

@@ -0,0 +1,56 @@
+---
+title: node-postgres
+---
+
+ElectricSQL supports [Node.js](https://nodejs.org) server applications using the [node-postgres](https://node-postgres.com) driver.
+
+## Dependencies
+
+Add `pg` as a dependency to your app, e.g.:
+
+```shell
+npm install pg
+```
+
+## Usage
+
+```tsx
+// Import the node-postgres database client.
+import pg from 'pg'
+
+// Import the adapter to electrify node-postgres from the ElectricSQL library.
+import { PGlite } from '@electric-sql/node-postgres'
+
+// Import your generated database schema.
+import { schema } from './generated/client'
+
+// Define custom configuration if needed
+const config = {
+  url: 'https://example.com:5133'
+}
+
+// Create the node-postgres database connection.
+const conn = new pg.Client({
+  // Connection configuration, see:
+  // https://node-postgres.com/apis/client
+})
+await conn.connect()
+
+// Instantiate your electric client.
+const electric = await electrify(conn, schema, config)
+
+// Connect to the sync service, passing along your authentication token
+// See Usage -> Authentication for more details.
+await electric.connect('your token')
+```
+
+You can now use the client to read, write and sync data, e.g.:
+
+```tsx
+const { db } = electric
+
+const results = await db.projects.findMany()
+console.log(results)
+```
+
+See <DocPageLink path="usage/data-access" /> and <DocPageLink path="integrations/frontend" /> for more information.

docs/integrations/drivers/web/_category_.yml

@@ -1,7 +1,7 @@
 label: Web
 customProps:
   description: >-
-    SQLite driver adapters for the web.
+    Database driver adapters for the web.
   hide_overview: true
   icon: /img/icons/firefox.svg
 position: 10

docs/integrations/drivers/web/pglite.md

@@ -0,0 +1,64 @@
+---
+title: PGlite
+---
+
+ElectricSQL supports running in the web browser using [PGlite](https://github.com/electric-sql/pglite/), our lightweight WebAssembly build of Postgres that supports in-browser persistence using IndexedDB.
+
+## Dependencies
+
+Add `@electric-sql/pglite` as a dependency to your app, e.g.:
+
+```shell
+npm install @electric-sql/pglite
+```
+
+See the [PGlite repo](https://github.com/electric-sql/pglite/) for more information.
+
+## Usage
+
+```tsx
+// Import the PGlite database client.
+import { electrify } from 'electric-sql/pglite'
+
+// Import the adapter to electrify PGlite from the ElectricSQL library.
+import { PGlite } from '@electric-sql/pglite'
+
+// Import your generated database schema.
+import { schema } from './generated/client'
+
+// Define custom configuration if needed
+const config = {
+  url: 'https://example.com:5133'
+}
+
+// Create the PGlite database connection. The first argument
+// is your database name. Changing this will create/use a new
+// local database file.
+// PGlite uses a `idb://` prefix to specify that the database
+// is stored in indexedDB.
+const conn = new PGlite('idb://electric.db', {
+  // You can optionally use the relaxed durability mode to 
+  // improve responsiveness.
+  // This schedules flush to indexedDB for after a query has
+  // returned.
+  relaxedDurability: true,
+})
+
+// Instantiate your electric client.
+const electric = await electrify(conn, schema, config)
+
+// Connect to the sync service, passing along your authentication token
+// See Usage -> Authentication for more details.
+await electric.connect('your token')
+```
+
+You can now use the client to read, write and sync data, e.g.:
+
+```tsx
+const { db } = electric
+
+const results = await db.projects.findMany()
+console.log(results)
+```
+
+See the [examples/web-wa-sqlite](https://github.com/electric-sql/electric/tree/main/examples/web-wa-sqlite) demo app, <DocPageLink path="usage/data-access" /> and <DocPageLink path="integrations/frontend" /> for more information.

docs/quickstart/_setup_manual.md

@@ -36,7 +36,7 @@ See <DocPageLink path="usage/installation/service" /> for more info.
 
 ### Typescript client
 
-Add the `electric-sql` library to your web or mobile app, along with an [SQLite driver](../integrations/drivers/index.md):
+Add the `electric-sql` library to your web or mobile app, along with an [SQLite or Postgres driver](../integrations/drivers/index.md):
 
 ```shell
 npm install electric-sql

docs/quickstart/index.md

@@ -76,7 +76,7 @@ ELECTRIC GRANT ALL
 
 ### Instantiate
 
-Wrap your [SQLite driver](../integrations/drivers/index.md) with a type-safe, schema-aware [database Client](../usage/data-access/client.md):
+Wrap your local [database driver](../integrations/drivers/index.md) with a type-safe, schema-aware [database Client](../usage/data-access/client.md):
 
 ```tsx
 import { electrify, ElectricDatabase } from 'electric-sql/wa-sqlite'

docs/recipes/01-read-only/data-viewer.md

@@ -27,7 +27,7 @@ In data-driven applications, providing users with intuitive tools to explore and
 
 With ElectricSQL, the [local-first development](/docs/intro/local-first) approach uses a local database for efficient querying, sorting, and filtering of data, enabling users to quickly and interactively explore datasets with ease, without worrying about network connectivity. By leveraging the power of SQL queries, developers can perform complex data manipulations and retrieve specific subsets of data based on user-defined criteria, ensuring a tailored and responsive viewing experience.
 
-This recipe demonstrates how to use ElectricSQL to create a table and chart data viewer for a simple e-commerce-like orders database, delegating pagination, sorting, filtering, aggregation, and arbitrary queries to the underlying SQLite database.
+This recipe demonstrates how to use ElectricSQL to create a table and chart data viewer for a simple e-commerce-like orders database, delegating pagination, sorting, filtering, aggregation, and arbitrary queries to the underlying local database.
 
 <TOCInline toc={toc} />