This component is required VML in outlook compatibility for adding elements such as <style> and meta directly to the document
Head
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 `Head` component when it fits the email's content and layout. Use inside `Html` for metadata, title, format detection, `Font`, `ColorScheme`, and `Conditional` Outlook/MSO head content. Reference the component docs at https://jsx.email/docs/components/head.
|
Tips
pnpm
aube
bun
npm
yarn
pnpm add jsx-emailUsage
Add the component to your email template. Include children tags where needed.
import { Head } from 'jsx-email';
const Email = () => {
return (
<Head>
<title>My email title</title>
</Head>
);
};Component Props
export interface HeadProps extends BaseProps<'head'> {
enableFormatDetection?: boolean;
}enableFormatDetection?: boolean;This is used to disable the format-detection meta (will be useful for some very specific use-cases)
Default value is false
Tips
This component expresses all of the Common Component Props for ComponentProps<'head'>.