Skip to Content
Html

Last Updated: 3/7/2026

html Helper

The html Helper lets you write HTML in JavaScript template literal with a tag named html. Using raw(), the content will be rendered as is. You have to escape these strings by yourself.

Import

import { Hono } from 'hono'
import { html, raw } from 'hono/html'

html

const app = new Hono()
 
app.get('/:username', (c) => {
  const { username } = c.req.param()
  return c.html(
    html`
      <h1>Hello! ${username}!</h1>
    `
  )
})

Insert snippets into JSX

Insert the inline script into JSX:

app.get('/', (c) => {
  return c.html(
    <html>
      <head>
        <title>Test Site</title>
        {html`
          <script>
            console.log("Hi")
          </script>
        `}
      </head>
      <body>Hello!</body>
    </html>
  )
})

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

const Footer = () => html`
  <footer>
    My Address...
  </footer>
`

Receives props and embeds values

interface SiteData {
  title: string
  description: string
  image: string
  children?: any
}
 
const Layout = (props: SiteData) => html`
  <!DOCTYPE html>
  <html>
    <head>
      <title>${props.title}</title>
      <meta name="description" content="${props.description}">
      <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} />)
})

raw()

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.

StreamingCookie