---
title: "JSX and Rendering"
description: "Hono provides a lightweight, high-performance JSX engine designed to work seamlessly with web standards. It allows you to build HTML components using JSX syntax and render them directly within your..."
last_updated: "2026-07-02T09:15:05.239688+00:00"
canonical_url: "https://www.doc0.app/docs/552ca36e-f67e-41c3-a07a-def9bd9551b0/guide/advanced-features/jsx-and-rendering"
---
Hono provides a lightweight, high-performance JSX engine designed to work seamlessly with web standards. It allows you to build HTML components using JSX syntax and render them directly within your Hono application, supporting both standard string-based responses and efficient streaming.
## Getting Started with JSX Rendering
The `jsxRenderer` middleware is the primary way to define a global layout for your pages. Once configured, it attaches a `.render()` method to your response context (`c`), allowing you to inject content into your layouts easily.
1. **Define your layout:** Use the `jsxRenderer` middleware to wrap your content in a consistent HTML structure.
2. **Use the renderer:** Call `c.render()` within your route handlers to pass content into the layout.
```typescript
import { Hono } from 'hono'
import { jsxRenderer } from 'hono/jsx-renderer'
const app = new Hono()
app.get(
'/page/*',
jsxRenderer(({ children }) => {
return (
{children}
)
})
)
app.get('/page/about', (c) => {
return c.render(About Me
)
})
```
> [!TIP]
> Use the `jsxRenderer` at the top level or group it via route paths (like `/page/*` above) to apply common styles, headers, and footer layouts to multiple routes simultaneously.
## Accessing the Request Context
Sometimes your components need data from the current request (like parameters, headers, or URL information). Hono provides a `useRequestContext` hook for this purpose.
```typescript
import { useRequestContext } from 'hono/jsx-renderer'
const PageInfo = () => {
const c = useRequestContext()
return Requested URL: {c.req.url}
}
```
> [!WARNING]
> The `useRequestContext` hook will throw an error if called outside of a request scope, such as during server startup or in components not rendered via the `jsxRenderer`.
## Streaming Responses
For large pages or heavy content, you can enable streaming to send HTML to the client in chunks. This improves the "Time to First Byte" (TTFB) significantly.
You can configure streaming via the `jsxRenderer` options:
| Option | Type | Description |
| :--- | :--- | :--- |
| `docType` | `boolean \| string` | Defines the DOCTYPE; defaults to ``. |
| `stream` | `boolean` | If true, enables streaming for the response. |
```typescript
app.get(
'/stream',
jsxRenderer(
({ children }) => {children},
{ stream: true }
),
(c) => c.render(This is streamed!
)
)
```
> [!NOTE]
> When `stream` is enabled, Hono automatically sets appropriate HTTP headers like `Transfer-Encoding: chunked`.
## Key Concepts
* **JSX:** A syntax extension that looks like HTML, used to define the structure of your UI components.
* **Renderer Middleware:** A specific type of middleware in Hono that intercepts your response and applies an HTML template.
* **Layout:** A component that defines the "shell" of your page (e.g., ``, ``, ``), which accepts `children` as a property to inject dynamic content.
* **Context:** A mechanism to pass data through the component tree without having to pass props down manually at every level.
## Related
- [Response Handling](https://www.doc0.app/docs/552ca36e-f67e-41c3-a07a-def9bd9551b0/guide/core-concepts/response-handling)
## Sitemap
See the full [sitemap](https://www.doc0.app/docs/552ca36e-f67e-41c3-a07a-def9bd9551b0/llms.txt) for all pages in this wiki.