From d74d183d304699afcecd524a817d929eccf712dc Mon Sep 17 00:00:00 2001
From: David Fowler <davidfowl@gmail.com>
Date: Sun, 22 Mar 2026 13:44:51 -0700
Subject: [PATCH 1/2] Add TypeScript AppHost support to PostgreSQL integration
 docs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add TypeScript examples throughout postgres-host.mdx using synced C#/TS tabs
- Restructure postgres-get-started.mdx with separate C#/TypeScript quickstart paths
- Add new SyncedPivotSelector component to sync pivot selector with Starlight tabs
- Add new 'Connect to PostgreSQL' page with language-neutral connection reference
  (JavaScript, Python, Go, .NET examples)
- Move connection properties and env var reference from host page to connect page
- Mark client integration as .NET-specific in sidebar and page content
- Add aspire add postgres to both C# and TypeScript installation sections
- Show aspire.config.json update in TypeScript installation examples
- Rename 'Using with non-.NET applications' to neutral language
- Fix sidebar not auto-expanding current page group after SidebarPersister restore
- Fix typo: confgure → configure in postgres-host description

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../config/sidebar/integrations.topics.ts     |   6 +-
 .../src/components/SyncedPivotSelector.astro  | 107 +++++
 .../src/components/starlight/Sidebar.astro    |  13 +
 .../databases/postgres/postgres-client.mdx    |  33 +-
 .../databases/postgres/postgres-connect.mdx   | 228 +++++++++
 .../postgres/postgres-get-started.mdx         | 326 ++++++++-----
 .../databases/postgres/postgres-host.mdx      | 447 ++++++++++++------
 7 files changed, 871 insertions(+), 289 deletions(-)
 create mode 100644 src/frontend/src/components/SyncedPivotSelector.astro
 create mode 100644 src/frontend/src/content/docs/integrations/databases/postgres/postgres-connect.mdx

diff --git a/src/frontend/config/sidebar/integrations.topics.ts b/src/frontend/config/sidebar/integrations.topics.ts
index b48da3169..231a8d50e 100644
--- a/src/frontend/config/sidebar/integrations.topics.ts
+++ b/src/frontend/config/sidebar/integrations.topics.ts
@@ -1200,7 +1200,11 @@ export const integrationTopics: StarlightSidebarTopicsUserConfig = {
               slug: 'integrations/databases/postgres/postgres-host',
             },
             {
-              label: 'Client integration (Your app)',
+              label: 'Connect to PostgreSQL',
+              slug: 'integrations/databases/postgres/postgres-connect',
+            },
+            {
+              label: 'Client integration (.NET)',
               slug: 'integrations/databases/postgres/postgres-client',
             },
             {
diff --git a/src/frontend/src/components/SyncedPivotSelector.astro b/src/frontend/src/components/SyncedPivotSelector.astro
new file mode 100644
index 000000000..2bd0a086f
--- /dev/null
+++ b/src/frontend/src/components/SyncedPivotSelector.astro
@@ -0,0 +1,107 @@
+---
+import PivotSelector from '@components/PivotSelector.astro';
+
+interface Option {
+  id: string;
+  title: string;
+  disabled?: boolean;
+}
+
+interface Props {
+  key: string;
+  syncKey: string;
+  options: Option[];
+  title?: string;
+  marginTop?: number | null;
+}
+
+const { key, syncKey, options, title, marginTop } = Astro.props;
+const optionLabels = Object.fromEntries(options.map(({ id, title }) => [id, title]));
+---
+
+<PivotSelector key={key} title={title} options={options} marginTop={marginTop} />
+
+<script is:inline define:vars={{ key, syncKey, optionLabels }}>
+  function initSyncedPivotSelector() {
+    const selector = document.getElementById(`pivot-selector-${key}`);
+    if (!selector || selector.dataset.syncedTabsBound === 'true') {
+      return;
+    }
+
+    selector.dataset.syncedTabsBound = 'true';
+
+    const storageKey = `starlight-synced-tabs__${syncKey}`;
+
+    const getIdForLabel = (label) => Object.entries(optionLabels)
+      .find(([, value]) => value === label)?.[0];
+
+    const setPivotState = (id) => {
+      if (!id) {
+        return;
+      }
+
+      localStorage.setItem(key, id);
+
+      const url = new URL(window.location);
+      url.searchParams.set(key, id);
+      window.history.replaceState({}, '', url);
+
+      [...selector.querySelectorAll('button')].forEach((button) =>
+        button.classList.toggle('active', button.dataset.pivotOption === id)
+      );
+    };
+
+    const syncTabs = (id) => {
+      const label = optionLabels[id];
+      if (!label) {
+        return;
+      }
+
+      localStorage.setItem(storageKey, label);
+
+      const tab = [...document.querySelectorAll('main [role="tab"]')]
+        .find((button) => button.textContent?.trim() === label);
+
+      if (tab && tab.getAttribute('aria-selected') !== 'true') {
+        tab.click();
+      }
+    };
+
+    const bindTabs = () => {
+      [...document.querySelectorAll('main [role="tab"]')].forEach((button) => {
+        const label = button.textContent?.trim();
+        const id = getIdForLabel(label);
+
+        if (!id || button.dataset.syncedPivotBound === 'true') {
+          return;
+        }
+
+        button.dataset.syncedPivotBound = 'true';
+        button.addEventListener('click', () => {
+          requestAnimationFrame(() => setPivotState(id));
+        });
+      });
+    };
+
+    const applyCurrentSelection = () => {
+      const active = selector.querySelector('button.active');
+      const id = active?.dataset.pivotOption;
+      if (id) {
+        syncTabs(id);
+      }
+    };
+
+    selector.addEventListener('click', (event) => {
+      const button = event.target.closest('button[data-pivot-option]');
+      if (button?.dataset.pivotOption) {
+        requestAnimationFrame(() => syncTabs(button.dataset.pivotOption));
+      }
+    });
+
+    bindTabs();
+    requestAnimationFrame(applyCurrentSelection);
+  }
+
+  document.addEventListener('astro:page-load', initSyncedPivotSelector);
+  initSyncedPivotSelector();
+</script>
diff --git a/src/frontend/src/components/starlight/Sidebar.astro b/src/frontend/src/components/starlight/Sidebar.astro
index ed734941c..0c84b22ac 100644
--- a/src/frontend/src/components/starlight/Sidebar.astro
+++ b/src/frontend/src/components/starlight/Sidebar.astro
@@ -86,6 +86,19 @@ const referenceOverviewHref = `${base}${localePrefix}/reference/overview/`;
     </LinkButton>
   </div>
 </div>
+<script is:inline>
+// Ensure the sidebar group containing the current page is always expanded,
+// even if the SidebarPersister restored a previously-collapsed state.
+(() => {
+  const link = document.querySelector('[aria-current="page"]');
+  if (!link) return;
+  let el = link;
+  while ((el = el.parentElement)) {
+    if (el.tagName === 'DETAILS') el.open = true;
+    if (el.tagName === 'NAV' || el.tagName === 'BODY') break;
+  }
+})();
+</script>
 {isApiRefPage && (
   <button
     type="button"
diff --git a/src/frontend/src/content/docs/integrations/databases/postgres/postgres-client.mdx b/src/frontend/src/content/docs/integrations/databases/postgres/postgres-client.mdx
index a4099b059..001e4a022 100644
--- a/src/frontend/src/content/docs/integrations/databases/postgres/postgres-client.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/postgres/postgres-client.mdx
@@ -26,7 +26,11 @@ import postgresIcon from '@assets/icons/postgresql-icon.png';
 
 To get started with the Aspire PostgreSQL integrations, follow the [Get started with PostgreSQL integrations](../postgres-get-started/) guide.
 
-This article includes full details about the Aspire PostgreSQL Client integration, which allows you to connect to and interact with PostgreSQL databases from your Aspire consuming projects.
+This article covers the Aspire PostgreSQL **Client integration** for .NET applications. It uses the [📦 Aspire.Npgsql](https://www.nuget.org/packages/Aspire.Npgsql) NuGet package to connect to and interact with PostgreSQL databases from your .NET consuming projects.
+
+<Aside type="tip">
+    If you're using a non-.NET language (JavaScript, Python, Go, etc.), you don't need a client integration package. See [Connect to PostgreSQL](../postgres-connect/) for language-specific examples.
+</Aside>
 
 ## Installation
 
@@ -80,32 +84,7 @@ public class ExampleService(
 
 ## Properties of the PostgreSQL resources
 
-When you use the `WithReference` method to pass a PostgreSQL server or database resource from the AppHost project to a consuming client project, several properties are available to use in the consuming project.
-
-Aspire exposes each property as an environment variable named `[RESOURCE]_[PROPERTY]`. For instance, the `Uri` property of a resource called `db1` becomes `DB1_URI`.
-
-### PostgreSQL server resource
-
-The PostgreSQL server resource exposes the following connection properties:
-
-| Property Name          | Description                                                                                                                                                                    |
-| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `Host`                 | The hostname or IP address of the PostgreSQL server                                                                                                                            |
-| `Port`                 | The port number the PostgreSQL server is listening on                                                                                                                          |
-| `Username`             | The username for authentication                                                                                                                                                |
-| `Password`             | The password for authentication                                                                                                                                                |
-| `Uri`                  | The connection URI in postgresql:// format, with the format `postgresql://{Username}:{Password}@{Host}:{Port}`                                                                 |
-| `JdbcConnectionString` | JDBC-format connection string, with the format `jdbc:postgresql://{Host}:{Port}`. User and password credentials are provided as separate `Username` and `Password` properties. |
-
-### PostgreSQL database resource
-
-The PostgreSQL database resource inherits all properties from its parent `PostgresServerResource` and adds:
-
-| Property Name          | Description                                                                                                                                                                                               |
-| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Uri`                  | The connection URI with the database name, with the format `postgresql://{Username}:{Password}@{Host}:{Port}/{DatabaseName}`                                                                              |
-| `JdbcConnectionString` | JDBC connection string with database name, with the format `jdbc:postgresql://{Host}:{Port}/{DatabaseName}`. User and password credentials are provided as separate `Username` and `Password` properties. |
-| `DatabaseName`         | The name of the database                                                                                                                                                                                  |
+For a full reference of PostgreSQL connection properties and environment variables, see [Connect to PostgreSQL](../postgres-connect/).
 
 ## Configuration
 
diff --git a/src/frontend/src/content/docs/integrations/databases/postgres/postgres-connect.mdx b/src/frontend/src/content/docs/integrations/databases/postgres/postgres-connect.mdx
new file mode 100644
index 000000000..b7ef1f782
--- /dev/null
+++ b/src/frontend/src/content/docs/integrations/databases/postgres/postgres-connect.mdx
@@ -0,0 +1,228 @@
+---
+title: Connect to PostgreSQL
+description: Learn how to connect to PostgreSQL from any language when using Aspire to host your PostgreSQL resources.
+---
+
+import { Image } from 'astro:assets';
+import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
+import postgresIcon from '@assets/icons/postgresql-icon.png';
+
+<Image
+  src={postgresIcon}
+  alt="PostgreSQL logo"
+  width={100}
+  height={100}
+  class:list={'float-inline-left icon'}
+  data-zoom-off
+/>
+
+When you reference a PostgreSQL resource from the AppHost with `withReference`, Aspire automatically injects connection information into the consuming application as environment variables. This page shows how to read those variables and connect to PostgreSQL from any language.
+
+<Aside type="tip">
+    For .NET applications, you can use environment variables directly or use the [Client integration (.NET)](../postgres-client/) for automatic dependency injection, health checks, and telemetry.
+</Aside>
+
+## Connection properties
+
+Aspire exposes each property as an environment variable named `[RESOURCE]_[PROPERTY]`. For instance, the `Uri` property of a resource called `postgresdb` becomes `POSTGRESDB_URI`.
+
+### PostgreSQL server
+
+The PostgreSQL server resource exposes the following connection properties:
+
+| Property Name          | Description |
+| ---------------------- | ----------- |
+| `Host`                 | The hostname or IP address of the PostgreSQL server |
+| `Port`                 | The port number the PostgreSQL server is listening on |
+| `Username`             | The username for authentication |
+| `Password`             | The password for authentication |
+| `Uri`                  | The connection URI in postgresql:// format, with the format `postgresql://{Username}:{Password}@{Host}:{Port}` |
+| `JdbcConnectionString` | JDBC-format connection string, with the format `jdbc:postgresql://{Host}:{Port}`. User and password credentials are provided as separate `Username` and `Password` properties. |
+
+**Example connection strings:**
+
+```
+Uri: postgresql://postgres:p%40ssw0rd1@localhost:5432
+JdbcConnectionString: jdbc:postgresql://localhost:5432
+```
+
+### PostgreSQL database
+
+The PostgreSQL database resource inherits all properties from its parent server resource and adds:
+
+| Property Name          | Description |
+| ---------------------- | ----------- |
+| `Uri`                  | The connection URI with the database name, with the format `postgresql://{Username}:{Password}@{Host}:{Port}/{DatabaseName}` |
+| `JdbcConnectionString` | JDBC connection string with database name, with the format `jdbc:postgresql://{Host}:{Port}/{DatabaseName}`. User and password credentials are provided as separate `Username` and `Password` properties. |
+| `DatabaseName`         | The name of the database |
+
+**Example connection strings:**
+
+```
+Uri: postgresql://postgres:p%40ssw0rd1@localhost:5432/catalog
+JdbcConnectionString: jdbc:postgresql://localhost:5432/catalog
+```
+
+## Connect from your application
+
+The following examples show how to connect to PostgreSQL from different languages. Each example assumes you have a PostgreSQL database resource named `postgresdb` referenced from your AppHost.
+
+<Tabs syncKey="postgres-connect-lang">
+<TabItem label="JavaScript">
+
+Install the PostgreSQL client library:
+
+```bash title="Terminal"
+npm install pg
+```
+
+Read the injected environment variables and connect:
+
+```javascript title="JavaScript — index.js"
+import pg from 'pg';
+
+// Read Aspire-injected connection properties
+const client = new pg.Client({
+    user: process.env.POSTGRESDB_USERNAME,
+    host: process.env.POSTGRESDB_HOST,
+    database: process.env.POSTGRESDB_DATABASE,
+    password: process.env.POSTGRESDB_PASSWORD,
+    port: process.env.POSTGRESDB_PORT,
+});
+
+await client.connect();
+```
+
+Or use the connection URI directly:
+
+```javascript title="JavaScript — Connect with URI"
+const client = new pg.Client({
+    connectionString: process.env.POSTGRESDB_URI,
+});
+
+await client.connect();
+```
+
+</TabItem>
+<TabItem label="Python">
+
+Install a PostgreSQL driver. This example uses `psycopg`:
+
+```bash title="Terminal"
+pip install psycopg[binary]
+```
+
+Read the injected environment variables and connect:
+
+```python title="Python — app.py"
+import os
+import psycopg
+
+# Read the Aspire-injected connection URI
+postgres_uri = os.getenv("POSTGRESDB_URI")
+
+async with await psycopg.AsyncConnection.connect(
+    postgres_uri, autocommit=True
+) as conn:
+    # Use conn to query the database...
+    pass
+```
+
+</TabItem>
+<TabItem label="Go">
+
+Use the standard `pgx` driver:
+
+```bash title="Terminal"
+go get github.com/jackc/pgx/v5
+```
+
+Read the injected environment variables and connect:
+
+```go title="Go — main.go"
+package main
+
+import (
+    "context"
+    "os"
+    "github.com/jackc/pgx/v5"
+)
+
+func main() {
+    // Read the Aspire-injected connection URI
+    connStr := os.Getenv("POSTGRESDB_URI")
+
+    conn, err := pgx.Connect(context.Background(), connStr)
+    if err != nil {
+        panic(err)
+    }
+    defer conn.Close(context.Background())
+}
+```
+
+</TabItem>
+<TabItem label=".NET">
+
+For .NET applications, the recommended approach is to use the [Client integration (.NET)](../postgres-client/), which provides automatic dependency injection, health checks, and telemetry.
+
+If you prefer to connect using environment variables directly:
+
+```csharp title="C# — Program.cs"
+var connectionString = Environment.GetEnvironmentVariable(
+    "POSTGRESDB_URI");
+
+await using var dataSource = NpgsqlDataSource.Create(connectionString!);
+await using var conn = await dataSource.OpenConnectionAsync();
+```
+
+</TabItem>
+</Tabs>
+
+## Passing custom environment variables from the AppHost
+
+If your application expects specific environment variable names, you can pass individual connection properties from the AppHost:
+
+<Tabs syncKey="postgres-host-apphost-lang">
+<TabItem label="C#">
+```csharp title="C# — AppHost.cs"
+var builder = DistributedApplication.CreateBuilder(args);
+
+var postgres = builder.AddPostgres("postgres");
+var database = postgres.AddDatabase("myDatabase");
+
+var app = builder.AddExecutable("my-app", "node", "app.js", ".")
+    .WithReference(database)
+    .WithEnvironment(context =>
+    {
+        context.EnvironmentVariables["POSTGRES_HOST"] = postgres.Resource.PrimaryEndpoint.Property(EndpointProperty.Host);
+        context.EnvironmentVariables["POSTGRES_PORT"] = postgres.Resource.PrimaryEndpoint.Property(EndpointProperty.Port);
+        context.EnvironmentVariables["POSTGRES_USER"] = postgres.Resource.UserNameParameter;
+        context.EnvironmentVariables["POSTGRES_PASSWORD"] = postgres.Resource.PasswordParameter;
+        context.EnvironmentVariables["POSTGRES_DATABASE"] = database.Resource.DatabaseName;
+    });
+
+builder.Build().Run();
+```
+</TabItem>
+<TabItem label="TypeScript">
+```typescript title="TypeScript — apphost.ts"
+import { createBuilder } from './.modules/aspire.js';
+
+const builder = await createBuilder();
+
+const userName = await builder.addParameter("username", { secret: true });
+const password = await builder.addParameter("password", { secret: true });
+
+const postgres = await builder.addPostgres("postgres", { userName, password });
+const database = await postgres.addDatabase("myDatabase");
+
+await builder.addNodeApp("my-app", "./app", "index.js")
+    .withReference(database)
+    .withEnvironment("POSTGRES_USER", userName)
+    .withEnvironment("POSTGRES_PASSWORD", password)
+    .withEnvironment("POSTGRES_DATABASE", "myDatabase");
+
+await builder.build().run();
+```
+</TabItem>
+</Tabs>
diff --git a/src/frontend/src/content/docs/integrations/databases/postgres/postgres-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/postgres/postgres-get-started.mdx
index c586c2d61..8f15b586c 100644
--- a/src/frontend/src/content/docs/integrations/databases/postgres/postgres-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/postgres/postgres-get-started.mdx
@@ -4,13 +4,10 @@ description: Learn how to set up the Aspire PostgreSQL Hosting and Client integr
 ---
 
 import { Image } from 'astro:assets';
-import { Kbd } from 'starlight-kbd/components';
-import InstallPackage from '@components/InstallPackage.astro';
 import InstallDotNetPackage from '@components/InstallDotNetPackage.astro';
-import { Aside, CardGrid, LinkCard, Code, Steps, Tabs, TabItem } from '@astrojs/starlight/components';
+import { Aside, CardGrid, LinkCard, Tabs, TabItem } from '@astrojs/starlight/components';
 import PivotSelector from '@components/PivotSelector.astro';
 import Pivot from '@components/Pivot.astro';
-import ThemeImage from '@components/ThemeImage.astro';
 import postgresIcon from '@assets/icons/postgresql-icon.png';
 
 <Image
@@ -24,238 +21,315 @@ import postgresIcon from '@assets/icons/postgresql-icon.png';
 
 [PostgreSQL](https://www.postgresql.org/) is a powerful, open source object-relational database system with many years of active development that has earned it a strong reputation for reliability, feature robustness, and performance. The Aspire PostgreSQL integration provides a way to connect to existing PostgreSQL databases, or create new instances from the [`docker.io/library/postgres` container image](https://hub.docker.com/_/postgres).
 
-In this introduction, you'll see how to install and use the Aspire PostgreSQL integrations in a simple configuration. If you already have this knowledge, see [PostgreSQL Hosting integration](../postgres-host/) for full reference details.
+Use this guide to add PostgreSQL to an Aspire solution. Choose the AppHost language for your solution first, then follow the matching quickstart. For the full PostgreSQL hosting API surface in either C# or TypeScript, see [PostgreSQL Hosting integration](../postgres-host/).
 
 <Aside type="note">
     To follow this guide, you must have created an Aspire solution to work with. To learn how to do that, see [Build your first Aspire app](../../../../get-started/first-app/).
 </Aside>
 
-## Set up hosting integration
+## Set up the PostgreSQL Hosting integration
 
-To begin, install the Aspire PostgreSQL Hosting integration in your Aspire AppHost project. This integration allows you to create and manage PostgreSQL database instances from your Aspire hosting projects:
-
-<InstallPackage packageName="Aspire.Hosting.PostgreSQL" shortName="postgresql" />
-
-Next, in the AppHost project, create instances of PostgreSQL server and database resources, then pass the database to the consuming client projects:
+Choose your AppHost language, then add PostgreSQL to the AppHost. For the full C# and TypeScript hosting API surface, see [PostgreSQL Hosting integration](../postgres-host/).
 
 <PivotSelector
-    title="Select your programming language to get started"
-    key="lang"
+    title="Select your AppHost language"
+    key="postgres-apphost-lang"
     options={[
         { id: "csharp", title: "C#" },
-        { id: "python", title: "Python" },
-        { id: "javascript", title: "JavaScript" },
+        { id: "typescript", title: "TypeScript" },
     ]}
 />
 
-<Pivot id="csharp">
-
-```csharp title="AppHost.cs"
-var builder = DistributedApplication.CreateBuilder(args);
-
-var postgres = builder.AddPostgres("postgres");
-var postgresdb = postgres.AddDatabase("postgresdb");
+<Pivot id="typescript">
 
-var exampleProject = builder.AddProject<Projects.ExampleProject>("apiservice")
-                            .WaitFor(postgresdb)
-                            .WithReference(postgresdb);
-```
+## TypeScript AppHost quickstart
 
-</Pivot>
+Use this path when your Aspire solution is modeled in `apphost.ts`.
 
-<Pivot id="python">
+### Add the PostgreSQL Hosting integration with the Aspire CLI
 
-```csharp title="apphost.cs"
-var builder = DistributedApplication.CreateBuilder(args);
+```bash title="Terminal"
+aspire add postgres
+```
 
-var postgres = builder.AddPostgres("postgres");
-var postgresdb = postgres.AddDatabase("postgresdb");
+This updates your `aspire.config.json` with the PostgreSQL hosting integration package:
 
-var exampleProject = builder.AddUvicornApp("api", "./api", "main:app")
-                            .WithExternalHttpEndpoints()
-                            .WaitFor(postgresdb)
-                            .WithReference(postgresdb);
+```json title="aspire.config.json" ins={3}
+{
+  "packages": {
+    "Aspire.Hosting.PostgreSQL": "13.2.0"
+  }
+}
 ```
 
-</Pivot>
+### Model PostgreSQL resources in `apphost.ts`
 
-<Pivot id="javascript">
+```typescript title="apphost.ts"
+import { createBuilder } from './.modules/aspire.js';
 
-```csharp title="AppHost.cs"
-var builder = DistributedApplication.CreateBuilder(args);
+const builder = await createBuilder();
 
-var postgres = builder.AddPostgres("postgres");
-var postgresdb = postgres.AddDatabase("postgresdb");
+const postgres = await builder.addPostgres("postgres");
+const postgresdb = await postgres.addDatabase("postgresdb");
 
-var api = builder.AddNodeApp("api", "./api", scriptPath: "index.js")
-                 .WithExternalHttpEndpoints()
-                 .WaitFor(postgresdb)
-                 .WithReference(postgresdb);
+await builder.addNodeApp("api", "./api", "index.js")
+    .withExternalHttpEndpoints()
+    .waitFor(postgresdb)
+    .withReference(postgresdb);
 ```
 
-</Pivot>
-
 <Aside type="tip">
-    This is the simplest implementation of PostgreSQL resources in the AppHost. There are many more options you can choose from to address your requirements. For full details, see [PostgreSQL Hosting integration](../postgres-host/).
+    For the full TypeScript AppHost PostgreSQL API surface, see [PostgreSQL Hosting integration](../postgres-host/).
 </Aside>
 
-## Use the integration in client projects
+### Choose a consuming language for the TypeScript AppHost quickstart
 
-Now that the hosting integration is ready, the next step is to install and configure the client integration in any projects that need to use it.
+The examples below assume your `apphost.ts` file references `postgresdb` from the consuming app with `withReference(postgresdb)`.
 
-### Set up client projects
+<Tabs syncKey="postgres-ts-client-lang">
+<TabItem label="JavaScript">
 
-<Pivot id="csharp">
+Install the PostgreSQL client library in your JavaScript or TypeScript consuming project:
 
-In each of these consuming client projects, install the Aspire PostgreSQL client integration:
+```bash title="Terminal"
+npm install pg
+```
 
-<InstallDotNetPackage packageName="Aspire.Npgsql" />
+Import `pg` in code files that interact with the database:
+
+```javascript title="JavaScript - Import pg"
+import pg from 'pg';
+```
 
-In the `Program.cs` file of your client-consuming project, call the `AddNpgsqlDataSource` extension method on any `IHostApplicationBuilder` to register an `NpgsqlDataSource` for use via the dependency injection container. The method takes a connection name parameter.
+Use the `process.env` object to read the injected PostgreSQL properties:
 
-```csharp title="C# — Program.cs"
-builder.AddNpgsqlDataSource(connectionName: "postgresdb");
+```javascript title="JavaScript - Obtain configuration properties"
+const pguser = process.env.POSTGRESDB_USERNAME;
+const pgpassword = process.env.POSTGRESDB_PASSWORD;
+const pghost = process.env.POSTGRESDB_HOST;
+const pgport = process.env.POSTGRESDB_PORT;
+const pgdatabase = process.env.POSTGRESDB_DATABASE;
 ```
 
-<Aside type="tip">
-    The `connectionName` parameter must match the name used when adding the PostgreSQL server resource in the AppHost project. For more information, see [Set up hosting integration](#set-up-hosting-integration).
-</Aside>
+Connect to PostgreSQL with `pg`:
 
-</Pivot>
+```javascript title="JavaScript - Connect to PostgreSQL"
+const client = new pg.Client({
+    user: pguser,
+    host: pghost,
+    database: pgdatabase,
+    password: pgpassword,
+    port: pgport,
+});
+
+await client.connect();
+```
 
-<Pivot id="python">
+</TabItem>
+<TabItem label="Python">
 
-To interact with PostgreSQL databases in your Python consuming projects, you need to include a PostgreSQL adapter library. Two popular options are `psycopg` (synchronous) and `asyncpg` (asynchronous). You can install either of these libraries using pip. In this article, example code uses `psycopg`:
+Install a PostgreSQL driver in your Python consuming project. This example uses `psycopg`:
 
-```bash
+```bash title="Terminal"
 pip install psycopg[binary]
 ```
 
-Ensure that you `import psycopg` in code files that interact with the database. You should also import the `os` module to access environment variables:
+Import `os` and `psycopg` in code files that interact with the database:
 
 ```python title="Python - Import psycopg"
-import psycopg
 import os
+import psycopg
 ```
 
-</Pivot>
+Use `os.getenv()` to read the injected PostgreSQL properties:
 
-<Pivot id="javascript">
+```python title="Python - Obtain configuration properties"
+postgres_uri = os.getenv("POSTGRESDB_URI")
+postgres_name = os.getenv("POSTGRESDB_DATABASE", "db")
+```
 
-To interact with PostgreSQL databases in your JavaScript consuming projects, you need to include a PostgreSQL client library. A popular option is `pg`. You can install this library using npm:
+Connect to PostgreSQL with `psycopg`:
 
-```bash
-npm install pg
+```python title="Python - Connect to PostgreSQL"
+async with await psycopg.AsyncConnection.connect(postgres_uri, autocommit=True) as conn:
 ```
 
-Ensure that you `import pg` in code files that interact with the database:
+</TabItem>
+<TabItem label="C#">
 
-```javascript title="JavaScript - Import pg"
-import pg from 'pg';
+Install the Aspire PostgreSQL client integration in each C# consuming project:
+
+<InstallDotNetPackage packageName="Aspire.Npgsql" />
+
+In `Program.cs`, call the `AddNpgsqlDataSource` extension method on an `IHostApplicationBuilder` to register an `NpgsqlDataSource` for use via dependency injection:
+
+```csharp title="C# - Program.cs"
+builder.AddNpgsqlDataSource(connectionName: "postgresdb");
 ```
 
-</Pivot>
+<Aside type="tip">
+    The `connectionName` parameter must match the name used when adding the PostgreSQL database resource in the AppHost project.
+</Aside>
+
+Get the `NpgsqlDataSource` instance by using dependency injection:
 
-### Use injected PostgreSQL properties
+```csharp title="C# - ExampleService.cs"
+public class ExampleService(NpgsqlDataSource dataSource)
+{
+    // Use dataSource to query the database...
+}
+```
 
-In the AppHost, when you used the `WithReference` method to pass a PostgreSQL server or database resource to a consuming client project, Aspire injects several configuration properties that you can use in the consuming project.
+</TabItem>
+</Tabs>
 
-Aspire exposes each property as an environment variable named `[RESOURCE]_[PROPERTY]`. For instance, the `Uri` property of a resource called `postgresdb` becomes `POSTGRESDB_URI`.
+</Pivot>
 
 <Pivot id="csharp">
 
-Use the `GetValue()` method to obtain these environment variables in consuming projects:
+## C# AppHost quickstart
 
-```csharp title="C# - Obtain configuration properties"
-string hostname = builder.Configuration.GetValue<string>("POSTGRESDB_HOST");
-string databaseport = builder.Configuration.GetValue<string>("POSTGRESDB_PORT");
-string jdbcconnectionstring = builder.Configuration.GetValue<string>("POSTGRESDB_JDBCCONNECTIONSTRING");
-string databasename = builder.Configuration.GetValue<string>("POSTGRESDB_DATABASE");
-```
+Use this path when your Aspire solution is modeled in `AppHost.cs`.
 
-</Pivot>
+### Add the PostgreSQL Hosting integration to the AppHost
 
-<Pivot id="python">
+```bash title="Terminal"
+aspire add postgres
+```
 
-Use the `os.getenv()` method to obtain these environment variables in consuming projects:
+Or, add the package manually in either `AppHost.cs` or `AppHost.csproj`:
 
-```python title="Python - Obtain configuration properties"
-postgres_uri = os.getenv("POSTGRESDB_URI")
-postgres_name = os.getenv("POSTGRESDB_DATABASE", "db")
+```csharp title="C# - AppHost.cs"
+#:package Aspire.Hosting.PostgreSQL@*
 ```
 
-</Pivot>
+```xml title="XML - AppHost.csproj"
+<PackageReference Include="Aspire.Hosting.PostgreSQL" Version="*" />
+```
 
-<Pivot id="javascript">
+### Model PostgreSQL resources in `AppHost.cs`
 
-Use the `process.env` method to obtain these environment variables in consuming projects:
+```csharp title="AppHost.cs"
+var builder = DistributedApplication.CreateBuilder(args);
 
-```javascript title="JavaScript - Obtain configuration properties"
-const pguser = process.env.POSTGRESDB_USERNAME;
-const pgpassword = process.env.POSTGRESDB_PASSWORD;
-const pghost = process.env.POSTGRESDB_HOST;
-const pgport = process.env.POSTGRESDB_PORT;
-const pgdatabase = process.env.POSTGRESDB_DATABASE;
-```
+var postgres = builder.AddPostgres("postgres");
+var postgresdb = postgres.AddDatabase("postgresdb");
 
-</Pivot>
+var api = builder.AddProject<Projects.ExampleProject>("apiservice")
+    .WaitFor(postgresdb)
+    .WithReference(postgresdb);
+```
 
 <Aside type="tip">
-    The full set of properties that Aspire injects depends on whether you passed a PostgreSQL server or database resource. For more information, see [Properties of the PostgreSQL resources](../postgres-client/#properties-of-the-postgresql-resources).
+    For the full C# AppHost PostgreSQL API surface, see [PostgreSQL Hosting integration](../postgres-host/).
 </Aside>
 
-### Use PostgreSQL resources in client code
+### Choose a consuming language for the C# AppHost quickstart
 
-<Pivot id="csharp">
+The examples below assume your `AppHost.cs` file references `postgresdb` from the consuming app with `WithReference(postgresdb)`.
+
+<Tabs syncKey="postgres-csharp-client-lang">
+<TabItem label="C#">
+
+Install the Aspire PostgreSQL client integration in each C# consuming project:
+
+<InstallDotNetPackage packageName="Aspire.Npgsql" />
+
+In `Program.cs`, call the `AddNpgsqlDataSource` extension method on an `IHostApplicationBuilder` to register an `NpgsqlDataSource` for use via dependency injection:
+
+```csharp title="C# - Program.cs"
+builder.AddNpgsqlDataSource(connectionName: "postgresdb");
+```
+
+<Aside type="tip">
+    The `connectionName` parameter must match the name used when adding the PostgreSQL database resource in the AppHost project.
+</Aside>
 
-Now that you've added `NpgsqlDataSource` to the builder in the consuming project, you can use the PostgreSQL resource to get and store data. Get the `NpgsqlDataSource` instance using dependency injection. For example, to retrieve your data source object from an example service define it as a constructor parameter and ensure the `ExampleService` class is registered with the dependency injection container:
+Get the `NpgsqlDataSource` instance by using dependency injection:
 
-```csharp title="C# — ExampleService.cs"
+```csharp title="C# - ExampleService.cs"
 public class ExampleService(NpgsqlDataSource dataSource)
 {
     // Use dataSource to query the database...
 }
 ```
 
-Having obtained the data source, you can work with the PostgreSQL database as you would in any other C# application.
+</TabItem>
+<TabItem label="Python">
 
-</Pivot>
+Install a PostgreSQL driver in your Python consuming project. This example uses `psycopg`:
+
+```bash title="Terminal"
+pip install psycopg[binary]
+```
+
+Import `os` and `psycopg` in code files that interact with the database:
+
+```python title="Python - Import psycopg"
+import os
+import psycopg
+```
 
-<Pivot id="python">
+Use `os.getenv()` to read the injected PostgreSQL properties:
 
-Use the information you have obtained about the PostgreSQL resource to connect to the database. Here is an example of how to connect using `psycopg`:
+```python title="Python - Obtain configuration properties"
+postgres_uri = os.getenv("POSTGRESDB_URI")
+postgres_name = os.getenv("POSTGRESDB_DATABASE", "db")
+```
+
+Connect to PostgreSQL with `psycopg`:
 
 ```python title="Python - Connect to PostgreSQL"
 async with await psycopg.AsyncConnection.connect(postgres_uri, autocommit=True) as conn:
 ```
 
-Having obtained the connection, you can work with the PostgreSQL database as you would in any other Python application.
+</TabItem>
+<TabItem label="JavaScript">
 
-</Pivot>
+Install the PostgreSQL client library in your JavaScript or TypeScript consuming project:
 
-<Pivot id="javascript">
+```bash title="Terminal"
+npm install pg
+```
 
-Use the information you have obtained about the PostgreSQL resource to connect to the database. Here is an example of how to connect using `pg`:
+Import `pg` in code files that interact with the database:
+
+```javascript title="JavaScript - Import pg"
+import pg from 'pg';
+```
+
+Use the `process.env` object to read the injected PostgreSQL properties:
+
+```javascript title="JavaScript - Obtain configuration properties"
+const pguser = process.env.POSTGRESDB_USERNAME;
+const pgpassword = process.env.POSTGRESDB_PASSWORD;
+const pghost = process.env.POSTGRESDB_HOST;
+const pgport = process.env.POSTGRESDB_PORT;
+const pgdatabase = process.env.POSTGRESDB_DATABASE;
+```
+
+Connect to PostgreSQL with `pg`:
 
 ```javascript title="JavaScript - Connect to PostgreSQL"
 const client = new pg.Client({
-  user: pguser,
-  host: pghost,
-  database: pgdatabase,
-  password: pgpassword,
-  port: pgport,  
+    user: pguser,
+    host: pghost,
+    database: pgdatabase,
+    password: pgpassword,
+    port: pgport,
 });
 
-client.connect();
+await client.connect();
 ```
 
-Having obtained the connection, you can work with the PostgreSQL database as you would in any other JavaScript application.
+</TabItem>
+</Tabs>
 
 </Pivot>
 
 ## Next steps
 
-Now, that you have an Aspire app with PostgreSQL integrations up and running, you can use the following reference documents to learn how to configure and interact with the PostgreSQL resources:
+Now that you have an Aspire app with PostgreSQL integrations up and running, you can use the following reference documents to learn how to configure and interact with the PostgreSQL resources:
 
 <CardGrid>
   <LinkCard
@@ -268,9 +342,9 @@ Now, that you have an Aspire app with PostgreSQL integrations up and running, yo
     description="Discover how to configure keyed clients, client integration health checks, and more."
     href="/integrations/databases/postgres/postgres-client/"
   />
-   <LinkCard
+  <LinkCard
     title="Understand the PostgreSQL community extensions"
     description="Discover how to add the DbGate management user interface, and more."
     href="/integrations/databases/postgres/postgresql-extensions/"
   />
-</CardGrid>
\ No newline at end of file
+</CardGrid>
diff --git a/src/frontend/src/content/docs/integrations/databases/postgres/postgres-host.mdx b/src/frontend/src/content/docs/integrations/databases/postgres/postgres-host.mdx
index c0a3a04ac..1770f6083 100644
--- a/src/frontend/src/content/docs/integrations/databases/postgres/postgres-host.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/postgres/postgres-host.mdx
@@ -1,12 +1,11 @@
 ---
 title: PostgreSQL Hosting integration
-description: Learn how to use the Aspire PostgreSQL Hosting integration to orchestrate and confgure a PostgreSQL database in an Aspire solution.
+description: Learn how to use the Aspire PostgreSQL Hosting integration to orchestrate and configure a PostgreSQL database in an Aspire solution.
 ---
 
 import { Image } from 'astro:assets';
-import InstallPackage from '@components/InstallPackage.astro';
-import InstallDotNetPackage from '@components/InstallDotNetPackage.astro';
-import { Aside, Code, Steps, Tabs, TabItem } from '@astrojs/starlight/components';
+import { Aside, Steps, Tabs, TabItem } from '@astrojs/starlight/components';
+import SyncedPivotSelector from '@components/SyncedPivotSelector.astro';
 import postgresIcon from '@assets/icons/postgresql-icon.png';
 
 <Image
@@ -20,7 +19,19 @@ import postgresIcon from '@assets/icons/postgresql-icon.png';
 
 To get started with the Aspire PostgreSQL integrations, follow the [Get started with PostgreSQL integrations](/integrations/databases/postgres/postgres-get-started/) guide. If you want to learn how to use the PostgreSQL Entity Framework Core (EF Core) client integration, see [Get started with the PostgreSQL Entity Framework Core integrations](/integrations/databases/efcore/postgres/postgresql-get-started/).
 
-This article includes full details on the Aspire PostgreSQL Hosting integration, which allows you to model PostgreSQL server and database resources in your [`AppHost`](/get-started/app-host/) project.
+This article includes full details on the Aspire PostgreSQL Hosting integration, with examples for both `AppHost.cs` and `apphost.ts`, so you can model PostgreSQL server and database resources in your [`AppHost`](/get-started/app-host/) project.
+
+<SyncedPivotSelector
+    title="Select your AppHost language"
+    key="postgres-host-apphost-lang"
+    syncKey="postgres-host-apphost-lang"
+    options={[
+        { id: "csharp", title: "C#" },
+        { id: "typescript", title: "TypeScript" },
+    ]}
+/>
+
+Use this selector to switch the C# and TypeScript examples throughout the page.
 
 ## Installation
 
@@ -33,12 +44,49 @@ The PostgreSQL hosting integration models various PostgreSQL resources as the fo
 
 To access these types and APIs for expressing them as resources in your [`AppHost`](/get-started/app-host/) project, install the [📦 Aspire.Hosting.PostgreSQL](https://www.nuget.org/packages/Aspire.Hosting.PostgreSQL) NuGet package:
 
-<InstallPackage packageName="Aspire.Hosting.PostgreSQL" />
+<Tabs syncKey="postgres-host-apphost-lang">
+<TabItem label="C#">
+
+```bash title="Terminal"
+aspire add postgres
+```
+
+Or, choose a manual installation approach:
+
+```csharp title="C# — AppHost.cs"
+#:package Aspire.Hosting.PostgreSQL@*
+```
+
+```xml title="XML — AppHost.csproj"
+<PackageReference Include="Aspire.Hosting.PostgreSQL" Version="*" />
+```
+
+</TabItem>
+<TabItem label="TypeScript">
+
+```bash title="Terminal"
+aspire add postgres
+```
+
+This updates your `aspire.config.json` with the PostgreSQL hosting integration package:
+
+```json title="aspire.config.json" ins={3}
+{
+  "packages": {
+    "Aspire.Hosting.PostgreSQL": "13.2.0"
+  }
+}
+```
+
+</TabItem>
+</Tabs>
 
 ## Add PostgreSQL server resource
 
-In your AppHost project, call `AddPostgres` on the `builder` instance to add a PostgreSQL server resource then call `AddDatabase` on the `postgres` instance to add a database resource as shown in the following example:
+In your AppHost project, add a PostgreSQL server resource and then add a database resource as shown in the following examples:
 
+<Tabs syncKey="postgres-host-apphost-lang">
+<TabItem label="C#">
 ```csharp title="C# — AppHost.cs"
 var builder = DistributedApplication.CreateBuilder(args);
 
@@ -46,29 +94,46 @@ var postgres = builder.AddPostgres("postgres");
 var postgresdb = postgres.AddDatabase("postgresdb");
 
 var exampleProject = builder.AddProject<Projects.ExampleProject>("apiservice")
-                            .WithReference(postgresdb);
+    .WithReference(postgresdb);
+
+// After adding all resources, run the app...
+```
+</TabItem>
+<TabItem label="TypeScript">
+```typescript title="TypeScript — apphost.ts"
+import { createBuilder } from './.modules/aspire.js';
+
+const builder = await createBuilder();
+
+const postgres = await builder.addPostgres("postgres");
+const postgresdb = await postgres.addDatabase("postgresdb");
+
+await builder.addNodeApp("api", "./api", "index.js")
+    .withReference(postgresdb);
 
 // After adding all resources, run the app...
 ```
+</TabItem>
+</Tabs>
 
 <Steps>
 
-1. When Aspire adds a container image to the app host, as shown in the preceding example with the `docker.io/library/postgres` image, it creates a new PostgreSQL server instance on your local machine. A reference to your PostgreSQL server and database instance (the `postgresdb` variable) are used to add a dependency to the `ExampleProject`.
+1. When Aspire adds a container image to the app host, as shown in the preceding example with the `docker.io/library/postgres` image, it creates a new PostgreSQL server instance on your local machine. A reference to the `postgresdb` database resource is then used to add a dependency to the consuming project.
 
 1. When adding a database resource to the app model, the database is created if it doesn't already exist. The creation of the database relies on the AppHost eventing APIs, specifically `ResourceReadyEvent`. In other words, when the `postgres` resource is _ready_, the event is raised and the database resource is created.
 
-1. The PostgreSQL server resource includes default credentials with a `username` of `"postgres"` and randomly generated `password` using the `CreateDefaultPasswordParameter` method.
+1. The PostgreSQL server resource includes default credentials with a `username` of `"postgres"` and a randomly generated `password` using the `CreateDefaultPasswordParameter` method.
 
-1. The `WithReference` method configures a connection in the `ExampleProject` named `"messaging"`.
+1. The AppHost reference call configures a connection in the consuming project named after the referenced database resource, such as `postgresdb` in the preceding example.
 
 </Steps>
 
 <Aside type="tip">
-    If you'd rather connect to an existing PostgreSQL server, chain a call to `AsExisting` instead—passing the appropriate parameters.
+    If you'd rather connect to an existing PostgreSQL server, use the existing-resource pattern instead of creating a new containerized PostgreSQL server in your AppHost.
 </Aside>
 
 <Aside type="note">
-    When you call `WithReference` in the AppHost to pass PostgreSQL resources to a consuming project, Aspire makes several properties available to that project, such as connection strings, URIs, and port numbers. For a complete list of these properties, see [Properties of the PostgreSQL resources](../postgres-client/#properties-of-the-postgresql-resources).
+    When you reference a PostgreSQL resource from the AppHost, Aspire makes several properties available to the consuming project, such as connection strings, URIs, and port numbers. For a complete list of these properties, see [Properties of the PostgreSQL resources](../postgres-client/#properties-of-the-postgresql-resources).
 </Aside>
 
 ## Add PostgreSQL resource with database scripts
@@ -79,8 +144,10 @@ By default, when you add a `PostgresDatabaseResource`, it relies on the followin
 CREATE DATABASE "<QUOTED_DATABASE_NAME>"
 ```
 
-To alter the default script, chain a call to the `WithCreationScript` method on the database resource builder:
+To alter the default script, configure the database resource with a custom creation script:
 
+<Tabs syncKey="postgres-host-apphost-lang">
+<TabItem label="C#">
 ```csharp title="C# — AppHost.cs"
 var builder = DistributedApplication.CreateBuilder(args);
 
@@ -94,16 +161,42 @@ var creationScript = $$"""
     """;
 
 var db = postgres.AddDatabase(databaseName)
-                 .WithCreationScript(creationScript);
+    .WithCreationScript(creationScript);
 
 builder.AddProject<Projects.ExampleProject>()
-       .WithReference(db)
-       .WaitFor(db);
+    .WithReference(db)
+    .WaitFor(db);
+
+// After adding all resources, run the app...
+```
+</TabItem>
+<TabItem label="TypeScript">
+```typescript title="TypeScript — apphost.ts"
+import { createBuilder } from './.modules/aspire.js';
+
+const builder = await createBuilder();
+
+const postgres = await builder.addPostgres("postgres");
+
+const databaseName = "app_db";
+const creationScript = `
+-- Create the database
+CREATE DATABASE ${databaseName};
+`;
+
+const db = await postgres.addDatabase(databaseName);
+await db.withCreationScript(creationScript);
+
+await builder.addNodeApp("api", "./api", "index.js")
+    .withReference(db)
+    .waitFor(db);
 
 // After adding all resources, run the app...
 ```
+</TabItem>
+</Tabs>
 
-The preceding example creates a database named `app_db`. The script is run when the database resource is created. The script is passed as a string to the `WithCreationScript` method, which is then run in the context of the PostgreSQL resource.
+The preceding example creates a database named `app_db`. The script is run when the database resource is created. The script is passed as a string to the database resource's creation-script API and then run in the context of the PostgreSQL resource.
 
 <Aside type="note">
     The connect to a database command (`\c`) isn't supported when using the creation script.
@@ -111,141 +204,263 @@ The preceding example creates a database named `app_db`. The script is run when
 
 ## Add PostgreSQL pgAdmin resource
 
-When adding PostgreSQL resources to the `builder` with the `AddPostgres` method, you can chain calls to `WithPgAdmin` to add the [**dpage/pgadmin4**](https://www.pgadmin.org/) container. This container is a cross-platform client for PostgreSQL databases, that serves a web-based admin dashboard. Consider the following example:
+Add the [**dpage/pgadmin4**](https://www.pgadmin.org/) container to the PostgreSQL resource to get a web-based admin dashboard, as shown in the following examples:
 
+<Tabs syncKey="postgres-host-apphost-lang">
+<TabItem label="C#">
 ```csharp title="C# — AppHost.cs"
 var builder = DistributedApplication.CreateBuilder(args);
 
 var postgres = builder.AddPostgres("postgres")
-                      .WithPgAdmin();
+    .WithPgAdmin();
 
 var postgresdb = postgres.AddDatabase("postgresdb");
 
 var exampleProject = builder.AddProject<Projects.ExampleProject>()
-                            .WithReference(postgresdb);
+    .WithReference(postgresdb);
+
+// After adding all resources, run the app...
+```
+</TabItem>
+<TabItem label="TypeScript">
+```typescript title="TypeScript — apphost.ts"
+import { createBuilder } from './.modules/aspire.js';
+
+const builder = await createBuilder();
+
+const postgres = await builder.addPostgres("postgres");
+await postgres.withPgAdmin();
+
+const postgresdb = await postgres.addDatabase("postgresdb");
+
+await builder.addNodeApp("api", "./api", "index.js")
+    .withReference(postgresdb);
 
 // After adding all resources, run the app...
 ```
+</TabItem>
+</Tabs>
 
-The preceding code adds a container based on the `docker.io/dpage/pgadmin4` image. The container is used to manage the PostgreSQL server and database resources. The `WithPgAdmin` method adds a container that serves a web-based admin dashboard for PostgreSQL databases.
+The preceding code adds a container based on the `docker.io/dpage/pgadmin4` image. The container is used to manage the PostgreSQL server and database resources and serves a web-based admin dashboard for PostgreSQL databases.
 
 ### Configure the pgAdmin host port
 
-To configure the host port for the pgAdmin container, call the `WithHostPort` method on the PostgreSQL server resource. The following example shows how to configure the host port for the pgAdmin container:
+To configure the host port for the pgAdmin container, configure the pgAdmin resource inside the callback as shown in the following examples:
 
+<Tabs syncKey="postgres-host-apphost-lang">
+<TabItem label="C#">
 ```csharp title="C# — AppHost.cs"
 var builder = DistributedApplication.CreateBuilder(args);
 
 var postgres = builder.AddPostgres("postgres")
-                      .WithPgAdmin(pgAdmin => pgAdmin.WithHostPort(5050));
+    .WithPgAdmin(pgAdmin => pgAdmin.WithHostPort(5050));
 
 var postgresdb = postgres.AddDatabase("postgresdb");
 
 var exampleProject = builder.AddProject<Projects.ExampleProject>()
-                            .WithReference(postgresdb);
+    .WithReference(postgresdb);
+
+// After adding all resources, run the app...
+```
+</TabItem>
+<TabItem label="TypeScript">
+```typescript title="TypeScript — apphost.ts"
+import { createBuilder } from './.modules/aspire.js';
+
+const builder = await createBuilder();
+
+const postgres = await builder.addPostgres("postgres");
+await postgres.withPgAdmin({
+    configureContainer: async pgAdmin => {
+        await pgAdmin.withHostPort({ port: 5050 });
+    }
+});
+
+const postgresdb = await postgres.addDatabase("postgresdb");
+
+await builder.addNodeApp("api", "./api", "index.js")
+    .withReference(postgresdb);
 
 // After adding all resources, run the app...
 ```
+</TabItem>
+</Tabs>
 
 The preceding code adds and configures the host port for the pgAdmin container. The host port is otherwise randomly assigned.
 
 ## Add PostgreSQL pgWeb resource
 
-When adding PostgreSQL resources to the `builder` with the `AddPostgres` method, you can chain calls to `WithPgWeb` to add the [**sosedoff/pgweb**](https://sosedoff.github.io/pgweb/) container. This container is a cross-platform client for PostgreSQL databases, that serves a web-based admin dashboard. Consider the following example:
+Add the [**sosedoff/pgweb**](https://sosedoff.github.io/pgweb/) container to the PostgreSQL resource to get a web-based admin dashboard, as shown in the following examples:
 
+<Tabs syncKey="postgres-host-apphost-lang">
+<TabItem label="C#">
 ```csharp title="C# — AppHost.cs"
 var builder = DistributedApplication.CreateBuilder(args);
 
 var postgres = builder.AddPostgres("postgres")
-                      .WithPgWeb();
+    .WithPgWeb();
 
 var postgresdb = postgres.AddDatabase("postgresdb");
 
 var exampleProject = builder.AddProject<Projects.ExampleProject>()
-                            .WithReference(postgresdb);
+    .WithReference(postgresdb);
+
+// After adding all resources, run the app...
+```
+</TabItem>
+<TabItem label="TypeScript">
+```typescript title="TypeScript — apphost.ts"
+import { createBuilder } from './.modules/aspire.js';
+
+const builder = await createBuilder();
+
+const postgres = await builder.addPostgres("postgres");
+await postgres.withPgWeb();
+
+const postgresdb = await postgres.addDatabase("postgresdb");
+
+await builder.addNodeApp("api", "./api", "index.js")
+    .withReference(postgresdb);
 
 // After adding all resources, run the app...
 ```
+</TabItem>
+</Tabs>
 
 The preceding code adds a container based on the `docker.io/sosedoff/pgweb` image. All registered `PostgresDatabaseResource` instances are used to create a configuration file per instance, and each config is bound to the **pgweb** container bookmark directory. For more information, see [PgWeb docs: Server connection bookmarks](https://github.com/sosedoff/pgweb/wiki/Server-Connection-Bookmarks).
 
 ### Configure the pgWeb host port
 
-To configure the host port for the pgWeb container, call the `WithHostPort` method on the PostgreSQL server resource. The following example shows how to configure the host port for the pgAdmin container:
+To configure the host port for the pgWeb container, configure the pgWeb resource inside the callback as shown in the following examples:
 
+<Tabs syncKey="postgres-host-apphost-lang">
+<TabItem label="C#">
 ```csharp title="C# — AppHost.cs"
 var builder = DistributedApplication.CreateBuilder(args);
 
 var postgres = builder.AddPostgres("postgres")
-                      .WithPgWeb(pgWeb => pgWeb.WithHostPort(5050));
+    .WithPgWeb(pgWeb => pgWeb.WithHostPort(5050));
 
 var postgresdb = postgres.AddDatabase("postgresdb");
 
 var exampleProject = builder.AddProject<Projects.ExampleProject>()
-                            .WithReference(postgresdb);
+    .WithReference(postgresdb);
+
+// After adding all resources, run the app...
+```
+</TabItem>
+<TabItem label="TypeScript">
+```typescript title="TypeScript — apphost.ts"
+import { createBuilder } from './.modules/aspire.js';
+
+const builder = await createBuilder();
+
+const postgres = await builder.addPostgres("postgres");
+await postgres.withPgWeb({
+    configureContainer: async pgWeb => {
+        await pgWeb.withHostPort({ port: 5050 });
+    }
+});
+
+const postgresdb = await postgres.addDatabase("postgresdb");
+
+await builder.addNodeApp("api", "./api", "index.js")
+    .withReference(postgresdb);
 
 // After adding all resources, run the app...
 ```
+</TabItem>
+</Tabs>
 
 The preceding code adds and configures the host port for the pgWeb container. The host port is otherwise randomly assigned.
 
 ## Add PostgreSQL server resource with data volume
 
-To add a data volume to the PostgreSQL server resource, call the `WithDataVolume` method on the PostgreSQL server resource:
+Add a data volume to the PostgreSQL server resource as shown in the following examples:
 
+<Tabs syncKey="postgres-host-apphost-lang">
+<TabItem label="C#">
 ```csharp title="C# — AppHost.cs"
 var builder = DistributedApplication.CreateBuilder(args);
 
 var postgres = builder.AddPostgres("postgres")
-                      .WithDataVolume(isReadOnly: false);
+    .WithDataVolume(isReadOnly: false);
 
 var postgresdb = postgres.AddDatabase("postgresdb");
 
 var exampleProject = builder.AddProject<Projects.ExampleProject>()
-                            .WithReference(postgresdb);
+    .WithReference(postgresdb);
 
 // After adding all resources, run the app...
 ```
+</TabItem>
+<TabItem label="TypeScript">
+```typescript title="TypeScript — apphost.ts"
+import { createBuilder } from './.modules/aspire.js';
 
-The data volume is used to persist the PostgreSQL server data outside the lifecycle of its container. The data volume is mounted at the `/var/lib/postgresql/data` path in the PostgreSQL server container and when a `name` parameter isn't provided, the name is generated at random. For more information on data volumes and details on why they're preferred over [bind mounts](#add-postgresql-server-resource-with-data-bind-mount), see [Docker docs: Volumes](https://docs.docker.com/engine/storage/volumes).
+const builder = await createBuilder();
 
-<Aside type="caution">
-    Some database integrations, including the Aspire PostgreSQL integration, can't successfully use data volumes after deployment to Azure Container Apps (ACA). This is because ACA uses Server Message Block (SMB) to connect containers to data volumes, and some systems can't use this connection. In the Aspire Dashboard, a database affected by this issue has a status of **Activating** or **Activation Failed** but is never listed as **Running**.
+const postgres = await builder.addPostgres("postgres");
+await postgres.withDataVolume({ isReadOnly: false });
 
-    You can resolve the problem by using the managed service **Azure Database for PostgreSQL** to host the deployed database instead of a container in ACA, which is the recommended approach regardless of this issue. The following AppHost code shows how to deploy a database to Azure Database for PostgreSQL, but run it as a container, with a data volume, during development:
+const postgresdb = await postgres.addDatabase("postgresdb");
 
-    ```csharp title="C# — AppHost.cs"
-    var builder = DistributedApplication.CreateBuilder(args);
+await builder.addNodeApp("api", "./api", "index.js")
+    .withReference(postgresdb);
 
-    var postgres = builder.AddAzurePostgresFlexibleServer("postgres")
-                        .RunAsContainer(container => 
-                        {
-                            container.WithDataVolume();
-                        });
+// After adding all resources, run the app...
+```
+</TabItem>
+</Tabs>
+
+The data volume is used to persist the PostgreSQL server data outside the lifecycle of its container. The data volume is mounted at the `/var/lib/postgresql/data` path in the PostgreSQL server container and when a `name` parameter isn't provided, the name is generated at random. For more information on data volumes and details on why they're preferred over [bind mounts](#add-postgresql-server-resource-with-data-bind-mount), see [Docker docs: Volumes](https://docs.docker.com/engine/storage/volumes).
+
+<Aside type="caution">
+    Some database integrations, including the Aspire PostgreSQL integration, can't successfully use data volumes after deployment to Azure Container Apps (ACA). This is because ACA uses Server Message Block (SMB) to connect containers to data volumes, and some systems can't use this connection. In the Aspire Dashboard, a database affected by this issue has a status of **Activating** or **Activation Failed** but is never listed as **Running**.
 
-    builder.Build().Run();
-    ```
+    You can resolve the problem by using the managed service **Azure Database for PostgreSQL** to host the deployed database instead of a container in ACA, which is the recommended approach regardless of this issue. For that managed-service flow, see [Azure Database for PostgreSQL Hosting integration](/integrations/cloud/azure/azure-postgresql/azure-postgresql-host/).
 </Aside>
 
 ## Add PostgreSQL server resource with data bind mount
 
-To add a data bind mount to the PostgreSQL server resource, call the `WithDataBindMount` method:
+Add a data bind mount to the PostgreSQL server resource as shown in the following examples:
 
+<Tabs syncKey="postgres-host-apphost-lang">
+<TabItem label="C#">
 ```csharp title="C# — AppHost.cs"
 var builder = DistributedApplication.CreateBuilder(args);
 
 var postgres = builder.AddPostgres("postgres")
-                      .WithDataBindMount(
+    .WithDataBindMount(
                           source: "/PostgreSQL/Data",
                           isReadOnly: false);
 
 var postgresdb = postgres.AddDatabase("postgresdb");
 
 var exampleProject = builder.AddProject<Projects.ExampleProject>()
-                            .WithReference(postgresdb);
+    .WithReference(postgresdb);
 
 // After adding all resources, run the app...
 ```
+</TabItem>
+<TabItem label="TypeScript">
+```typescript title="TypeScript — apphost.ts"
+import { createBuilder } from './.modules/aspire.js';
+
+const builder = await createBuilder();
+
+const postgres = await builder.addPostgres("postgres");
+await postgres.withDataBindMount("/PostgreSQL/Data", { isReadOnly: false });
+
+const postgresdb = await postgres.addDatabase("postgresdb");
+
+await builder.addNodeApp("api", "./api", "index.js")
+    .withReference(postgresdb);
+
+// After adding all resources, run the app...
+```
+</TabItem>
+</Tabs>
 
 <Aside type="note">
     Data [bind mounts](https://docs.docker.com/engine/storage/bind-mounts/) have limited functionality compared to [volumes](https://docs.docker.com/engine/storage/volumes/), which offer better performance, portability, and security, making them more suitable for production environments. However, bind mounts allow direct access and modification of files on the host system, ideal for development and testing where real-time changes are needed.
@@ -255,28 +470,53 @@ Data bind mounts rely on the host machine's filesystem to persist the PostgreSQL
 
 ## Add PostgreSQL server resource with init bind mount
 
-To add an init bind mount to the PostgreSQL server resource, call the `WithInitBindMount` method:
+Use initialization files to seed the PostgreSQL server. The C# AppHost exposes `WithInitBindMount(...)`, while the TypeScript AppHost exposes `withInitFiles(...)`.
 
+<Tabs syncKey="postgres-host-apphost-lang">
+<TabItem label="C#">
 ```csharp title="C# — AppHost.cs"
 var builder = DistributedApplication.CreateBuilder(args);
 
 var postgres = builder.AddPostgres("postgres")
-                      .WithInitBindMount(@"C:\PostgreSQL\Init");
+    .WithInitBindMount(@"C:\PostgreSQL\Init");
 
 var postgresdb = postgres.AddDatabase("postgresdb");
 
 var exampleProject = builder.AddProject<Projects.ExampleProject>()
-                            .WithReference(postgresdb);
+    .WithReference(postgresdb);
+
+// After adding all resources, run the app...
+```
+</TabItem>
+<TabItem label="TypeScript">
+```typescript title="TypeScript — apphost.ts"
+import { createBuilder } from './.modules/aspire.js';
+
+const builder = await createBuilder();
+
+const postgres = await builder.addPostgres("postgres");
+await postgres.withInitFiles("./postgres-init");
+
+const postgresdb = await postgres.addDatabase("postgresdb");
+
+await builder.addNodeApp("api", "./api", "index.js")
+    .withReference(postgresdb);
 
 // After adding all resources, run the app...
 ```
 
-The init bind mount relies on the host machine's filesystem to initialize the PostgreSQL server database with the containers _init_ folder. This folder is used for initialization, running any executable shell scripts or _.sql_ command files after the _postgres-data_ folder is created. The init bind mount is mounted at the `C:\PostgreSQL\Init` on Windows (or `/PostgreSQL/Init` on Unix) path on the host machine in the PostgreSQL server container.
+The TypeScript AppHost doesn't currently expose a `withInitBindMount(...)` API for PostgreSQL. Use `withInitFiles(...)` when you want to copy initialization files into the container instead.
+</TabItem>
+</Tabs>
+
+The init bind mount relies on the host machine's filesystem to initialize the PostgreSQL server database with the container's _init_ folder. This folder is used for initialization, running any executable shell scripts or _.sql_ command files after the _postgres-data_ folder is created. The init bind mount is mounted at the `C:\PostgreSQL\Init` on Windows (or `/PostgreSQL/Init` on Unix) path on the host machine in the PostgreSQL server container.
 
 ## Add PostgreSQL server resource with parameters
 
-When you want to explicitly provide the username and password used by the container image, you can provide these credentials as parameters. Consider the following alternative example:
+When you want to explicitly provide the username and password used by the container image, you can provide these credentials as parameters. Consider the following alternative examples:
 
+<Tabs syncKey="postgres-host-apphost-lang">
+<TabItem label="C#">
 ```csharp title="C# — AppHost.cs"
 var builder = DistributedApplication.CreateBuilder(args);
 
@@ -287,100 +527,37 @@ var postgres = builder.AddPostgres("postgres", username, password);
 var postgresdb = postgres.AddDatabase("postgresdb");
 
 var exampleProject = builder.AddProject<Projects.ExampleProject>()
-                            .WithReference(postgresdb);
+    .WithReference(postgresdb);
 
 // After adding all resources, run the app...
 ```
+</TabItem>
+<TabItem label="TypeScript">
+```typescript title="TypeScript — apphost.ts"
+import { createBuilder } from './.modules/aspire.js';
 
+const builder = await createBuilder();
 
-### Connection properties
-
-When you reference a PostgreSQL resource using `WithReference`, the following connection properties are made available to the consuming project:
-
-#### PostgreSQL server
+const userName = await builder.addParameter("username", { secret: true });
+const password = await builder.addParameter("password", { secret: true });
 
-The PostgreSQL server resource exposes the following connection properties:
+const postgres = await builder.addPostgres("postgres", { userName, password });
+const postgresdb = await postgres.addDatabase("postgresdb");
 
-| Property Name | Description |
-|---------------|-------------|
-| `Host` | The hostname or IP address of the PostgreSQL server |
-| `Port` | The port number the PostgreSQL server is listening on |
-| `Username` | The username for authentication |
-| `Password` | The password for authentication |
-| `Uri` | The connection URI in postgresql:// format, with the format `postgresql://{Username}:{Password}@{Host}:{Port}` |
-| `JdbcConnectionString` | JDBC-format connection string, with the format `jdbc:postgresql://{Host}:{Port}`. User and password credentials are provided as separate `Username` and `Password` properties. |
+await builder.addNodeApp("api", "./api", "index.js")
+    .withReference(postgresdb);
 
-**Example connection strings:**
-
-```
-Uri: postgresql://postgres:p%40ssw0rd1@localhost:5432
-JdbcConnectionString: jdbc:postgresql://localhost:5432
+// After adding all resources, run the app...
 ```
+</TabItem>
+</Tabs>
 
-#### PostgreSQL database
-
-The PostgreSQL database resource inherits all properties from its parent `PostgresServerResource` and adds:
-
-| Property Name | Description |
-|---------------|-------------|
-| `Uri` | The connection URI with the database name, with the format `postgresql://{Username}:{Password}@{Host}:{Port}/{DatabaseName}` |
-| `JdbcConnectionString` | JDBC connection string with database name, with the format `jdbc:postgresql://{Host}:{Port}/{DatabaseName}`. User and password credentials are provided as separate `Username` and `Password` properties. |
-| `DatabaseName` | The name of the database |
-
-**Example connection strings:**
-
-```
-Uri: postgresql://postgres:p%40ssw0rd1@localhost:5432/catalog
-JdbcConnectionString: jdbc:postgresql://localhost:5432/catalog
-```
+### Connection properties
 
-<Aside type="note">
-  Aspire exposes each property as an environment variable named `[RESOURCE]_[PROPERTY]`. For instance, the `Uri` property of a resource called `db1` becomes `DB1_URI`.
-</Aside>
+For a full reference of PostgreSQL connection properties and environment variables — including how to connect from JavaScript, Python, Go, and .NET — see [Connect to PostgreSQL](../postgres-connect/).
 
 ### Hosting integration health checks
 
 The PostgreSQL hosting integration automatically adds a health check for the PostgreSQL server resource. The health check verifies that the PostgreSQL server is running and that a connection can be established to it.
 
 The hosting integration relies on the [📦 AspNetCore.HealthChecks.Npgsql](https://www.nuget.org/packages/AspNetCore.HealthChecks.Npgsql) NuGet package.
-
-### Using with non-.NET applications
-
-The PostgreSQL hosting integration can be used with any application technology, not just .NET applications. When you use `WithReference` to reference a PostgreSQL resource, connection information is automatically injected as environment variables into the referencing application.
-
-For applications that don't use the [client integration](/integrations/databases/postgres/postgres-client/), you can access the connection information through environment variables. Here's an example of how to configure environment variables for a non-.NET application:
-
-```csharp title="C# — AppHost.cs"
-var builder = DistributedApplication.CreateBuilder(args);
-
-var postgres = builder.AddPostgres("postgres")
-    .WithLifetime(ContainerLifetime.Persistent);
-
-var database = postgres.AddDatabase("myDatabase");
-
-// Example: Configure a non-.NET application with PostgreSQL access
-var app = builder.AddExecutable("my-app", "node", "app.js", ".")
-    .WithReference(database) // Provides ConnectionStrings__myDatabase
-    .WithEnvironment(context =>
-    {
-        // Additional individual connection details as environment variables
-        context.EnvironmentVariables["POSTGRES_HOST"] = postgres.Resource.PrimaryEndpoint.Property(EndpointProperty.Host);
-        context.EnvironmentVariables["POSTGRES_PORT"] = postgres.Resource.PrimaryEndpoint.Property(EndpointProperty.Port);
-        context.EnvironmentVariables["POSTGRES_USER"] = postgres.Resource.UserNameParameter;
-        context.EnvironmentVariables["POSTGRES_PASSWORD"] = postgres.Resource.PasswordParameter;
-        context.EnvironmentVariables["POSTGRES_DATABASE"] = database.Resource.DatabaseName;
-    });
-
-builder.Build().Run();
-```
-
-This configuration provides the non-.NET application with several environment variables:
-
-- `ConnectionStrings__myDatabase`: The complete PostgreSQL connection string
-- `POSTGRES_HOST`: The hostname/IP address of the PostgreSQL server
-- `POSTGRES_PORT`: The port number the PostgreSQL server is listening on  
-- `POSTGRES_USER`: The database username
-- `POSTGRES_PASSWORD`: The dynamically generated password
-- `POSTGRES_DATABASE`: The name of the database
-
-Your non-.NET application can then read these environment variables to connect to the PostgreSQL database using the appropriate database driver for that technology (for example, `psycopg2` for Python, `pg` for Node.js, or `pq` for Go).
\ No newline at end of file

From ca911847751ca8486a7428d9ddf83675dbe231e2 Mon Sep 17 00:00:00 2001
From: David Fowler <davidfowl@gmail.com>
Date: Wed, 25 Mar 2026 17:39:27 -0700
Subject: [PATCH 2/2] Address PR #609 review feedback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove SyncedPivotSelector component; use PivotSelector directly (IEvangelist, eerhardt)
- Revert Sidebar.astro changes to split into separate PR (IEvangelist)
- Align PivotSelector keys across Postgres pages (IEvangelist)
- Fix env var naming: POSTGRESDB_DATABASE → POSTGRESDB_DATABASENAME (copilot-reviewer)
- Remove spurious default 'db' from Python examples (eerhardt)
- Use version-agnostic '*' in aspire.config.json example (eerhardt)
- Mention both WithReference (C#) and withReference (TS) (copilot-reviewer)
- Fix broken link to connection properties (copilot-reviewer)
- Add lib/pq note in Go section, explain pgx recommendation (eerhardt, IEvangelist)
- Remove explicit parameters from TS AppHost example to match C# (eerhardt)
- Clarify 'Choose a consuming language' section titles (eerhardt)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../src/components/SyncedPivotSelector.astro  | 107 ------------------
 .../src/components/starlight/Sidebar.astro    |  13 ---
 .../databases/postgres/postgres-connect.mdx   |  19 ++--
 .../postgres/postgres-get-started.mdx         |  14 +--
 .../databases/postgres/postgres-host.mdx      |  31 +++--
 5 files changed, 31 insertions(+), 153 deletions(-)
 delete mode 100644 src/frontend/src/components/SyncedPivotSelector.astro

diff --git a/src/frontend/src/components/SyncedPivotSelector.astro b/src/frontend/src/components/SyncedPivotSelector.astro
deleted file mode 100644
index 2bd0a086f..000000000
--- a/src/frontend/src/components/SyncedPivotSelector.astro
+++ /dev/null
@@ -1,107 +0,0 @@
----
-import PivotSelector from '@components/PivotSelector.astro';
-
-interface Option {
-  id: string;
-  title: string;
-  disabled?: boolean;
-}
-
-interface Props {
-  key: string;
-  syncKey: string;
-  options: Option[];
-  title?: string;
-  marginTop?: number | null;
-}
-
-const { key, syncKey, options, title, marginTop } = Astro.props;
-const optionLabels = Object.fromEntries(options.map(({ id, title }) => [id, title]));
----
-
-<PivotSelector key={key} title={title} options={options} marginTop={marginTop} />
-
-<script is:inline define:vars={{ key, syncKey, optionLabels }}>
-  function initSyncedPivotSelector() {
-    const selector = document.getElementById(`pivot-selector-${key}`);
-    if (!selector || selector.dataset.syncedTabsBound === 'true') {
-      return;
-    }
-
-    selector.dataset.syncedTabsBound = 'true';
-
-    const storageKey = `starlight-synced-tabs__${syncKey}`;
-
-    const getIdForLabel = (label) => Object.entries(optionLabels)
-      .find(([, value]) => value === label)?.[0];
-
-    const setPivotState = (id) => {
-      if (!id) {
-        return;
-      }
-
-      localStorage.setItem(key, id);
-
-      const url = new URL(window.location);
-      url.searchParams.set(key, id);
-      window.history.replaceState({}, '', url);
-
-      [...selector.querySelectorAll('button')].forEach((button) =>
-        button.classList.toggle('active', button.dataset.pivotOption === id)
-      );
-    };
-
-    const syncTabs = (id) => {
-      const label = optionLabels[id];
-      if (!label) {
-        return;
-      }
-
-      localStorage.setItem(storageKey, label);
-
-      const tab = [...document.querySelectorAll('main [role="tab"]')]
-        .find((button) => button.textContent?.trim() === label);
-
-      if (tab && tab.getAttribute('aria-selected') !== 'true') {
-        tab.click();
-      }
-    };
-
-    const bindTabs = () => {
-      [...document.querySelectorAll('main [role="tab"]')].forEach((button) => {
-        const label = button.textContent?.trim();
-        const id = getIdForLabel(label);
-
-        if (!id || button.dataset.syncedPivotBound === 'true') {
-          return;
-        }
-
-        button.dataset.syncedPivotBound = 'true';
-        button.addEventListener('click', () => {
-          requestAnimationFrame(() => setPivotState(id));
-        });
-      });
-    };
-
-    const applyCurrentSelection = () => {
-      const active = selector.querySelector('button.active');
-      const id = active?.dataset.pivotOption;
-      if (id) {
-        syncTabs(id);
-      }
-    };
-
-    selector.addEventListener('click', (event) => {
-      const button = event.target.closest('button[data-pivot-option]');
-      if (button?.dataset.pivotOption) {
-        requestAnimationFrame(() => syncTabs(button.dataset.pivotOption));
-      }
-    });
-
-    bindTabs();
-    requestAnimationFrame(applyCurrentSelection);
-  }
-
-  document.addEventListener('astro:page-load', initSyncedPivotSelector);
-  initSyncedPivotSelector();
-</script>
diff --git a/src/frontend/src/components/starlight/Sidebar.astro b/src/frontend/src/components/starlight/Sidebar.astro
index 0c84b22ac..ed734941c 100644
--- a/src/frontend/src/components/starlight/Sidebar.astro
+++ b/src/frontend/src/components/starlight/Sidebar.astro
@@ -86,19 +86,6 @@ const referenceOverviewHref = `${base}${localePrefix}/reference/overview/`;
     </LinkButton>
   </div>
 </div>
-<script is:inline>
-// Ensure the sidebar group containing the current page is always expanded,
-// even if the SidebarPersister restored a previously-collapsed state.
-(() => {
-  const link = document.querySelector('[aria-current="page"]');
-  if (!link) return;
-  let el = link;
-  while ((el = el.parentElement)) {
-    if (el.tagName === 'DETAILS') el.open = true;
-    if (el.tagName === 'NAV' || el.tagName === 'BODY') break;
-  }
-})();
-</script>
 {isApiRefPage && (
   <button
     type="button"
diff --git a/src/frontend/src/content/docs/integrations/databases/postgres/postgres-connect.mdx b/src/frontend/src/content/docs/integrations/databases/postgres/postgres-connect.mdx
index b7ef1f782..31882e0f1 100644
--- a/src/frontend/src/content/docs/integrations/databases/postgres/postgres-connect.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/postgres/postgres-connect.mdx
@@ -16,7 +16,7 @@ import postgresIcon from '@assets/icons/postgresql-icon.png';
   data-zoom-off
 />
 
-When you reference a PostgreSQL resource from the AppHost with `withReference`, Aspire automatically injects connection information into the consuming application as environment variables. This page shows how to read those variables and connect to PostgreSQL from any language.
+When you reference a PostgreSQL resource from the AppHost with `WithReference` (C#) or `withReference` (TypeScript), Aspire automatically injects connection information into the consuming application as environment variables. This page shows how to read those variables and connect to PostgreSQL from any language.
 
 <Aside type="tip">
     For .NET applications, you can use environment variables directly or use the [Client integration (.NET)](../postgres-client/) for automatic dependency injection, health checks, and telemetry.
@@ -85,7 +85,7 @@ import pg from 'pg';
 const client = new pg.Client({
     user: process.env.POSTGRESDB_USERNAME,
     host: process.env.POSTGRESDB_HOST,
-    database: process.env.POSTGRESDB_DATABASE,
+    database: process.env.POSTGRESDB_DATABASENAME,
     password: process.env.POSTGRESDB_PASSWORD,
     port: process.env.POSTGRESDB_PORT,
 });
@@ -131,12 +131,14 @@ async with await psycopg.AsyncConnection.connect(
 </TabItem>
 <TabItem label="Go">
 
-Use the standard `pgx` driver:
+Use the `pgx` driver, the most actively maintained and feature-rich PostgreSQL driver for Go:
 
 ```bash title="Terminal"
 go get github.com/jackc/pgx/v5
 ```
 
+> **Note:** [`lib/pq`](https://github.com/lib/pq) is another popular Go PostgreSQL driver, but `pgx` is recommended for new projects because it offers better performance, native PostgreSQL protocol support, and active maintenance.
+
 Read the injected environment variables and connect:
 
 ```go title="Go — main.go"
@@ -182,7 +184,7 @@ await using var conn = await dataSource.OpenConnectionAsync();
 
 If your application expects specific environment variable names, you can pass individual connection properties from the AppHost:
 
-<Tabs syncKey="postgres-host-apphost-lang">
+<Tabs syncKey="postgres-apphost-lang">
 <TabItem label="C#">
 ```csharp title="C# — AppHost.cs"
 var builder = DistributedApplication.CreateBuilder(args);
@@ -210,16 +212,13 @@ import { createBuilder } from './.modules/aspire.js';
 
 const builder = await createBuilder();
 
-const userName = await builder.addParameter("username", { secret: true });
-const password = await builder.addParameter("password", { secret: true });
-
-const postgres = await builder.addPostgres("postgres", { userName, password });
+const postgres = await builder.addPostgres("postgres");
 const database = await postgres.addDatabase("myDatabase");
 
 await builder.addNodeApp("my-app", "./app", "index.js")
     .withReference(database)
-    .withEnvironment("POSTGRES_USER", userName)
-    .withEnvironment("POSTGRES_PASSWORD", password)
+    .withEnvironment("POSTGRES_USER", postgres.userName)
+    .withEnvironment("POSTGRES_PASSWORD", postgres.password)
     .withEnvironment("POSTGRES_DATABASE", "myDatabase");
 
 await builder.build().run();
diff --git a/src/frontend/src/content/docs/integrations/databases/postgres/postgres-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/postgres/postgres-get-started.mdx
index 8f15b586c..8e7729c84 100644
--- a/src/frontend/src/content/docs/integrations/databases/postgres/postgres-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/postgres/postgres-get-started.mdx
@@ -57,7 +57,7 @@ This updates your `aspire.config.json` with the PostgreSQL hosting integration p
 ```json title="aspire.config.json" ins={3}
 {
   "packages": {
-    "Aspire.Hosting.PostgreSQL": "13.2.0"
+    "Aspire.Hosting.PostgreSQL": "*"
   }
 }
 ```
@@ -82,7 +82,7 @@ await builder.addNodeApp("api", "./api", "index.js")
     For the full TypeScript AppHost PostgreSQL API surface, see [PostgreSQL Hosting integration](../postgres-host/).
 </Aside>
 
-### Choose a consuming language for the TypeScript AppHost quickstart
+### Connect from your consuming app
 
 The examples below assume your `apphost.ts` file references `postgresdb` from the consuming app with `withReference(postgresdb)`.
 
@@ -108,7 +108,7 @@ const pguser = process.env.POSTGRESDB_USERNAME;
 const pgpassword = process.env.POSTGRESDB_PASSWORD;
 const pghost = process.env.POSTGRESDB_HOST;
 const pgport = process.env.POSTGRESDB_PORT;
-const pgdatabase = process.env.POSTGRESDB_DATABASE;
+const pgdatabase = process.env.POSTGRESDB_DATABASENAME;
 ```
 
 Connect to PostgreSQL with `pg`:
@@ -145,7 +145,7 @@ Use `os.getenv()` to read the injected PostgreSQL properties:
 
 ```python title="Python - Obtain configuration properties"
 postgres_uri = os.getenv("POSTGRESDB_URI")
-postgres_name = os.getenv("POSTGRESDB_DATABASE", "db")
+postgres_name = os.getenv("POSTGRESDB_DATABASENAME")
 ```
 
 Connect to PostgreSQL with `psycopg`:
@@ -224,7 +224,7 @@ var api = builder.AddProject<Projects.ExampleProject>("apiservice")
     For the full C# AppHost PostgreSQL API surface, see [PostgreSQL Hosting integration](../postgres-host/).
 </Aside>
 
-### Choose a consuming language for the C# AppHost quickstart
+### Connect from your consuming app
 
 The examples below assume your `AppHost.cs` file references `postgresdb` from the consuming app with `WithReference(postgresdb)`.
 
@@ -274,7 +274,7 @@ Use `os.getenv()` to read the injected PostgreSQL properties:
 
 ```python title="Python - Obtain configuration properties"
 postgres_uri = os.getenv("POSTGRESDB_URI")
-postgres_name = os.getenv("POSTGRESDB_DATABASE", "db")
+postgres_name = os.getenv("POSTGRESDB_DATABASENAME")
 ```
 
 Connect to PostgreSQL with `psycopg`:
@@ -305,7 +305,7 @@ const pguser = process.env.POSTGRESDB_USERNAME;
 const pgpassword = process.env.POSTGRESDB_PASSWORD;
 const pghost = process.env.POSTGRESDB_HOST;
 const pgport = process.env.POSTGRESDB_PORT;
-const pgdatabase = process.env.POSTGRESDB_DATABASE;
+const pgdatabase = process.env.POSTGRESDB_DATABASENAME;
 ```
 
 Connect to PostgreSQL with `pg`:
diff --git a/src/frontend/src/content/docs/integrations/databases/postgres/postgres-host.mdx b/src/frontend/src/content/docs/integrations/databases/postgres/postgres-host.mdx
index 1770f6083..eb23de1c5 100644
--- a/src/frontend/src/content/docs/integrations/databases/postgres/postgres-host.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/postgres/postgres-host.mdx
@@ -5,7 +5,7 @@ description: Learn how to use the Aspire PostgreSQL Hosting integration to orche
 
 import { Image } from 'astro:assets';
 import { Aside, Steps, Tabs, TabItem } from '@astrojs/starlight/components';
-import SyncedPivotSelector from '@components/SyncedPivotSelector.astro';
+import PivotSelector from '@components/PivotSelector.astro';
 import postgresIcon from '@assets/icons/postgresql-icon.png';
 
 <Image
@@ -21,10 +21,9 @@ To get started with the Aspire PostgreSQL integrations, follow the [Get started
 
 This article includes full details on the Aspire PostgreSQL Hosting integration, with examples for both `AppHost.cs` and `apphost.ts`, so you can model PostgreSQL server and database resources in your [`AppHost`](/get-started/app-host/) project.
 
-<SyncedPivotSelector
+<PivotSelector
     title="Select your AppHost language"
-    key="postgres-host-apphost-lang"
-    syncKey="postgres-host-apphost-lang"
+    key="postgres-apphost-lang"
     options={[
         { id: "csharp", title: "C#" },
         { id: "typescript", title: "TypeScript" },
@@ -44,7 +43,7 @@ The PostgreSQL hosting integration models various PostgreSQL resources as the fo
 
 To access these types and APIs for expressing them as resources in your [`AppHost`](/get-started/app-host/) project, install the [📦 Aspire.Hosting.PostgreSQL](https://www.nuget.org/packages/Aspire.Hosting.PostgreSQL) NuGet package:
 
-<Tabs syncKey="postgres-host-apphost-lang">
+<Tabs syncKey="postgres-apphost-lang">
 <TabItem label="C#">
 
 ```bash title="Terminal"
@@ -85,7 +84,7 @@ This updates your `aspire.config.json` with the PostgreSQL hosting integration p
 
 In your AppHost project, add a PostgreSQL server resource and then add a database resource as shown in the following examples:
 
-<Tabs syncKey="postgres-host-apphost-lang">
+<Tabs syncKey="postgres-apphost-lang">
 <TabItem label="C#">
 ```csharp title="C# — AppHost.cs"
 var builder = DistributedApplication.CreateBuilder(args);
@@ -133,7 +132,7 @@ await builder.addNodeApp("api", "./api", "index.js")
 </Aside>
 
 <Aside type="note">
-    When you reference a PostgreSQL resource from the AppHost, Aspire makes several properties available to the consuming project, such as connection strings, URIs, and port numbers. For a complete list of these properties, see [Properties of the PostgreSQL resources](../postgres-client/#properties-of-the-postgresql-resources).
+    When you reference a PostgreSQL resource from the AppHost, Aspire makes several properties available to the consuming project, such as connection strings, URIs, and port numbers. For a complete list of these properties, see [Connection properties](../postgres-connect/#connection-properties).
 </Aside>
 
 ## Add PostgreSQL resource with database scripts
@@ -146,7 +145,7 @@ CREATE DATABASE "<QUOTED_DATABASE_NAME>"
 
 To alter the default script, configure the database resource with a custom creation script:
 
-<Tabs syncKey="postgres-host-apphost-lang">
+<Tabs syncKey="postgres-apphost-lang">
 <TabItem label="C#">
 ```csharp title="C# — AppHost.cs"
 var builder = DistributedApplication.CreateBuilder(args);
@@ -206,7 +205,7 @@ The preceding example creates a database named `app_db`. The script is run when
 
 Add the [**dpage/pgadmin4**](https://www.pgadmin.org/) container to the PostgreSQL resource to get a web-based admin dashboard, as shown in the following examples:
 
-<Tabs syncKey="postgres-host-apphost-lang">
+<Tabs syncKey="postgres-apphost-lang">
 <TabItem label="C#">
 ```csharp title="C# — AppHost.cs"
 var builder = DistributedApplication.CreateBuilder(args);
@@ -247,7 +246,7 @@ The preceding code adds a container based on the `docker.io/dpage/pgadmin4` imag
 
 To configure the host port for the pgAdmin container, configure the pgAdmin resource inside the callback as shown in the following examples:
 
-<Tabs syncKey="postgres-host-apphost-lang">
+<Tabs syncKey="postgres-apphost-lang">
 <TabItem label="C#">
 ```csharp title="C# — AppHost.cs"
 var builder = DistributedApplication.CreateBuilder(args);
@@ -292,7 +291,7 @@ The preceding code adds and configures the host port for the pgAdmin container.
 
 Add the [**sosedoff/pgweb**](https://sosedoff.github.io/pgweb/) container to the PostgreSQL resource to get a web-based admin dashboard, as shown in the following examples:
 
-<Tabs syncKey="postgres-host-apphost-lang">
+<Tabs syncKey="postgres-apphost-lang">
 <TabItem label="C#">
 ```csharp title="C# — AppHost.cs"
 var builder = DistributedApplication.CreateBuilder(args);
@@ -333,7 +332,7 @@ The preceding code adds a container based on the `docker.io/sosedoff/pgweb` imag
 
 To configure the host port for the pgWeb container, configure the pgWeb resource inside the callback as shown in the following examples:
 
-<Tabs syncKey="postgres-host-apphost-lang">
+<Tabs syncKey="postgres-apphost-lang">
 <TabItem label="C#">
 ```csharp title="C# — AppHost.cs"
 var builder = DistributedApplication.CreateBuilder(args);
@@ -378,7 +377,7 @@ The preceding code adds and configures the host port for the pgWeb container. Th
 
 Add a data volume to the PostgreSQL server resource as shown in the following examples:
 
-<Tabs syncKey="postgres-host-apphost-lang">
+<Tabs syncKey="postgres-apphost-lang">
 <TabItem label="C#">
 ```csharp title="C# — AppHost.cs"
 var builder = DistributedApplication.CreateBuilder(args);
@@ -425,7 +424,7 @@ The data volume is used to persist the PostgreSQL server data outside the lifecy
 
 Add a data bind mount to the PostgreSQL server resource as shown in the following examples:
 
-<Tabs syncKey="postgres-host-apphost-lang">
+<Tabs syncKey="postgres-apphost-lang">
 <TabItem label="C#">
 ```csharp title="C# — AppHost.cs"
 var builder = DistributedApplication.CreateBuilder(args);
@@ -472,7 +471,7 @@ Data bind mounts rely on the host machine's filesystem to persist the PostgreSQL
 
 Use initialization files to seed the PostgreSQL server. The C# AppHost exposes `WithInitBindMount(...)`, while the TypeScript AppHost exposes `withInitFiles(...)`.
 
-<Tabs syncKey="postgres-host-apphost-lang">
+<Tabs syncKey="postgres-apphost-lang">
 <TabItem label="C#">
 ```csharp title="C# — AppHost.cs"
 var builder = DistributedApplication.CreateBuilder(args);
@@ -515,7 +514,7 @@ The init bind mount relies on the host machine's filesystem to initialize the Po
 
 When you want to explicitly provide the username and password used by the container image, you can provide these credentials as parameters. Consider the following alternative examples:
 
-<Tabs syncKey="postgres-host-apphost-lang">
+<Tabs syncKey="postgres-apphost-lang">
 <TabItem label="C#">
 ```csharp title="C# — AppHost.cs"
 var builder = DistributedApplication.CreateBuilder(args);