diff --git a/docs/api/hono.md b/docs/api/hono.md
index 61ad0913..b861a2f0 100644
--- a/docs/api/hono.md
+++ b/docs/api/hono.md
@@ -69,7 +69,7 @@ If both a parent app and its routes have `onError` handlers, the route-level han
 ## fire()
 
 ::: warning
-**`app.fire()` is deprecated**. Use `fire()` from `hono/service-worker` instead. See the [Service Worker documentation](/docs/getting-started/service-worker) for details.
+**`app.fire()` is deprecated**. Use `fire()` from `@hono/service-worker` instead. See the [Service Worker documentation](/docs/getting-started/service-worker) for details.
 :::
 
 `app.fire()` automatically adds a global `fetch` event listener.
diff --git a/docs/getting-started/aws-lambda.md b/docs/getting-started/aws-lambda.md
index ef70774f..398415e3 100644
--- a/docs/getting-started/aws-lambda.md
+++ b/docs/getting-started/aws-lambda.md
@@ -19,7 +19,7 @@ Initialize your project with the `cdk` CLI.
 mkdir my-app
 cd my-app
 cdk init app -l typescript
-npm i hono
+npm i hono @hono/aws-lambda
 npm i -D esbuild
 mkdir lambda
 touch lambda/index.ts
@@ -29,7 +29,7 @@ touch lambda/index.ts
 mkdir my-app
 cd my-app
 cdk init app -l typescript
-yarn add hono
+yarn add hono @hono/aws-lambda
 yarn add -D esbuild
 mkdir lambda
 touch lambda/index.ts
@@ -39,7 +39,7 @@ touch lambda/index.ts
 mkdir my-app
 cd my-app
 cdk init app -l typescript
-pnpm add hono
+pnpm add hono @hono/aws-lambda
 pnpm add -D esbuild
 mkdir lambda
 touch lambda/index.ts
@@ -49,7 +49,7 @@ touch lambda/index.ts
 mkdir my-app
 cd my-app
 cdk init app -l typescript
-bun add hono
+bun add hono @hono/aws-lambda
 bun add -D esbuild
 mkdir lambda
 touch lambda/index.ts
@@ -63,7 +63,7 @@ Edit `lambda/index.ts`.
 
 ```ts
 import { Hono } from 'hono'
-import { handle } from 'hono/aws-lambda'
+import { handle } from '@hono/aws-lambda'
 
 const app = new Hono()
 
@@ -128,8 +128,8 @@ In Hono, you can access the AWS Lambda Events and Context by binding the `Lambda
 
 ```ts
 import { Hono } from 'hono'
-import type { LambdaEvent, LambdaContext } from 'hono/aws-lambda'
-import { handle } from 'hono/aws-lambda'
+import type { LambdaEvent, LambdaContext } from '@hono/aws-lambda'
+import { handle } from '@hono/aws-lambda'
 
 type Bindings = {
   event: LambdaEvent
@@ -154,8 +154,8 @@ In Hono, you can access the AWS Lambda request context by binding the `LambdaEve
 
 ```ts
 import { Hono } from 'hono'
-import type { LambdaEvent } from 'hono/aws-lambda'
-import { handle } from 'hono/aws-lambda'
+import type { LambdaEvent } from '@hono/aws-lambda'
+import { handle } from '@hono/aws-lambda'
 
 type Bindings = {
   event: LambdaEvent
@@ -177,8 +177,8 @@ you can access the AWS Lambda request context by binding the `ApiGatewayRequestC
 
 ```ts
 import { Hono } from 'hono'
-import type { ApiGatewayRequestContext } from 'hono/aws-lambda'
-import { handle } from 'hono/aws-lambda'
+import type { ApiGatewayRequestContext } from '@hono/aws-lambda'
+import { handle } from '@hono/aws-lambda'
 
 type Bindings = {
   requestContext: ApiGatewayRequestContext
@@ -209,7 +209,7 @@ Typically, the implementation requires writing chunks to NodeJS.WritableStream u
 
 ```ts
 import { Hono } from 'hono'
-import { streamHandle } from 'hono/aws-lambda'
+import { streamHandle } from '@hono/aws-lambda'
 import { streamText } from 'hono/streaming'
 
 const app = new Hono()
diff --git a/docs/getting-started/basic.md b/docs/getting-started/basic.md
index 14f21d2e..eca5c2fd 100644
--- a/docs/getting-started/basic.md
+++ b/docs/getting-started/basic.md
@@ -232,10 +232,10 @@ And, you can make your own middleware.
 ## Adapter
 
 There are Adapters for platform-dependent functions, e.g., handling static files or WebSocket.
-For example, to handle WebSocket in Cloudflare Workers, import `hono/cloudflare-workers`.
+They are published as separate packages. For example, to handle WebSocket in Cloudflare Workers, install and import `@hono/cloudflare-workers`.
 
 ```ts
-import { upgradeWebSocket } from 'hono/cloudflare-workers'
+import { upgradeWebSocket } from '@hono/cloudflare-workers'
 
 app.get(
   '/ws',
diff --git a/docs/getting-started/bun.md b/docs/getting-started/bun.md
index 53a014d7..38b3f274 100644
--- a/docs/getting-started/bun.md
+++ b/docs/getting-started/bun.md
@@ -90,10 +90,14 @@ export default { // [!code ++]
 
 ## Serve static files
 
-To serve static files, use `serveStatic` which is imported from `hono/bun`.
+To serve static files, use `serveStatic` from the `@hono/bun` package.
+
+```sh
+bun add @hono/bun
+```
 
 ```ts
-import { serveStatic } from 'hono/bun'
+import { serveStatic } from '@hono/bun'
 
 const app = new Hono()
 
diff --git a/docs/getting-started/cloudflare-pages.md b/docs/getting-started/cloudflare-pages.md
index 9908657a..2b2bbad0 100644
--- a/docs/getting-started/cloudflare-pages.md
+++ b/docs/getting-started/cloudflare-pages.md
@@ -1,7 +1,7 @@
 # Cloudflare Pages
 
 ::: warning
-For new projects, Cloudflare now recommends using [Cloudflare Workers](/docs/getting-started/cloudflare-workers) instead of Cloudflare Pages. Workers supports static assets and offers a broader set of features. If you are starting a new full-stack application, see [Cloudflare Workers + Vite](/docs/getting-started/cloudflare-workers-vite), which is the successor to this Pages setup.
+For new projects, Cloudflare now recommends using [Cloudflare Workers](/docs/getting-started/cloudflare-workers) instead of Cloudflare Pages. Workers supports static assets and offers a broader set of features. If you are starting a new full-stack application, see [Cloudflare Workers + Vite](/docs/getting-started/cloudflare-workers-vite), which is the successor to this Pages setup. The `hono/cloudflare-pages` adapter is deprecated and will be removed in Hono v5.
 :::
 
 [Cloudflare Pages](https://pages.cloudflare.com) is an edge platform for full-stack web applications.
diff --git a/docs/getting-started/deno.md b/docs/getting-started/deno.md
index db64b302..5a55b734 100644
--- a/docs/getting-started/deno.md
+++ b/docs/getting-started/deno.md
@@ -58,11 +58,15 @@ Deno.serve({ port: 8787 }, app.fetch) // [!code ++]
 
 ## Serve static files
 
-To serve static files, use `serveStatic` imported from `hono/deno`.
+To serve static files, use `serveStatic` from the `@hono/deno` package.
+
+```sh
+deno add jsr:@hono/deno
+```
 
 ```ts
 import { Hono } from 'hono'
-import { serveStatic } from 'hono/deno'
+import { serveStatic } from '@hono/deno'
 
 const app = new Hono()
 
diff --git a/docs/getting-started/lambda-edge.md b/docs/getting-started/lambda-edge.md
index ac5cecdc..e09c2c0f 100644
--- a/docs/getting-started/lambda-edge.md
+++ b/docs/getting-started/lambda-edge.md
@@ -18,7 +18,7 @@ Initialize your project with the `cdk` CLI.
 mkdir my-app
 cd my-app
 cdk init app -l typescript
-npm i hono
+npm i hono @hono/lambda-edge
 mkdir lambda
 ```
 
@@ -26,7 +26,7 @@ mkdir lambda
 mkdir my-app
 cd my-app
 cdk init app -l typescript
-yarn add hono
+yarn add hono @hono/lambda-edge
 mkdir lambda
 ```
 
@@ -34,7 +34,7 @@ mkdir lambda
 mkdir my-app
 cd my-app
 cdk init app -l typescript
-pnpm add hono
+pnpm add hono @hono/lambda-edge
 mkdir lambda
 ```
 
@@ -42,7 +42,7 @@ mkdir lambda
 mkdir my-app
 cd my-app
 cdk init app -l typescript
-bun add hono
+bun add hono @hono/lambda-edge
 mkdir lambda
 ```
 
@@ -54,7 +54,7 @@ Edit `lambda/index_edge.ts`.
 
 ```ts
 import { Hono } from 'hono'
-import { handle } from 'hono/lambda-edge'
+import { handle } from '@hono/lambda-edge'
 
 const app = new Hono()
 
@@ -135,8 +135,8 @@ If you want to add Basic Auth and continue with request processing after verific
 ```ts
 import { Hono } from 'hono'
 import { basicAuth } from 'hono/basic-auth'
-import type { Callback, CloudFrontRequest } from 'hono/lambda-edge'
-import { handle } from 'hono/lambda-edge'
+import type { Callback, CloudFrontRequest } from '@hono/lambda-edge'
+import { handle } from '@hono/lambda-edge'
 
 type Bindings = {
   callback: Callback
diff --git a/docs/getting-started/netlify.md b/docs/getting-started/netlify.md
index 2a9126d9..49ce1c18 100644
--- a/docs/getting-started/netlify.md
+++ b/docs/getting-started/netlify.md
@@ -42,7 +42,7 @@ Edit `netlify/edge-functions/index.ts`:
 
 ```ts
 import { Hono } from 'jsr:@hono/hono'
-import { handle } from 'jsr:@hono/hono/netlify'
+import { handle } from 'jsr:@hono/netlify'
 
 const app = new Hono()
 
@@ -75,7 +75,7 @@ You can access the Netlify's `Context` through `c.env`:
 
 ```ts
 import { Hono } from 'jsr:@hono/hono'
-import { handle } from 'jsr:@hono/hono/netlify'
+import { handle } from 'jsr:@hono/netlify'
 
 // Import the type definition
 import type { Context } from 'https://edge.netlify.com/'
diff --git a/docs/getting-started/nextjs.md b/docs/getting-started/nextjs.md
index cb9382e7..8dbf1ee3 100644
--- a/docs/getting-started/nextjs.md
+++ b/docs/getting-started/nextjs.md
@@ -67,7 +67,7 @@ If you use the App Router, Edit `app/api/[[...route]]/route.ts`. Refer to the [S
 
 ```ts
 import { Hono } from 'hono'
-import { handle } from 'hono/vercel'
+import { handle } from '@hono/vercel'
 
 const app = new Hono().basePath('/api')
 
@@ -78,6 +78,8 @@ app.get('/hello', (c) => {
 })
 
 export const GET = handle(app)
+
+`handle` comes from the `@hono/vercel` package, which the starter installs. On an existing project, add it with `npm i @hono/vercel`.
 export const POST = handle(app)
 ```
 
diff --git a/docs/getting-started/service-worker.md b/docs/getting-started/service-worker.md
index 449429f2..e4e41aef 100644
--- a/docs/getting-started/service-worker.md
+++ b/docs/getting-started/service-worker.md
@@ -46,22 +46,22 @@ Next, install the necessary modules.
 ::: code-group
 
 ```sh [npm]
-npm i hono
+npm i hono @hono/service-worker
 npm i -D vite
 ```
 
 ```sh [yarn]
-yarn add hono
+yarn add hono @hono/service-worker
 yarn add -D vite
 ```
 
 ```sh [pnpm]
-pnpm add hono
+pnpm add hono @hono/service-worker
 pnpm add -D vite
 ```
 
 ```sh [bun]
-bun add hono
+bun add hono @hono/service-worker
 bun add -D vite
 ```
 
@@ -118,7 +118,7 @@ In `sw.ts`, create an application using Hono and register it to the `fetch` even
 declare const self: ServiceWorkerGlobalScope
 
 import { Hono } from 'hono'
-import { handle } from 'hono/service-worker'
+import { handle } from '@hono/service-worker'
 
 const app = new Hono().basePath('/sw')
 app.get('/', (c) => c.text('Hello World'))
@@ -132,7 +132,7 @@ The `fire()` function automatically calls `addEventListener('fetch', handle(app)
 
 ```ts
 import { Hono } from 'hono'
-import { fire } from 'hono/service-worker'
+import { fire } from '@hono/service-worker'
 
 const app = new Hono().basePath('/sw')
 app.get('/', (c) => c.text('Hello World'))
diff --git a/docs/helpers/conninfo.md b/docs/helpers/conninfo.md
index d00486fe..93904e4d 100644
--- a/docs/helpers/conninfo.md
+++ b/docs/helpers/conninfo.md
@@ -4,41 +4,43 @@ The ConnInfo Helper helps you to get the connection information. For example, yo
 
 ## Import
 
+The adapter for each runtime is a separate package (`@hono/cloudflare-workers`, `@hono/deno`, `@hono/bun`, ...). Install the one for your runtime.
+
 ::: code-group
 
 ```ts [Cloudflare Workers]
 import { Hono } from 'hono'
-import { getConnInfo } from 'hono/cloudflare-workers'
+import { getConnInfo } from '@hono/cloudflare-workers'
 ```
 
 ```ts [Deno]
 import { Hono } from 'hono'
-import { getConnInfo } from 'hono/deno'
+import { getConnInfo } from '@hono/deno'
 ```
 
 ```ts [Bun]
 import { Hono } from 'hono'
-import { getConnInfo } from 'hono/bun'
+import { getConnInfo } from '@hono/bun'
 ```
 
 ```ts [Vercel]
 import { Hono } from 'hono'
-import { getConnInfo } from 'hono/vercel'
+import { getConnInfo } from '@hono/vercel'
 ```
 
 ```ts [AWS Lambda]
 import { Hono } from 'hono'
-import { getConnInfo } from 'hono/aws-lambda'
+import { getConnInfo } from '@hono/aws-lambda'
 ```
 
 ```ts [Netlify]
 import { Hono } from 'hono'
-import { getConnInfo } from 'hono/netlify'
+import { getConnInfo } from '@hono/netlify'
 ```
 
 ```ts [Lambda@Edge]
 import { Hono } from 'hono'
-import { getConnInfo } from 'hono/lambda-edge'
+import { getConnInfo } from '@hono/lambda-edge'
 ```
 
 ```ts [Node.js]
diff --git a/docs/helpers/ssg.md b/docs/helpers/ssg.md
index 6a3e90ae..4f7d1cc4 100644
--- a/docs/helpers/ssg.md
+++ b/docs/helpers/ssg.md
@@ -98,12 +98,12 @@ export interface FileSystemModule {
 
 ### Using adapters for Deno and Bun
 
-If you want to use SSG on Deno or Bun, a `toSSG` function is provided for each file system.
+If you want to use SSG on Deno or Bun, a `toSSG` function is provided by the `@hono/deno` and `@hono/bun` packages.
 
 For Deno:
 
 ```ts
-import { toSSG } from 'hono/deno'
+import { toSSG } from '@hono/deno'
 
 toSSG(app) // The second argument is an option typed `ToSSGOptions`.
 ```
@@ -111,7 +111,7 @@ toSSG(app) // The second argument is an option typed `ToSSGOptions`.
 For Bun:
 
 ```ts
-import { toSSG } from 'hono/bun'
+import { toSSG } from '@hono/bun'
 
 toSSG(app) // The second argument is an option typed `ToSSGOptions`.
 ```
diff --git a/docs/helpers/websocket.md b/docs/helpers/websocket.md
index 9bb5843f..f0a370e1 100644
--- a/docs/helpers/websocket.md
+++ b/docs/helpers/websocket.md
@@ -5,21 +5,23 @@ Currently Cloudflare Workers / Pages, Deno, Bun, and Node.js adapters are availa
 
 ## Import
 
+The adapter for each runtime is a separate package (`@hono/cloudflare-workers`, `@hono/deno`, `@hono/bun`, ...). Install the one for your runtime.
+
 ::: code-group
 
 ```ts [Cloudflare Workers]
 import { Hono } from 'hono'
-import { upgradeWebSocket } from 'hono/cloudflare-workers'
+import { upgradeWebSocket } from '@hono/cloudflare-workers'
 ```
 
 ```ts [Deno]
 import { Hono } from 'hono'
-import { upgradeWebSocket } from 'hono/deno'
+import { upgradeWebSocket } from '@hono/deno'
 ```
 
 ```ts [Bun]
 import { Hono } from 'hono'
-import { upgradeWebSocket, websocket } from 'hono/bun'
+import { upgradeWebSocket, websocket } from '@hono/bun'
 
 // ...
 
@@ -108,7 +110,7 @@ See the examples using WebSocket Helper.
 ```ts
 // server.ts
 import { Hono } from 'hono'
-import { upgradeWebSocket } from 'hono/cloudflare-workers'
+import { upgradeWebSocket } from '@hono/cloudflare-workers'
 
 const app = new Hono().get(
   '/ws',
@@ -143,7 +145,7 @@ ws.addEventListener('open', () => {
 
 ```tsx
 import { Hono } from 'hono'
-import { upgradeWebSocket, websocket } from 'hono/bun'
+import { upgradeWebSocket, websocket } from '@hono/bun'
 import { html } from 'hono/html'
 
 const app = new Hono()
diff --git a/docs/middleware/builtin/combine.md b/docs/middleware/builtin/combine.md
index 829bfad1..4a63f107 100644
--- a/docs/middleware/builtin/combine.md
+++ b/docs/middleware/builtin/combine.md
@@ -20,7 +20,7 @@ Here's an example of complex access control rules using Combine Middleware.
 ```ts
 import { Hono } from 'hono'
 import { bearerAuth } from 'hono/bearer-auth'
-import { getConnInfo } from 'hono/cloudflare-workers'
+import { getConnInfo } from '@hono/cloudflare-workers'
 import { every, some } from 'hono/combine'
 import { ipRestriction } from 'hono/ip-restriction'
 import { rateLimit } from '@/my-rate-limit'
diff --git a/docs/middleware/builtin/ip-restriction.md b/docs/middleware/builtin/ip-restriction.md
index f328a61d..72132685 100644
--- a/docs/middleware/builtin/ip-restriction.md
+++ b/docs/middleware/builtin/ip-restriction.md
@@ -15,7 +15,7 @@ For your application running on Bun, if you want to allow access only from local
 
 ```ts
 import { Hono } from 'hono'
-import { getConnInfo } from 'hono/bun'
+import { getConnInfo } from '@hono/bun'
 import { ipRestriction } from 'hono/ip-restriction'
 
 const app = new Hono()
@@ -34,7 +34,7 @@ app.get('/', (c) => c.text('Hello Hono!'))
 Pass the `getConninfo` from the [ConnInfo helper](/docs/helpers/conninfo) appropriate for your environment as the first argument of `ipRestriction`. For example, for Deno, it would look like this:
 
 ```ts
-import { getConnInfo } from 'hono/deno'
+import { getConnInfo } from '@hono/deno'
 import { ipRestriction } from 'hono/ip-restriction'
 
 //...