# jsxRenderer **Kind:** Function **Source:** [`src/middleware/jsx-renderer/index.ts`](https://github.com/honojs/hono/blob/main/src/middleware/jsx-renderer/index.ts#L114) **Part of:** [Middleware](subsystem-src-middleware) 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) => RendererOptions)): MiddlewareHandler ``` ## Parameters | Name | Type | |---|---| | `component` | `ComponentWithChildren` | | `options` | `RendererOptions | ((c: Context) => 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 }) => ( My Hono App

Site Header

{children} )) ) app.get('/', (c) => { return c.render(

Hello from Hono

) }) 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 ``, ``, and navigation, in the renderer component rather than duplicating it in route handlers.