jsxRenderer

Kind: Function

Source: src/middleware/jsx-renderer/index.ts

JSX Renderer Middleware for hono.

jsxRenderer creates Hono middleware that registers a JSX renderer for the current request. Routes can call c.render() with page content, and the renderer wraps that content in the supplied JSX component before returning an HTML response.

Signature

ts
function jsxRenderer(component: ComponentWithChildren, options: RendererOptions | ((c: Context<E>) => RendererOptions)): MiddlewareHandler

Parameters

Name	Type
`component`	`ComponentWithChildren`
`options`	`RendererOptions

Returns: MiddlewareHandler

Diagram

mermaid
graph LR
  A[Request] --> B[jsxRenderer middleware]
  B --> C[Register renderer on context]
  C --> D[Route handler]
  D --> E[c.render JSX content]
  E --> F[Renderer component]
  F --> G[HTML response]

Usage

tsx
import { Hono } from 'hono'
import { jsxRenderer } from 'hono/jsx-renderer'

const app = new Hono()

app.use(
  '*',
  jsxRenderer(({ children }) => (
    <html>
      <head>
        <title>My Hono App</title>
      </head>
      <body>
        <header>Site Header</header>
        {children}
      </body>
    </html>
  ))
)

app.get('/', (c) => {
  return c.render(
    <main>
      <h1>Hello from Hono</h1>
    </main>
  )
})

export default app

AI Coding Instructions

Register jsxRenderer before routes that call c.render().
Keep {children} in the renderer component so route content is included in the response.
Use c.render() for pages that should pass through the JSX renderer; use other response methods only when bypassing the page wrapper is intended.
Keep shared document structure, such as <html>, <head>, and navigation, in the renderer component rather than duplicating it in route handlers.

Signature

Parameters

Diagram

Usage

AI Coding Instructions

Was this page helpful?