shellscape / jsx-email

Build emails with a delightful DX

JSX email provides a set of React components and helpers for building delightful and responsive email templates, compatible with modern email clients.

The components handle the heavy lifting of compatibility and client inconsistency so designers and developers can focus on building impactful and engaging templates.

Getting Started

Everything to know about the components, props, and usage is available within our Documentation Site. Please give that a read and let us know if there's anything we can help with.

Requirements

The packages and components that make up JSX email require an LTS Node version (v18.0.0+) and React v18.2.0+

Compatible with all modern email services

Components

A list of available components can be found on the jsx-email Documentation

Advantages Over react-email

The goals of this project are to provide an improved focus on Developer Experience, maintenance, fast improvements and fast releases. As such, we feel that jsx-email has a number of improvements and advantages over react-email. Those include:

• Email Client Compatibility Checking
• Crazy fast Tailwind support
• Support for <Suspense> and async within Components
• Exclusive Components
• Enhanced Developer Experience (DX)
• Better Command Line tools
• Works with Monorepos out of the box. No exhaustive setup needed.
• Less complex, smoother Preview Server
• Faster improvements, feature development, and releases
• Community-driven maintenance rather than company-planning priority
• No vendor lock-in for tools. jsx-email uses only generic components and tools

Service Integrations

Email built and rendered with JSX email can be used with any email provider that provides an API for sending email as a String. This includes AWS SES, Loops, Nodemailer, Postmark,Resend, Plunk, and SendGrid. See our documentation on Email Providers for more info and example usage.

Contributing, Working With This Repo

We 💛 contributions! After all, this is a community-driven project. We have no corporate sponsorship or backing. The maintainers and users keep this project going!

Please check out our Contribution Guide.

Attribution 🧡

This project was built upon prior work for react-email by Bu Kinoshita (@bukinoshita) and Zeno Rocha (@zenorocha).

jsx-email is a fork of react-email.

We (the maintainers) use JSX email daily. This fork was originally created as a canary channel for fixes from pull requests and issues that had been left unaddressed. JSX email grew faster, and the upstream team didn't give the project the love we felt it needed. When our help wasn't accepted, we felt a new direction was warranted.

License

MIT License

jsx-email's Issues

`QrCode` renders with `render` but not in preview

Hey folks. This is just a placeholder issue to let everyone know that we're aware of a problem with the QrCode component in which is renders just fine with the CLI or render but fails to render when used in the preview app or in a react app. This is due to an underlying dependency exposing a different API layer in the browser, and we didn't test this thoroughly enough before merging it (we're working on tests for that kind of thing at the moment).

Dev server fails to start when project `tsconfig.json` has `verbatimModuleSyntax` set to true

• Component or Package Name: @jsx-email/cli
• Component or Package Version: 1.0.9
• @jsxp-email/cli Version?: 1.0.9
• Operating System (or Browser): All
• Node Version: v18.18.0
• Link to reproduction (⚠️ read below):

https://stackblitz.com/edit/stackblitz-7k4egl

Expected Behavior

The dev server should start.

Actual Behavior

The dev server does not start, and the browser displays a blank screen. Inspecting the console shows the error:

Uncaught SyntaxError: The requested module '/src/helpers.ts?v=68b8a957' does not provide an export named 'PreviewLanguage' (at code.tsx:4:10)

Additional Information

The issue occurs if the project has a root tsconfig.json file with verbatimModuleSyntax set to true.

To validate this, setting to false allows the dev server to start (but may require browser cache to be cleared first).

Is this an inspiration?

I could see that jsx email is really similar to my JSX Mail, a tool that I'm working on in version 2 now, is this an inspiration (since my project is a little older) or is it just a coincidence?

I really liked the idea!

look at mine:

https://github.com/Theryston/jsx-mail

Is Bun supported?

Documentation Is:

• Missing
• Needed
• Confusing
• Not Sure?

Please Explain in Detail...

The docs currently do not mention bun.

Your Proposal for Changes

If it is supported, it could be added to all the examples.

remove target from Button/Link

• Component or Package Name: Button / Link
• Component or Package Version: 1.0.4 / 1.0.2

Expected Behavior / Situation

According to https://www.caniemail.com/features/html-target/ target attribute is not supported and forced to "_blank", s it's recommended not to add it.

<a href="#" data-id="@jsx-email/button">Link</a>

Actual Behavior / Situation

<a href="#" data-id="@jsx-email/button" target="_blank">Link</a>

Modification Proposal

Remove target from button thinking it also applies to Link component

<a href="#" data-id="@jsx-email/button" target="_blank">OLD</a>
<a href="#" data-id="@jsx-email/button">NEW</a>

Usage of environment variables

Hello!

What's the best practice for using environment variables? This project is using VITE, but I cannot seem to access environment variables.

Couldn't find anything in either this documentation or the fork .react-email. Looked a common use case (to me).

allow email preview to open in a different browser than Chrome by default, or just print a url

• Component or Package Name: @jsx-email/cli
• Component or Package Version: 2.0.0

Expected Behavior / Situation

I dont use Chrome as my main browser. When I run pnpm exec email preview I want it to either just print the URL, or open my actual default browser

Actual Behavior / Situation

It opens Chrome every time

Modification Proposal

• add a flag to make it not auto-open a browser, just print the localhost URL
• show that in the --help output

Unable to render in a next.js server action

• Component or Package Name: @jsx-email/render
• Component or Package Version: 1.0.1
• @jsxp-email/cli Version?: 1.0.14
• Link to reproduction (⚠️ read below): https://stackblitz.com/edit/stackblitz-starters-k14u31?file=app%2Faction.ts

Expected Behavior

Should be able to render in a server action.

Actual Behavior

You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

The error was caused by importing '@jsx-email/render/dist/es/index.js' in './app/action.ts'.

Additional Information

This is related to
resend/react-email#871
vercel/next.js#43810 (probably includes the fix)

It has been fixed in react-email already because I was able to render in a server action using their package before.

`build` throws in the starter

npm create jsx-email && cd jsx-email-starter && pnpm install && pnpm run build throws:

> email build ./templates

Found 1 files:
   templates/jsx-email-starter.tsx

Starting build...
✘ [ERROR] Could not resolve "react/jsx-runtime"

    templates/jsx-email-starter.tsx:77:4:
      77 │     <Head />
         ╵     ^

  You can mark the path "react/jsx-runtime" as external to exclude it from the bundle, which will
  remove this error and leave the unresolved path in the bundle.

Invalid Hook Call

• Component or Package Name: jsxToString
• Component or Package Version: 1.4.1
• @jsxp-email/cli Version?: 3.0.1
• Operating System (or Browser): OSX
• Node Version: 20.6.1
• Link to reproduction (⚠️ read below): https://stackblitz.com/edit/jsx-email-repro-9a6jzc?file=templates%2FReproduction.tsx

Expected Behavior

To be able to use 3rd party libs that may have react hooks in them (ie useMemo for performance concerns in a browser)

The library that alerted me to this is, @portabletext/react and their component PortableText. This enables us to render rich text from our CMS into emails.
This code was able to run in the original react-email, but I'm unsure of how the library has shifted in this respect since then.

Actual Behavior

Throws Invalid Hook Call errors during the jsxToString function call

Additional Information

stack trace

chunk-I7UPNA6J.js?v=83f9a7a2:3509 Uncaught TypeError: Cannot read properties of null (reading 'useMemo')
    at useMemo (chunk-I7UPNA6J.js?v=83f9a7a2:3509:29)
    at ThirdPartyUseMemo (Reproduction.tsx?t=1703115101276:2146:16)
    at jsxToString (jsx-email.js?v=bf6a5f6d:24773:26)
    at jsxToString (jsx-email.js?v=bf6a5f6d:24766:24)
    at jsxToString (jsx-email.js?v=bf6a5f6d:24773:14)
    at jsxToString (jsx-email.js?v=bf6a5f6d:24725:22)
    at async jsxToString (jsx-email.js?v=bf6a5f6d:24766:18)
    at async render (jsx-email.js?v=bf6a5f6d:25206:15)
    at async main.tsx:67:16
    at async Promise.all (jsxemailrepro9a6jzc-exbx--55420--a2aabdd9.local-credentialless.webcontainer.io/index 0)
useMemo @ chunk-I7UPNA6J.js?v=83f9a7a2:3509
ThirdPartyUseMemo @ Reproduction.tsx?t=1703115101276:2146
jsxToString @ jsx-email.js?v=bf6a5f6d:24773
jsxToString @ jsx-email.js?v=bf6a5f6d:24766
jsxToString @ jsx-email.js?v=bf6a5f6d:24773
jsxToString @ jsx-email.js?v=bf6a5f6d:24725
Show 5 more frames
Show less

Tailwind production stylesheet not working with gmail

• Component or Package Name: jsx-email (Tailwind component)
• Component or Package Version: 1.5.0
• @jsxp-email/cli Version?: 3.0.1
• Operating System (or Browser): macOS / Chrome
• Node Version: v19.8.1
• Link to reproduction (⚠️ read below): https://stackblitz.com/edit/jsx-email-repro-hq7dz6?file=templates%2FReproduction.tsx

Expected Behavior

When using the Tailwind component with the production prop the generated stylesheet should be compatible with gmail clients.

Actual Behavior

The generated stylesheet is not compatible with gmail because some of the generated/hashed class names start with a number and so must be escaped. (eg. .\35 91fxo {...}). Check the style tag in the HTML tab on the reproduction link.

Additional Information

This can potentially be fixed by allowing a prefix to be supplied here:

jsx-email/packages/jsx-email/src/components/tailwind/tailwind.tsx

Line 35 in b13a382

classPrefix: '',

Incompatibility with react-icons (maybe other packages?)

• Component or Package Name: react-icons
• Component or Package Version: 4.12.0
• @jsxp-email/cli Version?: 1.7.2
• Operating System (or Browser): CLI
• Node Version: v21.4.0
• Reproduction:

1. Install react-icons
2. Generate generic email template
3. Add import { BiCalendar } from "react-icons/bi"; (or probably any icon from any set).
4. In the email body, add <BiCalendar /> (or whatever icon is being imported).

Expected Behavior

Expected to build and preview, including the SVG icon, without errors.

Actual Behavior

On build, this will return the following fatal error:

file:///…/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/jsx-email/src/render/jsx-to-string.ts:246
    throw new Error(`Unsupported JSX element type: ${String(type)}`);
          ^
Error: Unsupported JSX element type: [object Object]
    at jsxToString (file:///…/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/jsx-email/src/render/jsx-to-string.ts:246:11)

That last line repeats with different line numbers.

This error also shows in the browser console (but not the CLI console) when attempting to load the email preview app.

Additional Information

As discussed in Discord on January 9, 2024.

Tailwind styles not applied on gmail

Hi, thanks for your work on Tailwind, the performance has drastically improved (we went from 44s to 3-4s of rendering!)

However, if I understood correctly, twind generate the styles in a <style> tag and keep the original tailwind classnames, unlike tw-to-css which converts the styles to inline styles.
The issue with that is gmail seems very sensitive with the <style> tag and removes it if it contains anything "fancy" (e.g. a selector containing !, a css variable like --tw-bg-opacity, etc).

• Component or Package Name: @jsx-email/tailwind
• Component or Package Version: 3.0.3
• @jsxp-email/cli Version?: 3.0.1
• Operating System (or Browser): macOS
• Node Version: 18.16.0
• Link to reproduction (⚠️ read below):

Expected Behavior

Tailwind styles applied on gmail

Actual Behavior

All styles and tailwind classnames are dropped

Additional Information

Here is a simple template to reproduce the issue:

import { Tailwind } from '@jsx-email/tailwind';
import { Body } from '@jsx-email/body'
import { Head } from '@jsx-email/head'
import { Html } from '@jsx-email/html'
import { Text } from '@jsx-email/text'

export const TemplateName = 'jsx-email-starter';

export const Template = () => (
  <Html>
    <Head />
    <Body>
      <Tailwind config={{ preflight: false }}>
        <Text className="bg-green-500">Hello</Text>
      </Tailwind>
    </Body>
  </Html>
);

rendered to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style twind="">
      .bg-green-500 {
        --tw-bg-opacity: 1;
        background-color: #10b981;
        background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
      }
    </style>
  </head>
  <body>
    <div>
      <p
        class="bg-green-500"
        style="font-size: 14px; line-height: 24px; margin: 16px 0"
      >
        Hello
      </p>
    </div>
  </body>
</html>

If I manually edit the css, it is correctly rendered:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style twind="">
      .bg-green-500 {
        background-color: #10b981;
      }
    </style>
  </head>
  <body>
    <div>
      <p
        class="bg-green-500"
        style="font-size: 14px; line-height: 24px; margin: 16px 0"
      >
        Hello
      </p>
    </div>
  </body>
</html>

Update:

Currently, I noticed that the two main issues are css variables (e.g. var(--tw-text-opacity)) and escaped chars in css classnames (e.g. !font-base or w-[400px]).

The second one can be mitigated using twind hash feature (using isProduction on Tailwind component) but as a temporary quick workaround I chose to manually replace the variables in the generated html (using replaceAll) and hashing classes prevent to able to do so.

So my current setup is to manually replace tailwind variables in the generated html and use juice to inline the css:

const Renderer = (props: React.PropsWithChildren<TailwindProps>) => {
    const initialHtml = useData(props, () => jsxToString(<>{props.children}</>))
    const { shimmedHtml, styleTag } = renderTwind(initialHtml, props)
    const finalHtml = juice(`${shimmedHtml}${styleTag}`, {
        xmlMode: true,
    })

    return <div data-id="__jsx-email-twnd" dangerouslySetInnerHTML={{ __html: finalHtml }} />
}

Tailwind component seems to not handle styles correctly on custom components

See original post here: resend/react-email#1021 (comment)

Hello guys, thanks for your work.

To give context, I'm migrating from react-email to jsx-email.

My email templates were working well @react-email/components": "0.0.7", after upgrade to a newer version, a lot of Tailwind classes are not converted into style attributes anymore. I also tried to migrate to jsx-email, but I got the same problem.

For example:

  <Link href={t("common.appStore.href")} className="inline-block">
    <Img
      src={t("common.appStore.img")}
      width="119"
      height="40"
      alt={t("common.appStore.label")}
      className="max-w-full h-auto inline"
    />
  </Link>

is generating

<a href="xxx" class="inline-block" style="color:#067df7;text-decoration:none" target="_blank"><img class="max-w-full h-auto inline" alt="xxx" height="40" src="xxx" style="display:block;outline:none;border:none;text-decoration:none" width="119"></a>

After some test, I found that the problem apply when I load custom components in an email template, for example:

import * as React from "react";
import MainLayout from "../components/ui/MainLayout";
import Email1 from "../components/views/Email1";
import { useGetToken } from "../hooks/useGetToken";

const locale = "en";

export const Email1En = () => {
  const { t } = useGetToken(locale);

  return (
    <MainLayout
      title={t("pnp23bf1_22.title")}
      preview={t("pnp23bf1_22.preview")}
    >
      <Email1 locale={locale} />
    </MainLayout>
  );
};

export default Email1En;

import { Body, Head, Html, Preview, Tailwind } from "@jsx-email/all";
import React from "react";

interface MainLayoutProps {
  title?: string;
  preview?: string;
  children?: React.ReactNode;
}

export const MainLayout = ({ title, preview, children }: MainLayoutProps) => {
  return (
      <Html>
        <Head>
          <title>{title}</title>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link
            rel="preconnect"
            href="https://fonts.gstatic.com"
            crossOrigin="anonymous"
          />
          <link
            href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap"
            rel="stylesheet"
          />
          <style>
            {`
              @media screen and (max-width: 600px) {
                h1 {
                  font-size: 30px !important;
                }
              }
            `}
          </style>
        </Head>
        {preview && <Preview>{preview}</Preview>}
        <Tailwind
          config={{
            theme: {
              fontFamily: {
                sans: ["Helvetica", "Arial", "sans-serif"],
                serif: ["Roboto Slab", "Georgia", "Times New Roman", "serif"],
              },
              extend: {
                colors: {
                  brand: "#ec0518",
                },
              },
            },
          }}
        >
          <Body className="text-gray-900 bg-white my-auto mx-auto font-sans leading-snug">
            {children}
          </Body>
        </Tailwind>
      </Html>
  );
};

export default MainLayout;

Most Tailwind classes into <Email1 /> are not generated.

Old tailwind version makes peer dependency issues with recent versions of TypeScript

• Component or Package Name: @jsx-email/tailwind
• Component or Package Version: 3.0.0

Expected Behavior / Situation

low pri, but i'd expect no peer dep issues with [email protected].

Actual Behavior / Situation

on pnpm install

 WARN  Issues with peer dependencies found
libs/email-templates
└─┬ @jsx-email/tailwind 3.0.0
  ├─┬ @twind/core 1.1.3
  │ └── ✕ unmet peer typescript@^4.8.4: found 5.2.2
  ├─┬ @twind/preset-autoprefix 1.0.7
  │ └── ✕ unmet peer typescript@^4.8.4: found 5.2.2
  └─┬ @twind/preset-tailwind 1.1.4
    └── ✕ unmet peer typescript@^4.8.4: found 5.2.2

Modification Proposal

bump twind version to get rid of these issues

Deprecate Default Template Exports

This is a placeholder issue for a task for jsx-email v1.6.0

No responding the UI in first 30 seconds

• Component or Package Name: cli
• Component or Package Version: 2.1.1
• @jsxp-email/cli Version?: 1.1.1
• Operating System (or Browser): macos
• Node Version: 20.9.0
• Link to reproduction (⚠️ read below):

Expected Behavior

I'm not sure if this is an issue from jsx-email side or maybe only occur in my device, my email preview UI is not responding and I need to wait at least 30 seconds (HMR also faces this), no lagging or anything else that relate to, all js scripts also loaded.
I've read the code of jsx CLI but couldn't see any problem with the code 🥲

Actual Behavior

Should be render fast as we run vite in normal situation

Additional Information

Package manager: pnpm
Please checkout my video, I've cut last 1s when showing the UI to avoid project information, sorry about that

CleanShot.2023-10-31.at.15.15.08.mp4

Tailwind styles not applied on gmail

Hi,

Thanks for the work on the Tailwind styles processing!

However, I still have issues to render tailwind styles on gmail with the UnoCSS update.
The generated html seems much cleaner, but as it is still internal and not inline CSS, some of the same issues arise.

• Component or Package Name: jsx-email
• Component or Package Version: 1.2.0
• @jsxp-email/cli Version?:
• Operating System (or Browser): macOS
• Node Version: 18.16.0
• Link to reproduction (⚠️ read below):

Here is a simple reproduction: https://stackblitz.com/edit/jsx-email-repro-syfmkd?file=templates%2FReproduction.tsx

The generated HTML is the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" dir="ltr">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style tailwind>
      /* layer: preflights */
      /* layer: default */
      .text-green {
        color: rgb(74 222 128 / 1);
      }
    </style>
  </head>

  <body>
    <div>
      <p class="text-green" style="font-size:14px;line-height:24px;margin:16px 0">This is our email body text</p>
      <p class="text-green" style="font-size:14px;line-height:24px;margin:16px 0">This is our email body text</p>
    </div>
  </body>

</html>

which don't render on gmail (and even strip the "class" attribute of the <p>).
If I simply replace .text-green{color:rgb(74 222 128 / 1); by .text-green{color:rgb(74, 222, 128);, it is correctly rendered.

It is a simple example, the issue is also still the same with ! or [...], for instance:

.\!m-0{margin:0 !important;}
.max-w-\[600px\]{max-width:600px;}
.p-1\.5{padding:0.375rem;}

Nonetheless, these ones are less critical as they can be avoided using production flag as a workaround.

Infer TemplateProps & optinal props

• Component or Package Name: superstruct
• Component or Package Version: 1.0.3

Documentation Is:

• Missing
• Needed
• Confusing
• Not Sure?

Please Explain in Detail...

• when using superstruct & defaulted & infer props of components become mandatory, so the idea of defaulted is misleading or even useless

import { defaulted, number, object, string, type Infer } from 'superstruct';
export const TemplateStruct = object({
  email: defaulted(string(), '[email protected]'),
  name: defaulted(string(), 'Bruce Wayne')
});


export type TemplateProps = Infer<typeof TemplateStruct>;
export const Template = ({ email, name }: TemplateProps) => (
}

• so the usage Template in another component or ts is mandatory

import { Template as  BatmanTemplate} from './emails/BatmanEmail';

const html = render(<BatmanTemplate email="Bruce" name="Wayne" />);

Your Proposal for Changes

• maybe function component with default values for its properties like in React
• or in batman example how to do it

Tailwind doesn't override `Text` element styles

• Component or Package Name: jsx-email
• Component or Package Version: 1.2.0
• @jsxp-email/cli Version?: N/A
• Operating System (or Browser): Linux
• Node Version: 20.10.0
• Link to reproduction (⚠️ read below): https://stackblitz.com/edit/jsx-email-repro-ut97pr?file=templates%2FReproduction.tsx

Expected Behavior

Text component either shouldn't have default inline styles, or they should be somehow overrideable by the Tailwind class being present. It also isn't enough to do something like style={{}} to clear it currently.

Actual Behavior

Text component has hardcoded styles that override tailwind classes. Like in the example, the text-2xl class is present and ends up in the compiled html, but because of the style tag on the Text component, it doesn't matter.

Additional Information

This happens with and without the production flag set.

email preview cannot detect .jsx and .js file type

Expected Behavior

Should able to detect any file type (or allow configure using .config file), include .js and .jsx

Actual Behavior

1. I created the BatmanEmail.tsx template with the instruction "email create BatmanEmail --out=./src/emails"
2. Run "email preview ./src/emails", BatmanEmail show in the page
3. Copy the BatmanEmail, renamed to Email.jsx, remove the types
4. Run "email preview ./src/emails", only see BatmanEmail (issue)
5. Try to change the Email back to .tsx and types, can see both

Additional Information

https://stackblitz.com/edit/jsx-email-repro-hp1ujo?file=templates%2FEmail.jsx

key prop is missing on Select.Item component

• Component or Package Name: preview
• Component or Package Version: 1.7.0
• @jsxp-email/cli Version?: 1.7.0
• Operating System (or Browser): PopOS/Chrome
• Node Version: 18.17.1
• Link to reproduction (⚠️ read below): N/A

It seems that the key prop is missing on Select.Item component inside the preview mobile.jsx file, what generate the following error in my browser console:

Template rendering issue in Nextjs 13.5.4

Template rendering Issue in next js

• Component or Package Name: NewContactLead.tsx
• Component or Package Version: 1.4.1
• @jsxp-email/cli Version?: 1.4.1
• Operating System (or Browser): windows chrome
• Node Version: 18
• Link to reproduction (⚠️ read below): https://stackblitz.com/edit/stackblitz-starters-kxjpvt?file=app%2Factions.ts

Expected Behavior

I expected the template to render to html but is is not

Actual Behavior

Errors as attached in the screenshot.

Can't run a script with ts-node that calls the render function

• Component or Package Name: @jsx-email/all
• Component or Package Version: 3.0.1
• @jsx-email/cli Version?: 3.0.1
• Operating System (or Browser): ubuntu
• Node Version:20.0.7
• Link to reproduction (⚠️ read below):
  https://github.com/co-sic/node-playground

Expected Behavior

I should be able to run the script

Actual Behavior

I get an error:

var import_shikiji = require("shikiji");
                     ^
Error [ERR_REQUIRE_ESM]: require() of ES Module /home/[*****]/node-playground/node_modules/shikiji/dist/index.mjs not supported.
Instead change the require of /home/[*****]/node-playground/node_modules/shikiji/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/home/[*****]/node-playground/node_modules/@jsx-email/code/dist/index.js:42:22)
    at require.extensions.<computed> [as .js] (/home/[*****]/node-playground/node_modules/ts-node/dist/index.js:851:20)
    at Object.<anonymous> (/home/[*****]/node-playground/node_modules/@jsx-email/all/dist/index.js:22:25)
    at require.extensions.<computed> [as .js] (/home/[*****]/node-playground/node_modules/ts-node/dist/index.js:851:20)
    at Object.<anonymous> (/home/[*****]/node-playground/src/templates/template.tsx:8:15)
    at m._compile (/home/[*****]/node-playground/node_modules/ts-node/dist/index.js:857:29)
    at require.extensions.<computed> [as .tsx] (/home/[*****]/node-playground/node_modules/ts-node/dist/index.js:859:16)
    at Object.<anonymous> (/home/[*****]/node-playground/src/script.tsx:7:20)
    at m._compile (/home/[*****]/node-playground/node_modules/ts-node/dist/index.js:857:29)
    at require.extensions.<computed> [as .tsx] (/home/[*****]/node-playground/node_modules/ts-node/dist/index.js:859:16)
    at phase4 (/home/[*****]/node-playground/node_modules/ts-node/dist/bin.js:466:20)
    at bootstrap (/home/[*****]/node-playground/node_modules/ts-node/dist/bin.js:54:12)
    at main (/home/[*****]/node-playground/node_modules/ts-node/dist/bin.js:33:12)
    at Object.<anonymous> (/home/[*****]/node-playground/node_modules/ts-node/dist/bin.js:579:5) {
  code: 'ERR_REQUIRE_ESM'
}
error Command failed with exit code 1.

Additional Information

It runs no problem with v2.0.0 of jsx-email/all

PreviewProps is not a function

• Component or Package Name: Preview
• Component or Package Version: 1.7.2
• @jsxp-email/cli Version?:
• Operating System (or Browser): Chrome
• Node Version: 20.10.0
• Link to reproduction (⚠️ read below): N/A

Expected Behavior

Using a sample, it should open in the email preview with the defined props in PreviewProps.

Actual Behavior

Preview page is blank, console.log throwing "PreviewProps is not a function" error.

Additional Information

Using any example from the email samples out-of-the-box is not working as most of them have PreviewProps defined. If this is a docs issue, please let me know how to provide template props for previews.

Type 'Element' is not assignable to type 'ReactNode'.

• Component or Package Name: @jsx-email/all
• Component or Package Version: 3.0.1
• @jsxp-email/cli Version?: Unknown
• Operating System (or Browser): Macos Sonoma
• Node Version: 18.17.1
• Link to reproduction (⚠️ read below):

While building the next app this error occurs

$ next build
 ✓ Creating an optimized production build    
 ✓ Compiled successfully
   Linting and checking validity of types  ...Failed to compile.

./email/templates/PersonalEmail.tsx:31:7
Type error: Type 'Element' is not assignable to type 'ReactNode'.
  Property 'children' is missing in type 'Element' but required in type 'ReactPortal'.

  29 |   return (
  30 |     <Tailwind>
> 31 |       <Html>
     |       ^
  32 |         <Head>
  33 |           <meta name="color-scheme" content="light dark" />
  34 |           <meta name="supported-color-schemes" content="light dark" />
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Expected Behavior

Should build properly as it was building with react-email

Actual Behavior

Error

Additional Information

None

Pass custom props to the `email build` command

• Component or Package Name: jsx-email
• Component or Package Version: any

Feature Use Case

I want to use jsx-email with Golang, and in order to do that, I need to render the emails to HTML first and then import them as strings/files in my Golang app. My email templates have some custom properties that I want to set dynamically while building the HTML files.

This should potentially allow the use of templates created by JSX-email with almost any programming language.

Feature Proposal

Let's say we have this template:

import { Button } from 'jsx-email';

const Email = ({ title }) => {
  return (
    <Button href="https://example.com" style={{ color: '#61dafb', padding: '10px 20px' }}>
      {title}
    </Button>
  );
};

I want to be able to do something like this:

email build ./email.tsx --title="Click me"

Being able to pass custom props to the CLI tool allows to generate emails programmatically in any language that supports spawning new CLI processes.

can currently not be used in `tsx` scripts: `does not provide an export named ..`

Expected Behavior

Being able to import the render function.

I am using the latest version of @jsx-email/render.

Actual Behavior

import { render } from "@jsx-email/render";
--
09:04:15.584 | ^
09:04:15.584 |  
09:04:15.584 | SyntaxError: The requested module '@jsx-email/render' does not provide an export named 'render'

Cannot build template after creating it

To reproduce:

1. Run npx email create BatmanEmail
2. Run npx email build ./BatmanEmail.tsx

Error:

Rendering the component out & emailing runs fine. However, because the layout received in the mailbox does not match the one from the preview and therefore wanted to debug a bit.

Option to use preview with a nested template structure

• Component or Package Name: @jsx-email/cli
• Component or Package Version: 1.1.1

Feature Use Case

I would like to group my email templates in different folder inside my root template folder but still be able to see them all in the preview tool. Currently you can only see the templates that are directly in the folder you specify and not in any subfolders.

Feature Proposal

This could maybe be an additional option you can pass to also include all the folders inside your rooth path in the preview and then display the same folder structure on the nav bar on the left side.

`@jsx-email/preview` is a dependency, but missing on npmjs

Expected Behavior

Being able to install the "all" package to check if it can be a drop-in replacement of @react-email/components.

Actual Behavior

$ npm i @jsx-email/all                                                                                                                                                                       ✔  37s  
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@jsx-email%2fpreview - Not found
npm ERR! 404 
npm ERR! 404  '@jsx-email/[email protected]' is not in this registry.
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

Hot reloading only working in Template pages

Hot reloading for both JSX and JSS seems to work fine if you are editing a template page.

However, if you have - for example - building blocks outside of the 'template' context (as example: a utils folder with Footer or ContentBlock) changes will not trigger a reload. This console indicates: [vite] hmr update instead of [vite] page reload.

If I'm missing something, let me know. I couldn't find samples with this structure. At least in my opinion - could be wrong - it would be nice to have some reusable generic blocks with prefilled content & styling so only the basics are in your email templates.

Workaround
Create a template so it behaves like an email template but also export other stuff that can be reused over emails.

feat: add support for building the preview app for deployment

• Component or Package Name: @jsx-email/cli
• Component or Package Version: 1.1.1

Feature Use Case

I want to deploy the Preview server so everybody in the company can check the current email templates. My first approach was to just run email preview inside a Docker Container and deploy that. The problem is that an Error is thrown and ends the process. I suspect it is because it tries to open the page inside of the docker and cannot for some reason? See the log:

yarn run v1.22.19
$ email preview packages/react/src/templates

  🚀 JSX email Preview

  ➜  Local:   http://localhost:55420/
node:events:489
      throw er; // Unhandled 'error' event
      ^

Error: spawn xdg-open ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:285:19)
    at onErrorNT (node:internal/child_process:483:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess._handle.onexit (node:internal/child_process:291:12)
    at onErrorNT (node:internal/child_process:483:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'spawn xdg-open',
  path: 'xdg-open',
  spawnargs: [ 'http://localhost:55420/' ]
}

Node.js v20.1.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Feature Proposal

For now maybe just an option to skip the auto open of the page would be enough. But maybe there is also a better approach for my need?

Anyway, much ❤️ for the project! I recently switched from react-email since i head problems with the dev server and here everything just works and feels very smooth :)

Add `zod` and `yup` support for creating default props

As much as I loathe zod, this needs to be done.

This is a placeholder issue for a task for jsx-email v1.6.0

Does not build on windows

• Component or Package Name: cli
• Component or Package Version: 1.1.0
• @jsxp-email/cli Version?: 1.1.0
• Operating System (or Browser): Windows 11
• Node Version: 18.14.2
• Link to reproduction (⚠️ read below): Brand new project on Windows, created with npm create jsx-email, no need for reproduction.

Expected Behavior

Build works on Windows

Actual Behavior

It doesn't

Additional Information

Can't create PR now
Build command uses globby, which returns empty arrays on windows paths. You should use globby([slash(join(temp, "*.js")]) everywhere in CLI.
Thanks

Tailwind classes rendered in head don't get forwarded

• Component or Package Name: Tailwind
• Component or Package Version: 1.7.0
• @jsx-email/cli Version?: 3.0.1
• Operating System (or Browser): osx
• Node Version: 20.10
• Link to reproduction (⚠️ read below): N/A
• Link to previous PR where this was fixed: resend/react-email#629

Expected Behavior

Tailwind styles are converted to inline styles unless they have media queries.

Actual Behavior

All tailwind ends up in the head, so forwarded emails won't have original styling.

Additional Information

When using react-email last year, I ran into the problem where my designer excited forwarded me the email template I made, only for me to find out that the head (and styles) doesn't get forwarded!

For development, I decided to do the templates Mobile first, and any responsive css would then end up in the head (that is the only place for media queries). This resulted in an email that could be mobile or desktop, but would fallback to mobile if forwarded / resent anywhere else.

For our emails, it is very important that they can be sent, resent, and maintain at least a mobile fallback.

---

I poked around UnoCSS to see if they have a similar tw-to-css function, and I wasn't able to find anything. Perhaps we could add that as a transformer, but I'm unfamiliar with the lib.

---

I made a very quick example of an example email, and then I forwarded it to show that the tailwind colors didn't come along:

Original:

Forwarded:

Perhaps I could be of more help if I could be pointed in a good direction as well!
Excited to be able to move to jsx-email and keep contributing

create-jsx-email & typescript

• Component or Package Name: create-jsx-email
• Component or Package Version: 0.1.1

Expected Behavior / Situation

• when npm create jsx-email in package.json to have typescript

Actual Behavior / Situation

• when npm create jsx-email in package.json there is no devDependencies for typescript, so it is not clear which typescript version is supported

Modification Proposal

• when npm create jsx-email in package.json should be dev | peer version of typescript for better DX

send mail

• Component or Package Name: create-jsx-email
• Component or Package Version: 0.1.1

Documentation Is:

• Missing
• Needed
• Confusing
• Not Sure?

Please Explain in Detail...

• there is some documentation in https://jsx.email/docs/email-providers
• but it is missing how to actually send it

Your Proposal for Changes

• when using create-jsx-email create example sendMail.tsx
• when I create in root of project SendMail.tsx

import { render } from '@jsx-email/render';
import nodemailer from 'nodemailer';
import React from 'react';

import { Template as  BatmanTemplate} from './emails/BatmanEmail';

const html = render(<BatmanTemplate email="Bruce" name="Wayne" />);
const transport = nodemailer.createTransport({
  host: xxx,
  port: xxx,
...
});

await transport.sendMail({
  from: xxx,
  to: xxxx,
  subject: 'jsx-email-starter',
  html: html
}); 

• then I need to install tsx and change project to "type": "module", script : {"mail": "tsx SendMail.tsx"} to be able to run npm run mail
• if any better solution it would be great

Build/Check cli commands throw Error: Cannot find module 'jsx-email'

• Component or Package Name: jsx-email
• Component or Package Version: 1.7.2
• @jsxp-email/cli Version?:
• Operating System (or Browser): Chrome
• Node Version: 20.10.0
• Link to reproduction (⚠️ read below): https://stackblitz.com/edit/jsx-email-repro-vzgqmc

Expected Behavior

Running email build ./templates/Reproduction.tsx should successfully build the template.

Running email check ./templates/Reproduction.tsx should successfully run the compatibility check.

Actual Behavior

Throws and error instead: Error: Cannot find module 'jsx-email'

Additional Information

The behaviour is the same in local Windows environment as in repro link.

Edge runtime

• Component or Package Name: @jsx-email/render
• Component or Package Version: 3.0.1

Expected Behavior / Situation

Compatibility with Edge runtime (vercel etc)

Actual Behavior / Situation

Not compatible with Edge runtime -- throws Module not found: Can't resolve 'os' due to clean-css:

⨯ ../../node_modules/.pnpm/[email protected]/node_modules/clean-css/lib/options/format.js:1:22
Module not found: Can't resolve 'os'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
../../node_modules/.pnpm/[email protected]/node_modules/clean-css/lib/clean.js
../../node_modules/.pnpm/[email protected]/node_modules/clean-css/index.js
../../node_modules/.pnpm/[email protected]/node_modules/rehype-minify-css-style/lib/index.js
../../node_modules/.pnpm/[email protected]/node_modules/rehype-minify-css-style/index.js
../../node_modules/.pnpm/[email protected]/node_modules/rehype-preset-minify/index.js
../../node_modules/.pnpm/@[email protected]/node_modules/@jsx-email/render/dist/index.mjs

Modification Proposal

I don't know much about what jsx-email is using clean-css for but perhaps there's an alternate library that could be used instead which is compatible with the Edge runtime and only uses web-compatible APIs?

Tailwind not working

• Component or Package Name: @jsx-email/tailwind
• Component or Package Version: ^3.0.0
• @jsxp-email/cli Version?: ^2.0.0
• Operating System (or Browser): Win 11, Chrome Version 119.0.6045.106
• Node Version: v18.18.2
• Link to reproduction (⚠️ read below):

Expected Behavior

• to render taillwind button in browser

Actual Behavior

• not rendered in browser

Additional Information

• using documentation from https://jsx.email/docs/components/tailwind

import { Button } from '@jsx-email/button';
import { Tailwind } from '@jsx-email/tailwind';

const Email = () => {
  return (
    <Tailwind
      config={{
        theme: {
          extend: {
            colors: {
              brand: '#007291'
            }
          }
        }
      }}
    >
      <Button
        href="https://example.com"
        className="bg-brand px-3 py-2 font-medium leading-4 text-white"
      >
        Click me
      </Button>
    </Tailwind>
  );
};

• problem is with import { Tailwind } from '@jsx-email/tailwind';
• solution importing it from '@jsx-email/all'
• example in doc is also wrong const Email must be export const Template

Deprecate `PreviewProps` in favor of `DefaultProps`

This is a placeholder issue for a task for jsx-email v1.6.0

PreviewProps is a silly name and a holdover from the forking of react-email. Deprecate in favor of defaultProps and create a contract for a named export.

Preview for mobile

• Component or Package Name: jsx-email
• Component or Package Version: latest

Feature Use Case

react-email is got the preview mobile which is pretty cool to have an idea of how the email will look like in both devices

Feature Proposal

I personally find the switch a bit annoying so since most of emails is 640px wide max, I'd just show simultaneously the mobile and desktop on the same screen. I'd same some time.

Previewer hang when using empty files and default arguments

• Component or Package Name: react
• Component or Package Version: 18.2
• @jsxp-email/cli Version?: v1.6.1
• Operating System (or Browser): macOS/Chromium
• Node Version: 21.5
• Link to reproduction:

https://stackblitz.com/edit/jsx-email-repro-fcbu37?file=templates/Reproduction.tsx

Expected Behavior

The previewer should work

Actual Behavior

The previewer never loads

Additional Information

For the issue you need to move the footer.tsx file between test and templates. This seems to be interacting with default arguments weirdly because removing them makes everything work fine.

create jsx-email & README

• Component or Package Name: create jsx-email
• Component or Package Version: 0.1.1

Documentation Is:

• Missing
• Needed
• Confusing
• Not Sure?

Please Explain in Detail...

• when creating npm create jsx-email it should have README

Your Proposal for Changes

• README.md with basic instructions on how to start for better DX

ESM build is not working

• Component or Package Name: @jsx-email/all (but for others the same apply)
• Component or Package Version: 2.0.2
• @jsxp-email/cli Version?: Not used
• Operating System (or Browser): OSX
• Node Version: v18.18.0
• Link to reproduction (⚠️ read below): https://stackblitz.com/edit/stackblitz-starters-ksqowi?file=index.js

Expected Behavior

I should be able to run jsx-email in node in projects that are "type:module":

{
  "type": "module",
  "dependencies": {
    "@jsx-email/all": "^2.0.1"
  }
}

Actual Behavior

I get an error:

file:///Users/kasperpeulen/code/modern-web-app/bla.js:1
import {renderAsync} from '@jsx-email/all';
        ^^^^^^^^^^^
SyntaxError: Named export 'renderAsync' not found. The requested module '@jsx-email/all' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@jsx-email/all';
const {renderAsync} = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)

Node.js v18.18.0

Additional Information

I think this can be fixed by making sure that the ESM build outputs .mjs files.

I tried renaming the esm output files locally in node_modules and that worked.

Unable to preview email templates

• Component or Package Name:
• Component or Package Version:
• @jsxp-email/cli Version?:
• Operating System (or Browser):
• Node Version:
• Link to reproduction (⚠️ read below):

Expected Behavior

being able to view template

Actual Behavior

unable to view template

Additional Information

New Project

I just created a sample project with create jsx-email utility but I'm unable to preview the templates.

Existing Project

And I get a different error If I add jsx email to an existing nextjs project

TS CommonJS builds broken with a Node.js backend

• Component or Package Name: jsx-email
• Component or Package Version: 1.7.0
• @jsxp-email/cli Version?: 3.0.1
• Operating System (or Browser): macOS / Chrome
• Node Version: 19.8.1
• Link to reproduction (⚠️ read below): https://stackblitz.com/edit/jsx-email-repro-ey549j?file=tsconfig.json

Expected Behavior

Typescript apps built using the CommonJS output should run.

Actual Behavior

The app crashes with the following error:

Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/.pnpm/[email protected]/node_modules/shikiji/dist/index.mjs not supported.

Additional Information

You can reproduce the error in the reproduction by running npm run produce-error in the terminal (tsc && node ./dist/main.js). I tried different values in tsconfig to somehow work around this but nothing worked, for different reasons.

Module '"@jsx-email/all"' has no exported member

• Component or Package Name: "@jsx-email/all":
• Component or Package Version: "^2.2.3",
• @jsxp-email/cli Version?:
• Operating System (or Browser):
• Node Version:
• Link to reproduction (⚠️ read below):

Expected Behavior

• not having typescript problems

Actual Behavior

Module '"@jsx-email/all"' has no exported member 'Body'.
Module '"@jsx-email/all"' has no exported member 'Button'.
...

Additional Information

SVG not rendering correctly

• Component or Package Name: @jsx-email/all
• Component or Package Version: 2.2.2
• @jsxp-email/cli Version?: @jsx-email/cli (without the p, assuming that's a template typo?) v1.1.1
• Operating System (or Browser): MacOS, Chrome
• Node Version: 20.9.0
• Link to reproduction (⚠️ read below):

StackBlitz link 404s unfortunately. There is a repo you can play with here.

This repo contains the code created when you use the quick start in the JSX Email docs, with a single SVG JSX file added into the starter template.

Expected Behavior

Here is what that SVG looks like when rendered in my Next app (first) and when sent using react-email (second)

Actual Behavior

Here is what the SVG looks like rendered by the JSX Email preview server (first) and an email generated by JSX Email (second)

Note the white 'tick' is missing in both cases.

Additional Information