Skip to content

feat(root): development workflow for all components #2295

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 16 commits into
base: canary
Choose a base branch
from
Open

feat(root): development workflow for all components #2295

wants to merge 16 commits into from

Conversation

gabrielmfern
Copy link
Collaborator

@gabrielmfern gabrielmfern commented Jun 11, 2025 •
edited
Loading

This pull request adds a new package to the repository called playground that runs with the React Email's CLI directly and lets us write down any email template for testing, and also sets it up so that the hot reloading of email dev is triggered by changes to any of the components.

It also renames dev scripts on components to build:watch to avoid any confusion for contributors, with also removing the root dev script which was meant for doing an equivalent, but less optimized, development workflow for components.

The best side to this workflow is that it lets you copy over any email template and just experiment with things without having to worry about what to commit as everything is ignored. The other good thing is that it lets contributors play with multiple components at once.

It does not have any seeding because the good side to seeding would be to make sure a certain thing still works, and it is much better for us to do that through automated tests with vitest.

Development workflow

  1. Create new file at playground/emails/testing.tsx with the contents 
    import { Html, Head, Body, Tailwind, Text } from '@react-email/components';

export default function Testing() {
  return <Tailwind>
    <Html>
      <Head/>

      <Body className="bg-black text-white">
        <Text className="m-0 my-4 bg-cyan-200 text-slate-800">
          This is a testing email template.
        </Text>
      </Body>
    </Html>
  </Tailwind>;
}
  2. Run pnpm dev in playground
  3. Open http://localhost:3000
  4. Make a change to the source of any component
  5. See change hot reloaded into email template

@gabrielmfern gabrielmfern self-assigned this Jun 11, 2025
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Jun 11, 2025 •
edited
Loading

⚠️ No Changeset found

Latest commit: 622f1c9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel Vercel
Copy link

vercel bot commented Jun 11, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-email ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 17, 2025 4:16pm
react-email-demo ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 17, 2025 4:16pm

@pkg-pr-new pkg.pr.new
Copy link

pkg-pr-new bot commented Jun 11, 2025 •
edited
Loading

Open in StackBlitz

@react-email/body

npm i https://pkg.pr.new/resend/react-email/@react-email/body@2295

@react-email/button

npm i https://pkg.pr.new/resend/react-email/@react-email/button@2295

@react-email/code-block

npm i https://pkg.pr.new/resend/react-email/@react-email/code-block@2295

@react-email/code-inline

npm i https://pkg.pr.new/resend/react-email/@react-email/code-inline@2295

@react-email/column

npm i https://pkg.pr.new/resend/react-email/@react-email/column@2295

@react-email/components

npm i https://pkg.pr.new/resend/react-email/@react-email/components@2295

@react-email/container

npm i https://pkg.pr.new/resend/react-email/@react-email/container@2295

@react-email/font

npm i https://pkg.pr.new/resend/react-email/@react-email/font@2295

@react-email/head

npm i https://pkg.pr.new/resend/react-email/@react-email/head@2295

@react-email/heading

npm i https://pkg.pr.new/resend/react-email/@react-email/heading@2295

@react-email/hr

npm i https://pkg.pr.new/resend/react-email/@react-email/hr@2295

@react-email/html

npm i https://pkg.pr.new/resend/react-email/@react-email/html@2295

@react-email/img

npm i https://pkg.pr.new/resend/react-email/@react-email/img@2295

@react-email/link

npm i https://pkg.pr.new/resend/react-email/@react-email/link@2295

@react-email/markdown

npm i https://pkg.pr.new/resend/react-email/@react-email/markdown@2295

@react-email/preview

npm i https://pkg.pr.new/resend/react-email/@react-email/preview@2295

react-email

npm i https://pkg.pr.new/resend/react-email@2295

@react-email/render

npm i https://pkg.pr.new/resend/react-email/@react-email/render@2295

@react-email/row

npm i https://pkg.pr.new/resend/react-email/@react-email/row@2295

@react-email/section

npm i https://pkg.pr.new/resend/react-email/@react-email/section@2295

@react-email/tailwind

npm i https://pkg.pr.new/resend/react-email/@react-email/tailwind@2295

@react-email/text

npm i https://pkg.pr.new/resend/react-email/@react-email/text@2295

commit: 622f1c9

@gabrielmfern gabrielmfern force-pushed the feat/new-development-workflow-for-components branch from 0faf2a2 to b63b211 Compare June 16, 2025 14:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@gabrielmfern gabrielmfern

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@gabrielmfern