> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/honojs/hono/llms.txt
> Use this file to discover all available pages before exploring further.
# HTML & CSS
> Template literals for HTML and CSS-in-JS styling
Hono provides helpers for writing HTML with tagged template literals and experimental CSS-in-JS functionality with scoped styles and SSR support.
## HTML Helper
The `html` helper allows you to write HTML using tagged template literals with automatic escaping.
### Import
```typescript theme={null}
import { html, raw } from 'hono/html'
```
### Basic Usage
```typescript theme={null}
import { html } from 'hono/html'
app.get('/', (c) => {
const name = 'World'
return c.html(
html`
Hello
Hello ${name}!
`
)
})
```
### Automatic Escaping
String values are automatically escaped for security:
```typescript theme={null}
import { html } from 'hono/html'
app.get('/user', (c) => {
const userInput = ''
return c.html(
html`
User input: ${userInput}
`
)
})
// Output: User input: <script>alert("XSS")</script>
```
Values are escaped by default to prevent XSS attacks. Use the `raw` helper only when you trust the content.
### Raw HTML
When you need to insert unescaped HTML:
```typescript theme={null}
import { html, raw } from 'hono/html'
app.get('/article', (c) => {
const trustedHtml = '
This is safe HTML
'
return c.html(
html`
${raw(trustedHtml)}
`
)
})
```
Only use `raw()` with trusted content. Never use it with user-generated content as it bypasses XSS protection.
### Value Types
The `html` helper handles various types:
```typescript theme={null}
import { html } from 'hono/html'
app.get('/types', (c) => {
return c.html(
html`
String: ${'text'}
Number: ${42}
Boolean: ${true}
Null: ${null}
Undefined: ${undefined}
`
)
})
// Boolean, null, and undefined are not rendered
```
### Arrays
Arrays are automatically flattened:
```typescript theme={null}
import { html } from 'hono/html'
app.get('/list', (c) => {
const items = ['Apple', 'Banana', 'Cherry']
return c.html(
html`
${items.map(item => html`
${item}
`)}
`
)
})
```
### Async Content
Supports Promise values for async rendering:
```typescript theme={null}
import { html } from 'hono/html'
app.get('/async', async (c) => {
const fetchData = async () => {
// Fetch data from API
return 'Fetched content'
}
return c.html(
html`
${fetchData()}
`
)
})
```
## CSS Helper
The CSS helper is **experimental**. The API may change in future versions.
The CSS helper provides CSS-in-JS functionality with automatic class name generation and scoped styles.
### Import
```typescript theme={null}
import { css, cx, keyframes, Style } from 'hono/css'
```
### Basic Styling
```typescript theme={null}
import { css, Style } from 'hono/css'
import { html } from 'hono/html'
app.get('/', (c) => {
const className = css`
color: blue;
font-size: 16px;
&:hover {
color: red;
}
`
return c.html(
html`
<${Style} />
Styled text
`
)
})
```
The `` component must be included in the document head to inject generated styles.
### CSS Variables
Use JavaScript variables in your styles:
```typescript theme={null}
import { css } from 'hono/css'
app.get('/dynamic', (c) => {
const color = 'blue'
const size = 20
const className = css`
color: ${color};
font-size: ${size}px;
`
return c.html(html`
`
)
})
```
### CSP Nonce Support
Add nonce for Content Security Policy:
```typescript theme={null}
import { Style } from 'hono/css'
import { html } from 'hono/html'
app.get('/secure', (c) => {
const nonce = 'random-nonce-value'
return c.html(
html`
<${Style} nonce="${nonce}" />
Secure content
`
)
})
```
## Raw CSS Strings
For advanced use cases, work with raw CSS strings:
```typescript theme={null}
import { rawCssString } from 'hono/css'
const cssString = rawCssString`
.custom {
color: blue;
}
`
```
## Best Practices
Use the default escaping behavior for all user-generated content
Remember to add `` in the document head when using CSS helper
Define common styles once and reuse them with `cx()`
CSS helper is experimental - test thoroughly in your target browsers
## Performance
The CSS helper automatically deduplicates styles and only injects each class once, even if used multiple times.
## SSR Support
Both helpers work seamlessly with server-side rendering, with styles injected inline for immediate availability.