/Knowledge/sources/honojs__hono/llms-full/html-helper-html-receives-props-and-embeds-values--9e45f9e76513.md
html Helper: html > Receives props and embeds values - hono-docs
html Helper: html Receives props and embeds values Source evidence: /Sources/honojs hono/provenance.md Canonical citation: https://hono.dev/llms full.txt rec...
html Helper: html > Receives props and embeds values
Source evidence: /Sources/honojs__hono/provenance.md Canonical citation: https://hono.dev/llms-full.txt#receives-props-and-embeds-values
Summary
```typescript interface SiteData { title: string description: string image: string children?: any } const Layout = (props: SiteData) => html${props.title} ${props.children} const Content = (props: { siteData: SiteData; name: string }...
Content
interface SiteData {
title: string
description: string
image: string
children?: any
}
const Layout = (props: SiteData) => html`
<html>
<head>
<meta charset="UTF-8">
<title>${props.title}</title>
<meta name="description" content="${props.description}">
<head prefix="og: http://ogp.me/ns#">
<meta property="og:type" content="article">
<!-- More elements slow down JSX, but not template literals. -->
<meta property="og:title" content="${props.title}">
<meta property="og:image" content="${props.image}">
</head>
<body>
${props.children}
</body>
</html>
`
const Content = (props: { siteData: SiteData; name: string }) => (
<Layout {...props.siteData}>
<h1>Hello {props.name}</h1>
</Layout>
)
app.get('/', (c) => {
const props = {
name: 'World',
siteData: {
title: 'Hello <> World',
description: 'This is a description',
image: 'https://example.com/image.png',
},
}
return c.html(<Content {...props} />)
})
Metadata
{
"chunk_index": 0,
"citation": "https://hono.dev/llms-full.txt#receives-props-and-embeds-values",
"coverage_role": "overview",
"qualified_title": "Hono / llms-full / html Helper > `html` > Receives props and embeds values",
"retrieved_at": "2026-07-02T05:51:01Z",
"section_index": 774,
"source_id": "/honojs/hono",
"source_type": "llms_full",
"target_label": "llms-full",
"title": "html Helper: html > Receives props and embeds values",
"upstream_url": "https://hono.dev/llms-full.txt",
"version": "2026"
}
Kinic Wiki