html helper import
Import the html helper and raw function from 'hono/html': import { html, raw } from 'hono/html'
helpers/html
8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
html helper basic usage
The html helper lets you write HTML in JavaScript template literals using a tag named html. Use c.html() to return HTML from a route handler. Template literals with html are auto-escaped by default unless wrapped with raw().
html helper with route parameters example
Example: app.get('/:username', (c) => { const { username } = c.req.param(); return c.html(html`<!doctype html><h1>Hello! ${username}!</h1>`); }). This demonstrates interpolating route parameters into HTML with automatic escaping.
raw() function for unescaped content
Use raw() to render content without escaping. Example: html`<p>I'm ${raw(name)}.</p>` will render the name variable as-is without HTML entity encoding. You must escape these strings yourself.
html helper as functional component
The html helper returns an HtmlEscapedString and can act as a fully functional component without using JSX. You can define components by returning html`` template literals directly, receiving props as function parameters.
html helper component with props example
Example component that receives props and embeds values: const Layout = (props: SiteData) => html`<html><head><title>${props.title}</title><meta name="description" content="${props.description}"><meta property="og:image" content="${props.image}"></head><body>${props.children}</body></html>`. This shows how html template literals can accept object props with TypeScript interfaces and interpolate them throughout the template.
html helper performance advantage over JSX
HTML template literals with html are faster than JSX for rendering multiple elements. Complex HTML with many elements slows down JSX compilation but not template literals, making html useful for large content blocks.
html helper IDE support
Visual Studio Code and vim support syntax highlighting and formatting for html template literals through extensions: lit-html extension for VS Code (https://marketplace.visualstudio.com/items?itemName=bierner.lit-html) and vim-jsx-pretty (https://github.com/MaxMEllon/vim-jsx-pretty).