/Knowledge/sources/honojs__hono/llms-full/context-render-setrenderer--d8e19a4c42a4.md
Context: render() / setRenderer() - hono-docs
Context: render() / setRenderer() Source evidence: /Sources/honojs hono/provenance.md Canonical citation: https://hono.dev/llms full.txt render setrenderer S...
Context: render() / setRenderer()
Source evidence: /Sources/honojs__hono/provenance.md Canonical citation: https://hono.dev/llms-full.txt#render-setrenderer
Summary
You can set a layout using c.setRenderer() within a custom middleware. ```tsx twoslash /** @jsx jsx / /* @jsxImportSource hono/jsx */ import { Hono } from 'hono' const app = new Hono() // ---cut--- app.use(async (c, next) => { c.setR...
Content
You can set a layout using c.setRenderer() within a custom middleware.
/** @jsx jsx */
/** @jsxImportSource hono/jsx */
import { Hono } from 'hono'
const app = new Hono()
// ---cut---
app.use(async (c, next) => {
c.setRenderer((content) => {
return c.html(
<html>
<body>
<p>{content}</p>
</body>
</html>
)
})
await next()
})
Then, you can utilize c.render() to create responses within this layout.
import { Hono } from 'hono'
const app = new Hono()
// ---cut---
app.get('/', (c) => {
return c.render('Hello!')
})
The output of which will be:
<html>
<body>
<p>Hello!</p>
</body>
</html>
Additionally, this feature offers the flexibility to customize arguments. To ensure type safety, types can be defined as:
Metadata
{
"chunk_index": 0,
"citation": "https://hono.dev/llms-full.txt#render-setrenderer",
"coverage_role": "overview",
"qualified_title": "Hono / llms-full / Context > render() / setRenderer() (1)",
"retrieved_at": "2026-07-02T05:51:01Z",
"section_index": 563,
"source_id": "/honojs/hono",
"source_type": "llms_full",
"target_label": "llms-full",
"title": "Context: render() / setRenderer()",
"upstream_url": "https://hono.dev/llms-full.txt",
"version": "2026"
}
Kinic Wiki