/Knowledge/sources/honojs__hono/llms-full/jsx-metadata-hoisting--b512cc5166db.md
JSX: Metadata hoisting - hono-docs
JSX: Metadata hoisting Source evidence: /Sources/honojs hono/provenance.md Canonical citation: https://hono.dev/llms full.txt metadata hoisting Summary You c...
JSX: Metadata hoisting
Source evidence: /Sources/honojs__hono/provenance.md Canonical citation: https://hono.dev/llms-full.txt#metadata-hoisting
Summary
You can write document metadata tags such as , , and directly inside your components. These tags will be automatically hoisted to the section of the document. This is especially useful when the element is rendered far f...
Content
You can write document metadata tags such as <title>, <link>, and <meta> directly inside your components. These tags will be automatically hoisted to the <head> section of the document. This is especially useful when the <head> element is rendered far from the component that determines the appropriate metadata.
import { Hono } from 'hono'
const app = new Hono()
app.use('*', async (c, next) => {
c.setRenderer((content) => {
return c.html(
<html>
<head></head>
<body>{content}</body>
</html>
)
})
await next()
})
app.get('/about', (c) => {
return c.render(
<>
<title>About Page</title>
<meta name='description' content='This is the about page.' />
about page content
</>
)
})
export default app
Metadata
{
"chunk_index": 0,
"citation": "https://hono.dev/llms-full.txt#metadata-hoisting",
"coverage_role": "overview",
"qualified_title": "Hono / llms-full / JSX > Metadata hoisting (1)",
"retrieved_at": "2026-07-02T05:51:01Z",
"section_index": 17,
"source_id": "/honojs/hono",
"source_type": "llms_full",
"target_label": "llms-full",
"title": "JSX: Metadata hoisting",
"upstream_url": "https://hono.dev/llms-full.txt",
"version": "2026"
}