Skip to content
hono-email

Email, built the
hono/jsx way.

Render, validate, and send HTML email — with plain‑text generated automatically — from a single hono/jsx component.

Get startedGitHub
npm i hono-email
welcome.email.tsx
import { render, Html, Heading, Text, Button } from 'hono-email'


function Welcome({ name }: { name: string }) {
  return (
    <Html lang="en">
      <Heading as="h1">Welcome, {name}</Heading>
      <Text>Thanks for signing up.</Text>
      <Button href="https://acme.dev/start">Get started</Button>
    </Html>
  )
}


const { html, text } = await render(<Welcome name="Ada" />)

Runtime agnostic

Runs everywhere.

Just like Hono, the renderer is built with pure TypeScript and runs on any JavaScript runtime. With no heavy dependencies, you can deploy it seamlessly across Node.js, Deno, Bun, and Cloudflare Workers.

Node.js
Deno
Bun
Cloudflare Workers

Live preview

Edit props, see it instantly.

Run the preview server to browse every template, edit props in a live form, switch between the HTML and plain-text output, check desktop and mobile, and catch email-client warnings before you send.

The hono-email preview app showing an order-confirmation template with a live props form, HTML and plain-text tabs, and email-client warnings

Styling

Your emails, your style.

Inline styles, hono/css, or Tailwind utilities — every approach is compiled and inlined at build time so emails render perfectly in every client.

Inline Styles

The standard approach. Set styles directly on elements — what you write is what gets delivered.

welcome.email.tsx
<Button
  style={{
    backgroundColor: '#f97316',
    color: '#fff',
    padding: '12px 24px',
  }}
>
  Click me
</Button>

hono/css

Write scoped CSS with the css helper. Styles are extracted and inlined at render time — zero runtime cost.

styled.email.tsx
import { css } from 'hono/css'


const heading = css`
  font-size: 24px;
  color: #1a1a2e;
`


<h1 class={heading}>Hello</h1>

Tailwind CSS

Use utility classes you already know. The bundler plugin compiles them to inline styles at build time.

tailwind.email.tsx
<Tailwind>
  <Button
    className="bg-orange-500
      text-white px-6 py-3
      rounded-lg"
  >
    Click me
  </Button>
</Tailwind>

Transports

Send through the provider you already use.

  • SMTP
  • Resend
  • SendGrid
  • Postmark
  • Mailgun
  • Cloudflare Email

Why hono-email

Everything an email needs, nothing it doesn't.

  • Rendered from JSX

    Compose emails as hono/jsx components and render to a normalized, email-safe HTML string.

  • HTML and plain text

    Every render() returns a plain-text version derived from the same tree — no second template.

  • Safe by default

    Strict validation flags risky tags and CSS declarations before they reach an inbox.

  • Styling, your way

    Inline styles, hono/css, or Tailwind utilities — compiled and inlined at build time.

  • Six transports

    Send through SMTP, Resend, SendGrid, Postmark, Mailgun, or Cloudflare Email.

  • Live preview

    Browse templates and edit props in real time with @hono-email/preview.

Send your first email in minutes.

Get started
npm i hono-email