feat(root): development workflow for all components

package.json

@@ -4,15 +4,14 @@
   "private": true,
   "scripts": {
     "build": "turbo run build",
-    "dev": "turbo run dev --parallel --concurrency 25",
-    "release": "turbo run build --filter=./packages/* && pnpm changeset publish",
     "canary:enter": "changeset pre enter canary",
     "canary:exit": "changeset pre exit",
-    "version": "changeset version && pnpm install --no-frozen-lockfile && pnpm lint:fix",
     "lint": "biome check",
     "lint:fix": "biome check --write .",
+    "release": "turbo run build --filter=./packages/* && pnpm changeset publish",
     "test": "turbo run test",
-    "test:watch": "turbo run test:watch"
+    "test:watch": "turbo run test:watch",
+    "version": "changeset version && pnpm install --no-frozen-lockfile && pnpm lint:fix"
   },
   "devDependencies": {
     "@biomejs/biome": "2.0.5",

packages/body/package.json

@@ -24,10 +24,10 @@
   "license": "MIT",
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
     "clean": "rm -rf dist",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
-    "test:watch": "vitest",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "peerDependencies": {
     "react": "^18.0 || ^19.0 || ^19.0.0-rc"

packages/button/package.json

@@ -24,10 +24,10 @@
   "license": "MIT",
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
     "clean": "rm -rf dist",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
-    "test:watch": "vitest",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "repository": {
     "type": "git",

packages/code-block/package.json

@@ -24,8 +24,8 @@
   "license": "MIT",
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",
-    "clean": "rm -rf dist",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch"
+    "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
+    "clean": "rm -rf dist"
   },
   "repository": {
     "type": "git",

packages/code-inline/package.json

@@ -23,9 +23,9 @@
   },
   "license": "MIT",
   "scripts": {
-    "dev": "pnpm build --watch",
-    "clean": "rm -rf dist",
-    "build": "tsup src/index.ts --format esm,cjs --dts --external react"
+    "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
+    "clean": "rm -rf dist"
   },
   "engines": {
     "node": ">=18.0.0"

packages/column/package.json

@@ -24,10 +24,10 @@
   "license": "MIT",
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
     "clean": "rm -rf dist",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
-    "test:watch": "vitest",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "repository": {
     "type": "git",

packages/components/package.json

@@ -24,8 +24,8 @@
   "license": "MIT",
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",
-    "clean": "rm -rf dist",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch"
+    "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
+    "clean": "rm -rf dist"
   },
   "repository": {
     "type": "git",

packages/container/package.json

@@ -24,10 +24,10 @@
   "license": "MIT",
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
     "clean": "rm -rf dist",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
-    "test:watch": "vitest",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "repository": {
     "type": "git",

packages/font/package.json

@@ -24,10 +24,10 @@
   "license": "MIT",
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
     "clean": "rm -rf dist",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
-    "test:watch": "vitest",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "peerDependencies": {
     "react": "^18.0 || ^19.0 || ^19.0.0-rc"

packages/head/package.json

@@ -24,10 +24,10 @@
   "license": "MIT",
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
     "clean": "rm -rf dist",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
-    "test:watch": "vitest",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "repository": {
     "type": "git",

packages/heading/package.json

@@ -24,10 +24,10 @@
   "license": "MIT",
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
     "clean": "rm -rf dist",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
-    "test:watch": "vitest",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "repository": {
     "type": "git",

packages/hr/package.json

@@ -24,10 +24,10 @@
   "license": "MIT",
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
     "clean": "rm -rf dist",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
-    "test:watch": "vitest",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "repository": {
     "type": "git",

packages/html/package.json

@@ -24,10 +24,10 @@
   "license": "MIT",
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
     "clean": "rm -rf dist",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
-    "test:watch": "vitest",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "repository": {
     "type": "git",

packages/img/package.json

@@ -24,10 +24,10 @@
   "license": "MIT",
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
     "clean": "rm -rf dist",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
-    "test:watch": "vitest",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "repository": {
     "type": "git",

packages/link/package.json

@@ -24,10 +24,10 @@
   "license": "MIT",
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
     "clean": "rm -rf dist",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
-    "test:watch": "vitest",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "repository": {
     "type": "git",

packages/markdown/package.json

@@ -23,10 +23,10 @@
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
     "clean": "rm -rf dist",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
-    "test:watch": "vitest",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "keywords": [
     "react",

packages/preview/package.json

@@ -24,10 +24,10 @@
   "license": "MIT",
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
     "clean": "rm -rf dist",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
-    "test:watch": "vitest",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "repository": {
     "type": "git",

packages/react-email/package.json

@@ -8,8 +8,8 @@
   "type": "module",
   "scripts": {
     "build": "tsup-node",
+    "build:watch": "tsup-node --watch src",
     "clean": "rm -rf dist",
-    "dev": "tsup-node --watch src",
     "test": "vitest run",
     "test:watch": "vitest"
   },

packages/render/package.json

@@ -66,8 +66,8 @@
   "license": "MIT",
   "scripts": {
     "build": "tsup-node",
+    "build:watch": "tsup-node --watch",
     "clean": "rm -rf dist",
-    "dev": "tsup-node --watch",
     "test": "vitest run",
     "test:watch": "vitest"
   },

packages/row/package.json

@@ -24,10 +24,10 @@
   "license": "MIT",
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
     "clean": "rm -rf dist",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
-    "test:watch": "vitest",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "repository": {
     "type": "git",

packages/section/package.json

@@ -24,10 +24,10 @@
   "license": "MIT",
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
     "clean": "rm -rf dist",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
-    "test:watch": "vitest",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "repository": {
     "type": "git",

packages/tailwind/package.json

@@ -24,10 +24,10 @@
   "license": "MIT",
   "scripts": {
     "build": "tsc && NODE_ENV=production vite build --mode production && node ./copy-tailwind-types.mjs",
-    "dev": "vite build --watch",
+    "build:watch": "vite build --watch",
     "clean": "rm -rf dist",
-    "test:watch": "vitest",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "repository": {
     "type": "git",

packages/text/package.json

@@ -24,10 +24,10 @@
   "license": "MIT",
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
     "clean": "rm -rf dist",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
-    "test:watch": "vitest",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "repository": {
     "type": "git",

playground/README.md

@@ -0,0 +1,40 @@
+# React Email Playground
+
+This is a playground for React Email made to experiment with components in realtime.
+
+It includes all components directly from source with a path alias import of `@react-email/components` and hot reloading in the `dev` script.
+
+## Development workflow
+
+### 1. Create an email template
+
+Create a new file at `playground/emails/testing.tsx` 
+
+```tsx emails/testing.tsx
+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 playground server
+
+```sh
+pnpm dev
+```
+
+### 3. Open in your browser
+
+Go to http://localhost:3000
+

playground/components.ts

@@ -0,0 +1,19 @@
+export * from '../packages/body/src';
+export * from '../packages/button/src';
+export * from '../packages/code-block/src';
+export * from '../packages/code-inline/src';
+export * from '../packages/column/src';
+export * from '../packages/container/src';
+export * from '../packages/font/src';
+export * from '../packages/head/src';
+export * from '../packages/heading/src';
+export * from '../packages/hr/src';
+export * from '../packages/html/src';
+export * from '../packages/img/src';
+export * from '../packages/link/src';
+export * from '../packages/markdown/src';
+export * from '../packages/preview/src';
+export * from '../packages/row/src';
+export * from '../packages/section/src';
+export * from '../packages/tailwind/src';
+export * from '../packages/text/src';

playground/emails/.gitignore

@@ -0,0 +1,2 @@
+**/*.tsx
+!example.tsx