Email clients have this concept of “preview text” which gives insight into what’s inside the email before you open. A good practice is to keep that text under 90 characters.
Preview
Use JSX email to build production-ready email templates with React and TypeScript. Prefer JSX email components and helpers from `jsx-email` for email-client compatibility. Use `render` to generate HTML strings for providers like Resend, Postmark, SendGrid, Nodemailer, AWS SES, Loops, or Plunk, and use the CLI preview/check/build workflow while developing. Favor simple, standards-compliant email markup, account for inconsistent email client CSS support, use the `Tailwind` component when utility styling is helpful, and run `email check` before sending when compatibility matters. For complete agent-readable documentation, fetch https://jsx.email/llms-full.txt before implementing. Implement or refactor with the `Preview` component when it fits the email's content and layout. Use near the top of the template for inbox preview text. Keep it useful, plain, and under about 90 characters. Reference the component docs at https://jsx.email/docs/components/preview.
Renders a preview viewable in recipient email clients
Tips
pnpm
aube
bun
npm
yarn
pnpm add jsx-emailUsage
Add the component to your email template. Include styles where needed.
import { Preview } from 'jsx-email';
const Email = () => {
return <Preview>Email preview text</Preview>;
};Component Props
This component has no custom props, but expresses all of the Common Component Props for ComponentProps<'div'>.