# html Middleware
html Middleware provides `html` method for building HTML.
## Usage
index.ts:
```ts
import { Hono } from 'hono'
import { html } from 'hono/html'
const app = new Hono()
app.get('/:username', (c) => {
const { username } = c.req.param()
return c.html(
html`
Hello! ${username}!
`
)
})
app.fire()
```
### Insert snippet into JSX
```typescript
const snippet = html`
`
app.get('/', (c) => {
return c.render(
Test Site
{snippet}
Hello!
)
})
```
### Insert inline script into JSX
```typescript
app.get('/', (c) => {
return c.render(
Test Site
{html`
`}
Hello!
)
})
```
### Act as functional component
Since `html` returns an HtmlEscapedString, it can act as a fully functional component without using JSX.
#### Use `html` to speed up the process instead of `memo`
```typescript
const Footer = () => html`
`
```
### Receives props and embeds values
```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 }) => (
Hello {props.name}
)
app.get('/', (c) => {
const props = {
name: 'World',
siteData: {
title: 'Hello <> World',
description: 'This is a description',
image: 'https://example.com/image.png',
},
}
return c.render()
})
```
## raw
Using `raw`, the content will be rendered as is. You have to escape these strings by yourself.
```ts
import { html, raw } from 'hono/html'
app.get('/', (c) => {
const name = 'John "Johnny" Smith'
return c.html(html`I'm ${raw(name)}.
`)
})
```
## Tips
Thanks to these libraries, Visual Studio Code and vim also interprets template literals as HTML, allowing syntax highlighting and formatting to be applied.
-
-