{"_id":"@ainsleydev/email-templates","_rev":"4-a4efd9ffa00fb3b706906e184e33fe5c","name":"@ainsleydev/email-templates","dist-tags":{"latest":"0.0.4"},"versions":{"0.0.1":{"name":"@ainsleydev/email-templates","version":"0.0.1","keywords":["email","templates","react-email","transactional","typescript","theme"],"author":{"url":"https://ainsley.dev","name":"ainsley.dev","email":"hello@ainsley.dev"},"license":"MIT","_id":"@ainsleydev/email-templates@0.0.1","maintainers":[{"name":"ainsleydev","email":"hello@ainsley.dev"}],"homepage":"https://github.com/ainsleydev/webkit#readme","bugs":{"url":"https://github.com/ainsleydev/webkit/issues"},"dist":{"shasum":"e62523bd56a67063536f4e286cdf8ac53a8f0e0b","tarball":"https://registry.npmjs.org/@ainsleydev/email-templates/-/email-templates-0.0.1.tgz","fileCount":44,"integrity":"sha512-3Y0fO7PflxjlOg67xpRP2inpbwpJuI47oemxZ7DwcuUyFbjjAfwf8QeetzfPNWDuRxTanoLDp5mDI6ukbd/m3g==","signatures":[{"sig":"MEUCIFSnBMBqB5js4luvlt8+HZbtv/A60p7h1B8ubarfk/htAiEAgy3mwx9zZ4ip3S4nskddAQ5Ku6T8RCKkHKDcz6wgNjo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":67053},"main":"./dist/index.js","type":"module","_from":"file:ainsleydev-email-templates-0.0.1.tgz","types":"./dist/index.d.ts","engines":{"node":">=18","pnpm":">=9"},"scripts":{"lint":"biome lint --write .","test":"vitest run","build":"pnpm clean && pnpm build:types && pnpm build:swc","clean":"rimraf {dist,*.tsbuildinfo}","format":"biome format --write .","build:swc":"swc ./src -d ./dist --config-file .swcrc --strip-leading-paths","test:watch":"vitest","build:types":"tsc --emitDeclarationOnly --outDir dist"},"_npmUser":{"name":"ainsleydev","email":"hello@ainsley.dev"},"_resolved":"/tmp/026764c553c2830f1cee953f20557f9b/ainsleydev-email-templates-0.0.1.tgz","_integrity":"sha512-3Y0fO7PflxjlOg67xpRP2inpbwpJuI47oemxZ7DwcuUyFbjjAfwf8QeetzfPNWDuRxTanoLDp5mDI6ukbd/m3g==","repository":{"url":"git+https://github.com/ainsleydev/webkit.git","type":"git","directory":"packages/email-templates"},"_npmVersion":"11.6.1","description":"Composable email template building blocks with theme system for React Email","directories":{},"_nodeVersion":"24.11.0","dependencies":{"@react-email/render":"^1.0.1","@react-email/components":"^0.0.31"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"rimraf":"6.0.1","vitest":"^2.0.5","@swc/cli":"^0.4.0","@swc/core":"^1.7.2","typescript":"^5.5.4","@types/react":"^18.3.3","@types/react-dom":"^18.3.0","@ainsleydev/eslint-config":"0.0.9","@ainsleydev/prettier-config":"0.0.5"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","@react-email/components":"^0.0.0"},"_npmOperationalInternal":{"tmp":"tmp/email-templates_0.0.1_1761763943860_0.9034086491648705","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@ainsleydev/email-templates","version":"0.0.2","keywords":["email","templates","react-email","transactional","typescript","theme"],"author":{"url":"https://ainsley.dev","name":"ainsley.dev","email":"hello@ainsley.dev"},"license":"MIT","_id":"@ainsleydev/email-templates@0.0.2","maintainers":[{"name":"ainsleydev","email":"hello@ainsley.dev"}],"homepage":"https://github.com/ainsleydev/webkit#readme","bugs":{"url":"https://github.com/ainsleydev/webkit/issues"},"dist":{"shasum":"dc891608e9fa0e62a37381bc90d035073067b173","tarball":"https://registry.npmjs.org/@ainsleydev/email-templates/-/email-templates-0.0.2.tgz","fileCount":44,"integrity":"sha512-EH021HSyJG+ktiCNntU4oVsZqxjP06zH9ikAaJon7tL1aMA0SZ24shjJsGYtRMYd8CTQOoHqMmm3akO8eBu+Pg==","signatures":[{"sig":"MEQCIACMfpNmGDnyuyatmGNxNPAmu2fpg/LVfNFBMJQlyaKxAiAhy9xpqiTBR5pLP07Z/t2sYikxVL7SP1cgOJq2ZBYYTw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":67172},"main":"./dist/index.js","type":"module","_from":"file:ainsleydev-email-templates-0.0.2.tgz","types":"./dist/index.d.ts","engines":{"node":">=18","pnpm":">=9"},"scripts":{"lint":"biome lint --write .","test":"vitest run","build":"pnpm clean && pnpm build:types && pnpm build:swc","clean":"rimraf {dist,*.tsbuildinfo}","format":"biome format --write .","preview":"tsx preview/server.ts","build:swc":"swc ./src -d ./dist --config-file .swcrc --strip-leading-paths","test:watch":"vitest","build:types":"tsc --emitDeclarationOnly --outDir dist"},"_npmUser":{"name":"ainsleydev","email":"hello@ainsley.dev"},"_resolved":"/tmp/15929fe5a911a4a1732f9011c731229c/ainsleydev-email-templates-0.0.2.tgz","_integrity":"sha512-EH021HSyJG+ktiCNntU4oVsZqxjP06zH9ikAaJon7tL1aMA0SZ24shjJsGYtRMYd8CTQOoHqMmm3akO8eBu+Pg==","repository":{"url":"git+https://github.com/ainsleydev/webkit.git","type":"git","directory":"packages/email-templates"},"_npmVersion":"11.6.1","description":"Composable email template building blocks with theme system for React Email","directories":{},"_nodeVersion":"24.11.0","dependencies":{"@react-email/render":"^1.0.1","@react-email/components":"^0.0.31"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.19.0","rimraf":"6.0.1","vitest":"^2.0.5","@swc/cli":"^0.4.0","@swc/core":"^1.7.2","typescript":"^5.5.4","@types/react":"^18.3.3","@types/react-dom":"^18.3.0","@ainsleydev/eslint-config":"0.0.9","@ainsleydev/prettier-config":"0.0.5"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","@react-email/components":"^0.0.0"},"_npmOperationalInternal":{"tmp":"tmp/email-templates_0.0.2_1761765794263_0.28238308142277213","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@ainsleydev/email-templates","version":"0.0.3","keywords":["email","templates","react-email","transactional","typescript","theme"],"author":{"url":"https://ainsley.dev","name":"ainsley.dev","email":"hello@ainsley.dev"},"license":"MIT","_id":"@ainsleydev/email-templates@0.0.3","maintainers":[{"name":"ainsleydev","email":"hello@ainsley.dev"}],"homepage":"https://github.com/ainsleydev/webkit#readme","bugs":{"url":"https://github.com/ainsleydev/webkit/issues"},"bin":{"email-templates":"bin.js"},"dist":{"shasum":"4b6d018af1041173307a60d4d5a274450322eaac","tarball":"https://registry.npmjs.org/@ainsleydev/email-templates/-/email-templates-0.0.3.tgz","fileCount":66,"integrity":"sha512-J4YRZxx0B87CqTCXGwWteq4zslmMBVRR9UH4uOYW0PqVNIzbskHiiI7X/EGimHlKPaLIbdUvyKN1Opc2JfZQHA==","signatures":[{"sig":"MEYCIQClp7UA6//XqlMw6k1zG8FYzxs5ZNUbmvzObxVqII2S+wIhAIvcMkw9LxzeidKBQYmgpDL2ptfAxLs6fE8gZgJHU4Xy","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":110415},"main":"./dist/index.js","type":"module","_from":"file:ainsleydev-email-templates-0.0.3.tgz","types":"./dist/index.d.ts","engines":{"node":">=18","pnpm":">=9"},"scripts":{"lint":"biome lint --write .","test":"vitest run","build":"pnpm clean && pnpm build:types && pnpm build:swc","clean":"rimraf {dist,*.tsbuildinfo}","format":"biome format --write .","preview":"tsx preview/server.ts","build:swc":"swc ./src -d ./dist --config-file .swcrc --strip-leading-paths","test:watch":"vitest","build:types":"tsc --emitDeclarationOnly --outDir dist"},"_npmUser":{"name":"ainsleydev","email":"hello@ainsley.dev"},"_resolved":"/tmp/f08cf14328ce7f9e1bb99655292dfcd2/ainsleydev-email-templates-0.0.3.tgz","_integrity":"sha512-J4YRZxx0B87CqTCXGwWteq4zslmMBVRR9UH4uOYW0PqVNIzbskHiiI7X/EGimHlKPaLIbdUvyKN1Opc2JfZQHA==","repository":{"url":"git+https://github.com/ainsleydev/webkit.git","type":"git","directory":"packages/email-templates"},"_npmVersion":"11.6.1","description":"Composable email template building blocks with theme system for React Email","directories":{},"_nodeVersion":"24.11.0","dependencies":{"@react-email/render":"^1.0.1","@react-email/components":"^0.0.31"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.19.0","rimraf":"6.0.1","vitest":"^2.0.5","@swc/cli":"^0.4.0","@swc/core":"^1.7.2","typescript":"^5.5.4","@types/node":"^24.9.1","@types/react":"^18.3.3","@types/react-dom":"^18.3.0","@ainsleydev/eslint-config":"0.0.9","@ainsleydev/prettier-config":"0.0.5"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","@react-email/components":"^0.0.0"},"_npmOperationalInternal":{"tmp":"tmp/email-templates_0.0.3_1761909558869_0.3027406927887222","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@ainsleydev/email-templates","version":"0.0.4","description":"Composable email template building blocks with theme system for React Email","license":"MIT","type":"module","keywords":["email","templates","react-email","transactional","typescript","theme"],"repository":{"type":"git","url":"git+https://github.com/ainsleydev/webkit.git","directory":"packages/email-templates"},"author":{"name":"ainsley.dev","email":"hello@ainsley.dev","url":"https://ainsley.dev"},"main":"./dist/index.js","types":"./dist/index.d.ts","bin":{"email-templates":"bin.js"},"publishConfig":{"access":"public"},"dependencies":{"@react-email/components":"^0.0.31","@react-email/render":"^1.0.1"},"devDependencies":{"@swc/cli":"^0.4.0","@swc/core":"^1.7.2","@types/node":"^24.9.1","@types/react":"^19.0.0","@types/react-dom":"^19.0.0","react":"^19.2.4","react-dom":"^19.2.4","rimraf":"6.0.1","tsx":"^4.19.0","typescript":"^5.5.4","vitest":"^2.0.5","@ainsleydev/eslint-config":"0.0.9","@ainsleydev/prettier-config":"0.0.5"},"peerDependencies":{"@react-email/components":">=0.0.31","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"engines":{"node":">=18","pnpm":">=9"},"scripts":{"build":"pnpm clean && pnpm build:types && pnpm build:swc","build:swc":"swc ./src -d ./dist --config-file .swcrc --strip-leading-paths","build:types":"tsc --emitDeclarationOnly --outDir dist","format":"biome format --write .","lint":"biome lint --write .","clean":"rimraf {dist,*.tsbuildinfo}","test":"vitest run","test:watch":"vitest","preview":"tsx preview/server.ts"},"_id":"@ainsleydev/email-templates@0.0.4","bugs":{"url":"https://github.com/ainsleydev/webkit/issues"},"homepage":"https://github.com/ainsleydev/webkit#readme","_integrity":"sha512-u3AvtPfhRWGE6E3kAcX/KGX41MlJ3hGn0f7R4W9lU07lHX5qg3ERSYWPVHqTIwfNKWb+bz3WNUgpLcozILkm5g==","_resolved":"/tmp/f384682ab69155a6c667c9f65505bda6/ainsleydev-email-templates-0.0.4.tgz","_from":"file:ainsleydev-email-templates-0.0.4.tgz","_nodeVersion":"24.13.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-u3AvtPfhRWGE6E3kAcX/KGX41MlJ3hGn0f7R4W9lU07lHX5qg3ERSYWPVHqTIwfNKWb+bz3WNUgpLcozILkm5g==","shasum":"70598e38f6b7631a09873c92a5308a2bc0f9b81b","tarball":"https://registry.npmjs.org/@ainsleydev/email-templates/-/email-templates-0.0.4.tgz","fileCount":66,"unpackedSize":110627,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDn/NTZ7/x2xF5ezZC33nq1LKBohv31kfW+yXu67nwjpQIgOxJCxY0uoOCQCdMqwrLhidbsmDJTP31WKG8q01ILbsw="}]},"_npmUser":{"name":"ainsleydev","email":"hello@ainsley.dev"},"directories":{},"maintainers":[{"name":"ainsleydev","email":"hello@ainsley.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/email-templates_0.0.4_1769627449132_0.36425913260773735"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-29T18:52:23.767Z","modified":"2026-01-28T19:10:49.385Z","0.0.1":"2025-10-29T18:52:24.049Z","0.0.2":"2025-10-29T19:23:14.443Z","0.0.3":"2025-10-31T11:19:19.071Z","0.0.4":"2026-01-28T19:10:49.289Z"},"bugs":{"url":"https://github.com/ainsleydev/webkit/issues"},"author":{"name":"ainsley.dev","email":"hello@ainsley.dev","url":"https://ainsley.dev"},"license":"MIT","homepage":"https://github.com/ainsleydev/webkit#readme","keywords":["email","templates","react-email","transactional","typescript","theme"],"repository":{"type":"git","url":"git+https://github.com/ainsleydev/webkit.git","directory":"packages/email-templates"},"description":"Composable email template building blocks with theme system for React Email","maintainers":[{"name":"ainsleydev","email":"hello@ainsley.dev"}],"readme":"# @ainsleydev/email-templates\n\nComposable email template building blocks with theme system for React Email.\n\n## Features\n\n- **Theme system** - Customise colours, branding, and styles\n- **BaseEmail component** - Reusable layout with logo and footer\n- **Runtime rendering** - No build step required\n- **Type-safe** - Full TypeScript support\n- **Flexible** - Create your own templates using React Email components\n- **Lightweight** - Minimal dependencies\n\n## Installation\n\n```bash\npnpm add @ainsleydev/email-templates\n```\n\n## Preview server\n\nPreview your email templates in a local development server:\n\n```bash\n# Preview templates in current directory\nnpx @ainsleydev/email-templates preview\n\n# Preview templates in a specific directory\nnpx @ainsleydev/email-templates preview ./emails\n\n# Use a custom port\nnpx @ainsleydev/email-templates preview ./emails --port=3001\n```\n\nThe preview server will:\n- Automatically discover all `.tsx` and `.jsx` files in the specified directory\n- Render them with the default theme\n- Serve them at `http://localhost:3000/<template-name>`\n\n**Note:** Your template files must export a React component that accepts a `theme` prop.\n\n## Quick start\n\n### 1. Create your email template\n\n```typescript\n// emails/ForgotPassword.tsx\nimport { BaseEmail, Heading, Text, Section, Button, generateStyles } from '@ainsleydev/email-templates'\nimport type { EmailTheme } from '@ainsleydev/email-templates'\n\ninterface ForgotPasswordProps {\n  theme: EmailTheme\n  user: { firstName: string }\n  resetUrl: string\n}\n\nexport const ForgotPasswordEmail = ({ theme, user, resetUrl }: ForgotPasswordProps) => {\n  const styles = generateStyles(theme)\n\n  return (\n    <BaseEmail theme={theme} previewText=\"Reset your password\">\n      <Heading style={styles.heading}>\n        Hello, {user.firstName}!\n      </Heading>\n      <Text style={styles.text}>\n        We received a request to reset your password. Click the button below to continue.\n      </Text>\n      <Section style={{ textAlign: 'center' }}>\n        <Button href={resetUrl} style={styles.button}>\n          Reset Password\n        </Button>\n      </Section>\n    </BaseEmail>\n  )\n}\n```\n\n### 2. Render the template\n\n```typescript\nimport { renderEmail } from '@ainsleydev/email-templates'\nimport { ForgotPasswordEmail } from './emails/ForgotPassword'\n\nconst html = await renderEmail({\n  component: ForgotPasswordEmail,\n  props: {\n    user: { firstName: 'John' },\n    resetUrl: 'https://example.com/reset/token123',\n  },\n})\n\n// Send via your email service.\nawait emailService.send({\n  to: 'user@example.com',\n  subject: 'Reset your password',\n  html,\n})\n```\n\n## Theme customisation\n\n### Using partial overrides\n\n```typescript\nconst html = await renderEmail({\n  component: ForgotPasswordEmail,\n  props: {\n    user: { firstName: 'Jane' },\n    resetUrl: 'https://example.com/reset/abc',\n  },\n  theme: {\n    branding: {\n      companyName: 'My Company',\n      logoUrl: 'https://mycompany.com/logo.png',\n      logoWidth: 150,\n      footerText: 'All rights reserved.',\n      websiteUrl: 'https://mycompany.com',\n    },\n    colours: {\n      text: {\n        action: '#0066cc', // Custom link colour.\n      },\n    },\n  },\n})\n```\n\n### Creating a complete theme\n\n```typescript\nimport { defaultTheme, type EmailTheme } from '@ainsleydev/email-templates'\n\nconst customTheme: EmailTheme = {\n  ...defaultTheme,\n  branding: {\n    companyName: 'Custom Corp',\n    logoUrl: 'https://custom.com/logo.png',\n    logoWidth: 200,\n    footerText: 'All rights reserved.',\n    websiteUrl: 'https://custom.com',\n  },\n  colours: {\n    ...defaultTheme.colours,\n    text: {\n      ...defaultTheme.colours.text,\n      action: '#ff0000',\n    },\n  },\n}\n\n// Use in all your emails.\nconst html = await renderEmail({\n  component: MyEmail,\n  props: myProps,\n  theme: customTheme,\n})\n```\n\n## Usage with Payload CMS\n\nPayload CMS allows you to customise email templates for authentication emails.\n\n```typescript\nimport { buildConfig } from 'payload'\nimport { renderEmail } from '@ainsleydev/email-templates'\nimport { ForgotPasswordEmail } from './emails/ForgotPassword'\nimport { VerifyAccountEmail } from './emails/VerifyAccount'\n\nexport default buildConfig({\n  email: {\n    fromName: 'My App',\n    fromAddress: 'noreply@myapp.com',\n    // Configure your email transport.\n  },\n  collections: [\n    {\n      slug: 'users',\n      auth: {\n        forgotPassword: {\n          generateEmailHTML: async ({ token, user }) => {\n            return renderEmail({\n              component: ForgotPasswordEmail,\n              props: {\n                user: { firstName: user.firstName },\n                resetUrl: `${process.env.FRONTEND_URL}/reset-password?token=${token}`,\n              },\n              theme: {\n                branding: {\n                  companyName: 'My App',\n                  logoUrl: `${process.env.FRONTEND_URL}/logo.png`,\n                },\n              },\n            })\n          },\n        },\n        verify: {\n          generateEmailHTML: async ({ token, user }) => {\n            return renderEmail({\n              component: VerifyAccountEmail,\n              props: {\n                user: { firstName: user.firstName },\n                verifyUrl: `${process.env.FRONTEND_URL}/verify?token=${token}`,\n              },\n            })\n          },\n        },\n      },\n    },\n  ],\n})\n```\n\n## React Email components\n\nAll React Email components are re-exported for convenience:\n\n```typescript\nimport {\n  Html, Head, Preview, Body, Container, Section, Row, Column,\n  Heading, Text, Button, Link, Img, Hr,\n  // ...and more\n} from '@ainsleydev/email-templates'\n\n// Use them directly in your templates:\n<Heading>Welcome</Heading>\n<Text>Hello world</Text>\n<Button href=\"...\">Click here</Button>\n```\n\nSee [React Email documentation](https://react.email/docs/components/html) for full component API.\n\n## API\n\n### `renderEmail(options)`\n\nRenders an email template component to HTML string.\n\n**Options:**\n- `component` - Your React component that accepts `theme` prop\n- `props` - Props to pass to your component (excluding theme)\n- `theme` - Optional theme overrides\n- `plainText` - Render as plain text instead of HTML (default: `false`)\n\n**Returns:** `Promise<string>` - HTML or plain text string\n\n### `BaseEmail`\n\nBase layout component with logo, content area, and footer.\n\n**Props:**\n- `theme: EmailTheme` - Theme configuration\n- `previewText?: string` - Email preview text\n- `children: React.ReactNode` - Email content\n\n### `generateStyles(theme)`\n\nGenerates common style objects from theme configuration.\n\n**Returns:** Object with `heading`, `text`, `button`, `hr`, etc. styles\n\n### `defaultTheme`\n\nDefault theme configuration based on ainsley.dev design system.\n\n### `mergeTheme(partial)`\n\nMerges partial theme with default theme.\n\n## Examples\n\nSee the [test file](src/renderer.test.ts) for more examples of creating custom templates.\n\n## Development\n\n```bash\n# Install dependencies.\npnpm install\n\n# Run tests.\npnpm test\n\n# Build package.\npnpm build\n\n# Format code.\npnpm format\n\n# Lint code.\npnpm lint\n```\n\n## TODO\n\n- **Go CLI support** - Add CLI command for rendering templates from Go via `exec.Command`. This would allow Go applications to use the same email templates without needing a Node.js runtime dependency.\n\n## Licence\n\nMIT © [ainsley.dev](https://ainsley.dev)\n","readmeFilename":"README.md"}