It’s important to understand that the values set as content will be placed into the rendered
template unescaped. jsx-email goes to great lengths to validate and correct mistakes in HTML
which may cause issues in email clients. Please use this component cautiously and thoughtfully.
Raw
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 `Raw` component when it fits the email's content and layout. Use only for trusted provider templating or raw HTML fragments. Content is unescaped, so never pass user input and keep opening/closing fragments balanced. Reference the component docs at https://jsx.email/docs/components/raw.
Use raw HTML and unescaped text effortlessly
pnpm
aube
bun
npm
yarn
pnpm add jsx-emailUsage
This component is especially useful for placing additional templating languages in your rendered email templates, for use in email providers which have their own value injection, or for further processing later in a separate system.
IMPORTANT
Add the component to your email template. Include styles where needed.
import { Raw } from 'jsx-email';
const hero = true;
const HeroOrVillain = () => {
return (
<>
<Raw content={`<#if ${hero}>`} />
<b>Batman's a hero</b>
<Raw content={`</#if>`} />
</>
);
};Which if used in a template, would yield the following when rendered:
<#if true>
<b>Batman's a hero</b>
</#if>Component Props
content?: string;The raw text content to render into a template
disablePlainTextOutput?: boolean;If true, the content of the Raw component will not be rendered during plain text rendering