Render templates with context

[tomfa]

Goals

1. Ability to differentiate in code if we are previewing for screen, or rendering to html/text/jsx.
2. Replace placeholder template variables with dummy texts.

Background

Most emails templates have some variables that are interpolated by the email service, e.g. Hi {{ firstName }}.

I would like the ability to know when react-email is showing the template in source mode vs desktop mode, so I can swap out these variables with some dummy data. This way, I could see Hi Luke Skywalker in the Desktop mode (and email it), while seeing Hi {{ firstName }} in the Source view.

In order to do this, I need to know inside my email component which mode we are in.

Proposal

type RenderContext = { isPreview: boolean; }

export default function Email({ isPreview }: RenderContext) {
  const name = isPreview ? `Luke Skywalker` : `{{ firstName }}`;
  return (
    <Text>Hi {name}</Text>
  )
}

Related source code

This can be accomplished with something ala the following change in the .react-email code

// .react-email/src/app/preview/[slug]/page.tsx

type RenderContext = {
  isPreview: boolean;
  
  // ...alternatively
  // mode: 'source' | 'desktop';
}

const previewMarkup = render(<Email context={{ isPreview: true }} />)

return (
  <Preview
    // ....
    previewMarkup={previewMarkup}
    markup={markup}
    reactMarkup={reactMarkup}
    plainText={plainText}
  />
)

Contribute?

I can contribute

[tomfa]

I misunderstood the setup of react-email, and thought I couldn't change that code myself 😅