Skip to content
hono-email

Document Structure

View as Markdown

These components establish the core structure of an HTML email. They are imported from hono-email:

import { Html, Head, Body, Preview } from 'hono-email'

<Html>

Section titled “<Html>”

Root email document wrapper. Accepts all standard <html> attributes.

<Html lang="en">
  <Head />
  <Body>Hello</Body>
</Html>
Section titled “<Head>”

Container for <title>, <style>, <Font>, and other head elements. Styles generated by hono/css and <Tailwind> are normalized into this element automatically.

<Body>

Section titled “<Body>”

Outer body wrapper. Accepts all standard <body> attributes.

<Body style={{ backgroundColor: '#f6f9fc' }}>
  <Text>Hello</Text>
</Body>

<Preview>

Section titled “<Preview>”

Renders hidden preview text that appears in email client inbox previews. Keep it under 200 characters and place it immediately inside <Body>.

<Html>
  <Body>
    <Preview>Your receipt is ready.</Preview>
    ...
  </Body>
</Html>