> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/honojs/hono/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

> Add Hono to your existing project

Install Hono in an existing project to start building web applications with this ultrafast framework.

## Install Hono

Add Hono to your project using your preferred package manager:

<CodeGroup>
  ```bash npm theme={null}
  npm install hono
  ```

  ```bash yarn theme={null}
  yarn add hono
  ```

  ```bash pnpm theme={null}
  pnpm add hono
  ```

  ```bash bun theme={null}
  bun add hono
  ```
</CodeGroup>

## Basic Setup

Once installed, create your first Hono application:

```typescript index.ts theme={null}
import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => c.text('Hono!'))

export default app
```

## Package Exports

Hono provides multiple entry points for different use cases. Here are the most common imports:

### Core Framework

```typescript theme={null}
import { Hono } from 'hono'
import type { Context, Handler, MiddlewareHandler } from 'hono'
import { HTTPException } from 'hono/http-exception'
```

### Middleware

```typescript theme={null}
import { cors } from 'hono/cors'
import { logger } from 'hono/logger'
import { basicAuth } from 'hono/basic-auth'
import { jwt } from 'hono/jwt'
import { compress } from 'hono/compress'
import { csrf } from 'hono/csrf'
import { etag } from 'hono/etag'
import { secureHeaders } from 'hono/secure-headers'
```

### Helpers

```typescript theme={null}
import { setCookie, getCookie } from 'hono/cookie'
import { stream, streamSSE } from 'hono/streaming'
import { html } from 'hono/html'
import { validator } from 'hono/validator'
```

### Runtime Adapters

```typescript theme={null}
import { serveStatic } from 'hono/cloudflare-workers'
import { serveStatic } from 'hono/bun'
import { serveStatic } from 'hono/deno'
```

## Presets

Hono offers optimized presets for different use cases. These presets use different routers under the hood for specific performance characteristics.

### Standard (Default)

The default import uses `SmartRouter` which combines `RegExpRouter` and `TrieRouter` for optimal performance:

```typescript theme={null}
import { Hono } from 'hono'

const app = new Hono()
```

This is the recommended preset for most applications. It provides:

* Excellent routing performance
* Support for all routing patterns
* Automatic router selection based on route complexity

### Tiny Preset

For applications where bundle size is critical (under 12kB), use the `tiny` preset with `PatternRouter`:

```typescript theme={null}
import { Hono } from 'hono/tiny'

const app = new Hono()
```

**Characteristics:**

* Smallest bundle size (under 12kB)
* Zero dependencies
* Uses only Web Standard APIs
* Ideal for Cloudflare Workers and edge environments

### Quick Preset

For simpler applications with linear routing needs, use the `quick` preset with `LinearRouter`:

```typescript theme={null}
import { Hono } from 'hono/quick'

const app = new Hono()
```

**Characteristics:**

* Uses `LinearRouter` combined with `TrieRouter`
* Optimized for applications with fewer routes
* Good balance between size and performance

<Note>
  The choice of preset mainly affects routing performance and bundle size. The API remains the same across all presets.
</Note>

## Runtime-Specific Setup

Depending on your deployment target, you may need additional setup:

<Tabs>
  <Tab title="Cloudflare Workers">
    No additional setup required. Just export your app:

    ```typescript theme={null}
    import { Hono } from 'hono'

    const app = new Hono()
    app.get('/', (c) => c.text('Hello Cloudflare!'))

    export default app
    ```

    Add to your `wrangler.toml`:

    ```toml theme={null}
    name = "my-hono-app"
    main = "src/index.ts"
    compatibility_date = "2024-01-01"
    ```
  </Tab>

  <Tab title="Node.js">
    Install the Node.js adapter:

    ```bash theme={null}
    npm install @hono/node-server
    ```

    Then set up your server:

    ```typescript theme={null}
    import { Hono } from 'hono'
    import { serve } from '@hono/node-server'

    const app = new Hono()
    app.get('/', (c) => c.text('Hello Node!'))

    serve(app)
    ```

    Or specify a port:

    ```typescript theme={null}
    serve({
      fetch: app.fetch,
      port: 3000,
    })
    ```
  </Tab>

  <Tab title="Bun">
    Bun has built-in support for Hono. Just export your app:

    ```typescript theme={null}
    import { Hono } from 'hono'

    const app = new Hono()
    app.get('/', (c) => c.text('Hello Bun!'))

    export default app
    ```

    Run with:

    ```bash theme={null}
    bun run index.ts
    ```

    Or use the Bun-specific features:

    ```typescript theme={null}
    import { Hono } from 'hono'
    import { serveStatic } from 'hono/bun'

    const app = new Hono()
    app.use('/static/*', serveStatic({ root: './' }))
    ```
  </Tab>

  <Tab title="Deno">
    Import from npm using Deno's npm specifiers:

    ```typescript theme={null}
    import { Hono } from 'npm:hono@latest'

    const app = new Hono()
    app.get('/', (c) => c.text('Hello Deno!'))

    Deno.serve(app.fetch)
    ```

    Or use Deno-specific features:

    ```typescript theme={null}
    import { Hono } from 'npm:hono@latest'
    import { serveStatic } from 'npm:hono@latest/deno'

    const app = new Hono()
    app.use('/static/*', serveStatic({ root: './' }))
    ```
  </Tab>

  <Tab title="AWS Lambda">
    Use the Lambda adapter:

    ```typescript theme={null}
    import { Hono } from 'hono'
    import { handle } from 'hono/aws-lambda'

    const app = new Hono()
    app.get('/', (c) => c.text('Hello Lambda!'))

    export const handler = handle(app)
    ```
  </Tab>

  <Tab title="Vercel">
    Use the Vercel adapter:

    ```typescript theme={null}
    import { Hono } from 'hono'
    import { handle } from 'hono/vercel'

    const app = new Hono()
    app.get('/', (c) => c.text('Hello Vercel!'))

    export default handle(app)
    ```
  </Tab>
</Tabs>

## TypeScript Configuration

For the best development experience with TypeScript, ensure your `tsconfig.json` includes:

```json tsconfig.json theme={null}
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ES2022",
    "moduleResolution": "bundler",
    "lib": ["ES2022"],
    "types": ["@cloudflare/workers-types"],
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx",
    "strict": true,
    "skipLibCheck": true
  }
}
```

<Note>
  Adjust the `types` field based on your runtime. For Node.js, use `["node"]`. For Deno, this field is not needed.
</Note>

## Package.json Setup

Here's a minimal `package.json` for a Hono project:

```json package.json theme={null}
{
  "name": "my-hono-app",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "wrangler dev src/index.ts",
    "deploy": "wrangler deploy --minify src/index.ts"
  },
  "dependencies": {
    "hono": "^4.12.0"
  },
  "devDependencies": {
    "wrangler": "^3.0.0"
  }
}
```

<Warning>
  Make sure to set `"type": "module"` in your `package.json` to enable ES modules support.
</Warning>

## Verifying Installation

Test that Hono is correctly installed by running a simple script:

```typescript test.ts theme={null}
import { Hono } from 'hono'

const app = new Hono()
app.get('/', (c) => c.text('Installation successful!'))

// Test the app
const res = await app.request('http://localhost/')
console.log(await res.text()) // Should output: Installation successful!
```

Run it:

```bash theme={null}
node test.ts
# or
bun test.ts
# or
deno run test.ts
```

## Next Steps

Now that Hono is installed, you're ready to build:

<CardGroup cols={2}>
  <Card title="Quickstart Guide" icon="rocket" href="/quickstart">
    Build your first Hono application
  </Card>

  <Card title="Routing" icon="route" href="/routing">
    Learn about routes and path patterns
  </Card>

  <Card title="Middleware" icon="shield" href="/middleware">
    Explore built-in and custom middleware
  </Card>

  <Card title="API Reference" icon="book" href="/api">
    Dive into the complete API documentation
  </Card>
</CardGroup>