> ## 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 Helper > Helper functions for creating HTML content with automatic escaping The HTML Helper provides a tagged template literal for creating HTML strings with automatic XSS protection through HTML escaping. ## Import ```typescript theme={null} import { html, raw } from 'hono/html' ``` ## Functions ### html() Creates an HTML string with automatic escaping of interpolated values. ```typescript theme={null} function html( strings: TemplateStringsArray, ...values: unknown[] ): HtmlEscapedString | Promise ``` The template string array Values to interpolate into the template. All values are automatically HTML-escaped except those wrapped with `raw()`. An HTML-escaped string. Returns a Promise if any interpolated value is a Promise. **Example** ```typescript theme={null} import { html } from 'hono/html' app.get('/', (c) => { const name = 'John ' // Values are automatically escaped const content = html`

Hello ${name}!

` // Output:

Hello John <script>alert("xss")</script>!

return c.html(content) }) ``` ### Escaping Behavior The `html` helper automatically escapes the following: * **Strings**: HTML special characters are escaped (`<`, `>`, `&`, `"`, `'`) * **Numbers**: Rendered as-is * **Booleans, null, undefined**: Ignored (rendered as empty string) * **Arrays**: Flattened with `Array.flat(Infinity)` and each element is processed * **Promises**: Awaited and then processed * **Objects**: Converted to string via `.toString()` and escaped ```typescript theme={null} app.get('/demo', (c) => { const values = [ 'Name: John', ['Bold', undefined, null], ' Contact:', [html`Link`] ] return c.html(html`
${values}
`) // Output:
Name: John<b>Bold</b> Contact:Link
}) ``` ### Async Support When interpolating Promises, the `html` function returns a Promise: ```typescript theme={null} app.get('/async', async (c) => { const fetchUserName = async () => { // Fetch from database return 'John Doe' } const content = html`

User: ${fetchUserName()}

` // content is a Promise, so await it return c.html(await content) }) ``` ### raw() Marks a string as safe HTML that should not be escaped. ```typescript theme={null} function raw(value: string): HtmlEscapedString ``` The HTML string that should not be escaped An HTML string marked as safe (not escaped) **Example** ```typescript theme={null} import { html, raw } from 'hono/html' app.get('/with-raw', (c) => { const userInput = '' const safeHTML = 'Important' return c.html(html`

${userInput}

${raw(safeHTML)}

`) }) ``` **Output:** ```html theme={null}

<script>alert("xss")</script>

Important

``` ## Use Cases ### Building Components ```typescript theme={null} const Layout = (props: { title: string; children: any }) => html` ${props.title} ${props.children} ` const Content = () => html`

Welcome

This is content

` app.get('/', (c) => { return c.html( Layout({ title: 'My Site', children: Content() }) ) }) ``` ### Conditional Rendering ```typescript theme={null} app.get('/user/:id', (c) => { const user = getUser(c.req.param('id')) return c.html(html`
${user ? html`

Hello ${user.name}

` : html`

User not found

` }
`) }) ``` ### Lists ```typescript theme={null} app.get('/items', (c) => { const items = ['Apple', 'Banana', 'Cherry'] return c.html(html` `) }) ``` ## Security The `html` helper provides automatic XSS protection by escaping all interpolated values by default. Only use `raw()` when you are certain the content is safe. ```typescript theme={null} // ✅ SAFE: User input is escaped html`
${userInput}
` // ⚠️ DANGEROUS: User input is not escaped html`
${raw(userInput)}
` // ✅ SAFE: Sanitized content html`
${raw(sanitizeHTML(userInput))}
` ``` ## Types ```typescript theme={null} interface HtmlEscapedString { isEscaped: true callbacks?: HtmlEscapedCallback[] } interface HtmlEscaped { isEscaped: true } ```