/Knowledge/sources/honojs__hono/llms-full/jsx-integration-with-html-middleware--cd1c8ae82900.md
JSX: Integration with html Middleware - hono-docs
JSX: Integration with html Middleware Source evidence: /Sources/honojs hono/provenance.md Canonical citation: https://hono.dev/llms full.txt integration with...
JSX: Integration with html Middleware
Source evidence: /Sources/honojs__hono/provenance.md Canonical citation: https://hono.dev/llms-full.txt#integration-with-html-middleware
Summary
Combine the JSX and HTML middlewares for powerful templating. For in-depth details, consult the HTML middleware documentation. ```tsx import { Hono } from 'hono' import { html } from 'hono/html' const app = new Hono...
Content
Combine the JSX and HTML middlewares for powerful templating. For in-depth details, consult the HTML middleware documentation.
import { Hono } from 'hono'
import { html } from 'hono/html'
const app = new Hono()
interface SiteData {
title: string
children?: any
}
const Layout = (props: SiteData) =>
html`<!doctype html>
<html>
<head>
<title>${props.title}</title>
</head>
<body>
${props.children}
</body>
</html>`
const Content = (props: { siteData: SiteData; name: string }) => (
<Layout {...props.siteData}>
<h1>Hello {props.name}</h1>
</Layout>
)
app.get('/:name', (c) => {
const { name } = c.req.param()
const props = {
name: name,
siteData: {
title: 'JSX with html sample',
},
}
return c.html(<Content {...props} />)
})
export default app
Metadata
{
"chunk_index": 0,
"citation": "https://hono.dev/llms-full.txt#integration-with-html-middleware",
"coverage_role": "overview",
"qualified_title": "Hono / llms-full / JSX > Integration with html Middleware",
"retrieved_at": "2026-07-02T05:51:01Z",
"section_index": 27,
"source_id": "/honojs/hono",
"source_type": "llms_full",
"target_label": "llms-full",
"title": "JSX: Integration with html Middleware",
"upstream_url": "https://hono.dev/llms-full.txt",
"version": "2026"
}
Kinic Wiki