Appearance

Preview ​

Renders a preview viewable in recipient email clients

TIP

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.

Install ​

Install the component from your command line

console
pnpm add jsx-email
pnpm add jsx-email
console
bun add jsx-email
bun add jsx-email
console
npm add jsx-email
npm add jsx-email
console
yarn add jsx-email
yarn add jsx-email

Usage ​

Add the component to your email template. Include styles where needed.

jsx
import { Preview } from 'jsx-email';

const Email = () => {
  return <Preview>Email preview text</Preview>;
};
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'>.