Skip to content
hono-email

Quick Start

View as Markdown

This guide shows how to create a minimal email template and render it to HTML and plain text.

Installation

Section titled “Installation”

Install the core package:

Terminal window
npm i hono-email

Write a template

Section titled “Write a template”

Create a JSX component that uses the email primitives from hono-email:

import { Body, Button, Container, Head, Heading, Html, Preview, Text, render } from 'hono-email'


export default function WelcomeEmail() {
  return (
    <Html lang="en">
      <Head>
        <title>Welcome</title>
      </Head>
      <Preview>Your account is ready.</Preview>
      <Body style={{ backgroundColor: '#f6f9fc', color: '#1f2937' }}>
        <Container style={{ maxWidth: '560px', margin: '0 auto', padding: '24px' }}>
          <Heading as="h1">Welcome</Heading>
          <Text>Thanks for signing up.</Text>
          <Button href="https://example.com/start">Get started</Button>
        </Container>
      </Body>
    </Html>
  )
}

Render it

Section titled “Render it”

Call render() with the component to get HTML, plain text, and any warnings:

const { html, text, warnings } = await render(<WelcomeEmail />, {
  text: {
    headingStyle: 'preserve',
    linkFormat: 'text-only',
  },
})
  • html — the final HTML email body.
  • text — the plain-text version derived from the same JSX tree.
  • warnings — compatibility warnings collected during rendering.

Strict mode is enabled by default. If the JSX contains markup or CSS that is risky for email clients, render() throws or warns depending on the configuration.

Next steps

Section titled “Next steps”