cloudflare · sejoker · Feb 27, 2025 · Feb 27, 2025 · Feb 27, 2025
@@ -8,92 +8,180 @@ sidebar:
 head:
   - tag: title
     content: Hyperdrive
-
 ---
 
-import { CardGrid, Description, Feature, LinkTitleCard, Plan, RelatedProduct } from "~/components"
+import {
+	CardGrid,
+	Description,
+	Feature,
+	LinkTitleCard,
+	Plan,
+	RelatedProduct,
+	Tabs,
+	TabItem,
+	LinkButton
+} from "~/components";
 
 <Description>
 
-
 Turn your existing regional database into a globally distributed database.
 
-
 </Description>
 
 <Plan type="workers-paid" />
 
-Hyperdrive is a service that accelerates queries you make to existing databases, making it faster to access your data from across the globe, irrespective of your users' location. Hyperdrive supports any Postgres database, including those hosted on AWS, Google Cloud and Neon, as well as Postgres-compatible databases like CockroachDB and Timescale, with MySQL coming soon.
+Hyperdrive is a service that accelerates queries you make to existing databases, making it faster to access your data from across the globe from [Cloudflare Workers](/workers/), irrespective of your users' location.
+
+Hyperdrive supports any Postgres database, including those hosted on AWS, Google Cloud and Neon, as well as Postgres-compatible databases like CockroachDB and Timescale, with MySQL coming soon. You do not need to write new code or replace your favorite tools: Hyperdrive works with your existing code and tools you use.
+
+Use Hyperdrive's connection string from your Cloudflare Workers application with your existing Postgres drivers and object-relational mapping (ORM) libraries:
+
+<Tabs>
+	<TabItem label="Workers Binding API">
+	<Tabs>
+	<TabItem label="index.ts">
+```ts
+import postgres from 'postgres';
+
+export default {
+	async fetch(request, env, ctx): Promise<Response> {
+		// Hyperdrive provides a unique generated connection string to connect to
+		// your database via Hyperdrive that can be used with your existing tools
+		const sql = postgres(env.HYPERDRIVE.connectionString);
+
+    	try {
+    		// Sample SQL query
+    		const results = await sql`SELECT * FROM pg_tables`;
+
+    		// Close the client after the response is returned
+    		ctx.waitUntil(sql.end());
+
+    		return Response.json(results);
+    	} catch (e) {
+    		return Response.json({ error: e instanceof Error ? e.message : e }, { status: 500 });
+    	}
+    },
+} satisfies ExportedHandler<{ HYPERDRIVE: Hyperdrive }>;
+```
+
+    </TabItem>
+    <TabItem label="wrangler.jsonc">
+```json
+	{
+		"$schema": "node_modules/wrangler/config-schema.json",
+		"name": "WORKER-NAME",
+		"main": "src/index.ts",
+		"compatibility_date": "2025-02-04",
+		"compatibility_flags": [
+			"nodejs_compat"
+		],
+		"observability": {
+			"enabled": true
+		},
+		"hyperdrive": [
+			{
+				"binding": "HYPERDRIVE",
+				"id": "<YOUR_HYPERDRIVE_ID>",
+				"localConnectionString": "<ENTER_LOCAL_CONNECTION_STRING_FOR_LOCAL_DEVELOPMENT_HERE>"
+			}
+		]
+	}
+```
+
+</TabItem>
+</Tabs>
+
+<LinkButton href="/hyperdrive/get-started/">Get started</LinkButton>
+
+</TabItem>
+</Tabs>
 
-Use your existing Postgres drivers and object-relational mapping (ORM) libraries of your choice without any changes. Hyperdrive gives you a connection string that looks just like any other. You do not need to write new code or replace your favorite tools: Hyperdrive works with the ones you already use.
-
-***
+---
 
 ## Features
 
 <Feature header="Connect your database" href="/hyperdrive/get-started/" cta="Connect Hyperdrive to your database">
 
 Connect Hyperdrive to your existing database and deploy a [Worker](/workers/) that queries it.
 
-
 </Feature>
 
 <Feature header="PostgreSQL support" href="/hyperdrive/configuration/connect-to-postgres/" cta="Connect Hyperdrive to your PostgreSQL database">
 
 Hyperdrive allows you to connect to any PostgreSQL or PostgreSQL-compatible database.
 
-
 </Feature>
 
 <Feature header="Query Caching" href="/hyperdrive/configuration/query-caching/" cta="Learn about Query Caching">
 
 Use Hyperdrive to cache the most popular queries executed against your database.
 
-
 </Feature>
 
-***
+---
 
 ## Related products
 
 <RelatedProduct header="Workers" href="/workers/" product="workers">
 
 Build serverless applications and deploy instantly across the globe for exceptional performance, reliability, and scale.
 
-
 </RelatedProduct>
 
 <RelatedProduct header="Pages" href="/pages/" product="pages">
 
 Deploy dynamic front-end applications in record time.
 
-
 </RelatedProduct>
 
-***
+---
 
 ## More resources
 
 <CardGrid>
 
-<LinkTitleCard title="Pricing" href="/hyperdrive/platform/pricing/" icon="seti:shell">
-Learn about Hyperdrive's pricing.
+<LinkTitleCard
+	title="Pricing"
+	href="/hyperdrive/platform/pricing/"
+	icon="seti:shell"
+>
+	Learn about Hyperdrive's pricing.
 </LinkTitleCard>
 
-<LinkTitleCard title="Limits" href="/hyperdrive/platform/limits/" icon="document">
-Learn about Hyperdrive limits.
+<LinkTitleCard
+	title="Limits"
+	href="/hyperdrive/platform/limits/"
+	icon="document"
+>
+	Learn about Hyperdrive limits.
 </LinkTitleCard>
 
-<LinkTitleCard title="Storage options" href="/workers/platform/storage-options/" icon="document">
-Learn more about the storage and database options you can build on with Workers.
+<LinkTitleCard
+	title="Storage options"
+	href="/workers/platform/storage-options/"
+	icon="document"
+>
+	Learn more about the storage and database options you can build on with
+	Workers.
 </LinkTitleCard>
 
-<LinkTitleCard title="Developer Discord" href="https://discord.cloudflare.com" icon="discord">
-Connect with the Workers community on Discord to ask questions, show what you are building, and discuss the platform with other developers.
+<LinkTitleCard
+	title="Developer Discord"
+	href="https://discord.cloudflare.com"
+	icon="discord"
+>
+	Connect with the Workers community on Discord to ask questions, show what you
+	are building, and discuss the platform with other developers.
 </LinkTitleCard>
 
-<LinkTitleCard title="@CloudflareDev" href="https://x.com/cloudflaredev" icon="x.com">
-Follow @CloudflareDev on Twitter to learn about product announcements, and what is new in Cloudflare Developer Platform.
+<LinkTitleCard
+	title="@CloudflareDev"
+	href="https://x.com/cloudflaredev"
+	icon="x.com"
+>
+	Follow @CloudflareDev on Twitter to learn about product announcements, and
+	what is new in Cloudflare Developer Platform.
 </LinkTitleCard>
 
 </CardGrid>
+````