/Knowledge/sources/honojs__hono/llms-full/jsx-usage--part-02--583724341b7b.md
JSX: Usage (part 02) - hono-docs
JSX: Usage (part 02) Source evidence: /Sources/honojs hono/provenance.md Canonical citation: https://hono.dev/llms full.txt usage Summary tsx import { Hono }...
JSX: Usage (part 02)
Source evidence: /Sources/honojs__hono/provenance.md Canonical citation: https://hono.dev/llms-full.txt#usage
Summary
## Content
```tsx
import { Hono } from 'hono'
import type { FC } from 'hono/jsx'
const app = new Hono()
const Layout: FC = (props) => {
return (
<html>
<body>{props.children}</body>
</html>
)
}
const Top: FC<{ messages: string[] }> = (props: {
messages: string[]
}) => {
return (
<Layout>
<h1>Hello Hono!</h1>
<ul>
{props.messages.map((message) => {
return <li>{message}!!</li>
})}
</ul>
</Layout>
)
}
app.get('/', (c) => {
const messages = ['Good Morning', 'Good Evening', 'Good Night']
return c.html(<Top messages={messages} />)
})
export default app
Metadata
{
"chunk_index": 1,
"citation": "https://hono.dev/llms-full.txt#usage",
"coverage_role": "overview",
"qualified_title": "Hono / llms-full / JSX > Usage (2)",
"retrieved_at": "2026-07-02T05:51:01Z",
"section_index": 16,
"source_id": "/honojs/hono",
"source_type": "llms_full",
"target_label": "llms-full",
"title": "JSX: Usage (part 02)",
"upstream_url": "https://hono.dev/llms-full.txt",
"version": "2026"
}
Kinic Wiki