/Knowledge/sources/honojs__hono/llms-full/jsx-renderer-middleware-extending-contextrenderer--7760f9f62703.md
JSX Renderer Middleware: Extending ContextRenderer - hono-docs
JSX Renderer Middleware: Extending ContextRenderer Source evidence: /Sources/honojs hono/provenance.md Canonical citation: https://hono.dev/llms full.txt ext...
JSX Renderer Middleware: Extending ContextRenderer
Source evidence: /Sources/honojs__hono/provenance.md Canonical citation: https://hono.dev/llms-full.txt#extending-contextrenderer
Summary
By defining ContextRenderer as shown below, you can pass additional content to the renderer. This is handy, for instance, when you want to change the contents of the head tag depending on the page. ```tsx declare module 'hono' { interf...
Content
By defining ContextRenderer as shown below, you can pass additional content to the renderer. This is handy, for instance, when you want to change the contents of the head tag depending on the page.
declare module 'hono' {
interface ContextRenderer {
(
content: string | Promise<string>,
props: { title: string }
): Response
}
}
const app = new Hono()
app.get(
'/page/*',
jsxRenderer(({ children, title }) => {
return (
<html>
<head>
<title>{title}</title>
</head>
<body>
<header>Menu</header>
<div>{children}</div>
</body>
</html>
)
})
)
app.get('/page/favorites', (c) => {
return c.render(
<div>
<ul>
<li>Eating sushi</li>
<li>Watching baseball games</li>
</ul>
</div>,
{
title: 'My favorites',
}
)
})
Metadata
{
"chunk_index": 0,
"citation": "https://hono.dev/llms-full.txt#extending-contextrenderer",
"coverage_role": "overview",
"qualified_title": "Hono / llms-full / JSX Renderer Middleware > Extending `ContextRenderer`",
"retrieved_at": "2026-07-02T05:51:01Z",
"section_index": 243,
"source_id": "/honojs/hono",
"source_type": "llms_full",
"target_label": "llms-full",
"title": "JSX Renderer Middleware: Extending ContextRenderer",
"upstream_url": "https://hono.dev/llms-full.txt",
"version": "2026"
}
Kinic Wiki