{"_id":"@react-email-dnd/renderer","_rev":"6-b6eeeb333993d62172819632fdedbffb","name":"@react-email-dnd/renderer","dist-tags":{"latest":"0.3.3"},"versions":{"0.1.0":{"name":"@react-email-dnd/renderer","version":"0.1.0","keywords":["react","email","dnd","renderer"],"author":{"name":"Johan Mickelin"},"license":"MIT","_id":"@react-email-dnd/renderer@0.1.0","maintainers":[{"name":"jaywalk","email":"johan.mickelin@gmail.com"}],"dist":{"shasum":"da4a67335afce358ba62ebba98fbf31bf3964f5c","tarball":"https://registry.npmjs.org/@react-email-dnd/renderer/-/renderer-0.1.0.tgz","fileCount":8,"integrity":"sha512-+rvQ7P2OsN20K87uUAkn+RUvXmYU4NoIlNPEr+xS8L3Gc8GoEK2dePfhs1WUcK1U5/YkKgB7m1Ex1nuDH2XvBg==","signatures":[{"sig":"MEUCIFRMyOqNWqbAuEqnDa8J+wU/TI+RhW8wQFGtlvfW0psYAiEAnc7WSmgy/i1Yfa1TSImz1suEJ5sKQH8i/dhIS53iPiY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":488736},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"9a0c69cd13d0baaad357d2c7b16a1e45924ee89c","scripts":{"dev":"tsup --watch","test":"vitest","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"jaywalk","email":"johan.mickelin@gmail.com"},"_npmVersion":"10.9.2","description":"Rendering utilities for react-email-dnd documents.","directories":{},"sideEffects":false,"_nodeVersion":"23.6.1","dependencies":{"@react-email-dnd/shared":"workspace:*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","vitest":"^2.0.0","typescript":"^5.6.0","react-email":"^4.3.2","@types/react":"^19.1.16","@react-email/components":"0.5.7"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0 || ^19.0.0","react-dom":"^17.0.0 || ^18.0.0 || ^19.0.0","react-email":"^4.2.8","@react-email/components":"0.5.0"},"_npmOperationalInternal":{"tmp":"tmp/renderer_0.1.0_1763545564526_0.4385179883997976","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@react-email-dnd/renderer","version":"0.2.0","keywords":["react","email","dnd","renderer"],"author":{"name":"Johan Mickelin"},"license":"MIT","_id":"@react-email-dnd/renderer@0.2.0","maintainers":[{"name":"jaywalk","email":"johan.mickelin@gmail.com"}],"homepage":"https://github.com/johanmic/react-email-dnd/tree/main/packages/renderer#readme","bugs":{"url":"https://github.com/johanmic/react-email-dnd/issues"},"dist":{"shasum":"d43c98525d16b69121d55d2f9df5e2df54cbc632","tarball":"https://registry.npmjs.org/@react-email-dnd/renderer/-/renderer-0.2.0.tgz","fileCount":8,"integrity":"sha512-s7jDVmnW/Hhgfo5KIL2HIRD6CAFA5I/aOlC9yPxRvfUwuX/CNsJ41xxKjiMZp8b8rLQ7RBHmG+TB4jkA4Qko1Q==","signatures":[{"sig":"MEUCIQC8DVhaK3DvYzo/Kp9BhOFs9C9xf3WnCKFA9VUrRJzPNQIgMVK0LFG+ylsQ5HeQbpmzI0W9BUEs48Ix/svEMBq6gH0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":496038},"main":"dist/index.js","_from":"file:react-email-dnd-renderer-0.2.0.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"dev":"tsup --watch","test":"vitest","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"jaywalk","email":"johan.mickelin@gmail.com"},"_resolved":"/private/var/folders/f8/754y7fp12vzgsbsqbwc4wndh0000gn/T/3b737d954b0676f7b517c025cc9d3cc7/react-email-dnd-renderer-0.2.0.tgz","_integrity":"sha512-s7jDVmnW/Hhgfo5KIL2HIRD6CAFA5I/aOlC9yPxRvfUwuX/CNsJ41xxKjiMZp8b8rLQ7RBHmG+TB4jkA4Qko1Q==","repository":{"url":"git+https://github.com/johanmic/react-email-dnd.git","type":"git","directory":"packages/renderer"},"_npmVersion":"10.9.2","description":"Rendering utilities for react-email-dnd documents.","directories":{},"sideEffects":false,"_nodeVersion":"23.6.1","dependencies":{"@react-email-dnd/shared":"^0.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","vitest":"^2.0.0","typescript":"^5.6.0","react-email":"^3.0.1","@types/react":"^19.1.16","@react-email/components":"^0.0.22"},"peerDependencies":{"react":"^18.2.0 || ^19.0.0","react-dom":"^18.2.0 || ^19.0.0","react-email":"^3.0.1","@react-email/components":"^0.0.22"},"_npmOperationalInternal":{"tmp":"tmp/renderer_0.2.0_1763628719804_0.6230020723540579","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@react-email-dnd/renderer","version":"0.3.0","keywords":["react","email","dnd","renderer"],"author":{"name":"Johan Mickelin"},"license":"MIT","_id":"@react-email-dnd/renderer@0.3.0","maintainers":[{"name":"jaywalk","email":"johan.mickelin@gmail.com"}],"homepage":"https://dnd.email/docs/packages/renderer/rendering-examples","bugs":{"url":"https://github.com/johanmic/react-email-dnd/issues"},"dist":{"shasum":"3c8f4b16883bf3132c4205d36cbea58653088e34","tarball":"https://registry.npmjs.org/@react-email-dnd/renderer/-/renderer-0.3.0.tgz","fileCount":8,"integrity":"sha512-RxLw0C8xc69dpHyUd2viG2v0EooSf/B5lfI6lpB86HLs3/2MyE0xTMbhvR49/TNMmNpnhUO723iQT5NF9HoiwA==","signatures":[{"sig":"MEUCIAJvOssVgaNdwirCu8n/rbei/P5kM4j0GEw3/VStwsBdAiEApyeYsyfBOD8um7Pso2wF/BpzbuyjywaEObyewjX8xxU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":504756},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"d3aed404bf7d150169f3399368e87e822eeee25a","scripts":{"dev":"tsup --watch","test":"vitest","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"jaywalk","email":"johan.mickelin@gmail.com"},"repository":{"url":"git+https://github.com/johanmic/react-email-dnd.git","type":"git","directory":"packages/renderer"},"_npmVersion":"10.9.2","description":"Rendering utilities for react-email-dnd documents.","directories":{},"sideEffects":false,"_nodeVersion":"23.6.1","dependencies":{"@react-email-dnd/shared":"workspace:^0.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","vitest":"^2.0.0","typescript":"^5.6.0","react-email":"^3.0.1","@types/react":"^19.1.16","@react-email/components":"^0.0.22"},"peerDependencies":{"react":"^18.2.0 || ^19.0.0","react-dom":"^18.2.0 || ^19.0.0","react-email":"^3.0.1","@react-email/components":"^0.0.22"},"_npmOperationalInternal":{"tmp":"tmp/renderer_0.3.0_1764190168534_0.14650034355132324","host":"s3://npm-registry-packages-npm-production"}},"0.3.1":{"name":"@react-email-dnd/renderer","version":"0.3.1","keywords":["react","email","dnd","renderer"],"author":{"name":"Johan Mickelin"},"license":"MIT","_id":"@react-email-dnd/renderer@0.3.1","maintainers":[{"name":"jaywalk","email":"johan.mickelin@gmail.com"}],"homepage":"https://dnd.email/docs/packages/renderer/rendering-examples","bugs":{"url":"https://github.com/johanmic/react-email-dnd/issues"},"dist":{"shasum":"43d24c7906822839c23906b60eaba9a23c5a04ce","tarball":"https://registry.npmjs.org/@react-email-dnd/renderer/-/renderer-0.3.1.tgz","fileCount":8,"integrity":"sha512-VPtedcY5H0jBqLZRACDVWaMXJGJBTOk50kB/7bKIBohKyeZIxX/ES4+pc9urV8MqMsR0qhDKvzE6+ZjtnnngPQ==","signatures":[{"sig":"MEYCIQC1mBPK1FzVZm3EXku38gCQL2osXAZqt8PtcAtmHPjW0wIhAIBaZejyk/jJoxCVtTb6L/Vq6vAzQiG2L/y122a5EM02","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":504906},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"bef7e8dd7d19971a9833a99143d89fe00fd51b10","scripts":{"dev":"tsup --watch","test":"vitest","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"jaywalk","email":"johan.mickelin@gmail.com"},"repository":{"url":"git+https://github.com/johanmic/react-email-dnd.git","type":"git","directory":"packages/renderer"},"_npmVersion":"10.9.2","description":"Rendering utilities for react-email-dnd documents.","directories":{},"sideEffects":false,"_nodeVersion":"23.6.1","dependencies":{"@react-email-dnd/shared":"^0.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","vitest":"^2.0.0","typescript":"^5.6.0","react-email":"^3.0.1","@types/react":"^19.1.16","@react-email/components":"^0.0.22"},"peerDependencies":{"react":"^18.2.0 || ^19.0.0","react-dom":"^18.2.0 || ^19.0.0","react-email":"^3.0.0 || ^5.0.0","@react-email/components":"^0.5.0"},"_npmOperationalInternal":{"tmp":"tmp/renderer_0.3.1_1764228411951_0.26809068153532034","host":"s3://npm-registry-packages-npm-production"}},"0.3.2":{"name":"@react-email-dnd/renderer","version":"0.3.2","keywords":["react","email","dnd","renderer"],"author":{"name":"Johan Mickelin"},"license":"MIT","_id":"@react-email-dnd/renderer@0.3.2","maintainers":[{"name":"jaywalk","email":"johan.mickelin@gmail.com"}],"homepage":"https://dnd.email/docs/packages/renderer/rendering-examples","bugs":{"url":"https://github.com/johanmic/react-email-dnd/issues"},"dist":{"shasum":"54ff107c91c8bc12a352b4f0476a9d589d4c1734","tarball":"https://registry.npmjs.org/@react-email-dnd/renderer/-/renderer-0.3.2.tgz","fileCount":9,"integrity":"sha512-lCwbpNLJA0hUsSuXdVEW0cy/YPHGqu4cH8myB4XYf1bmbQ3/KNIj8yA3pc5hUB6Osf6S9GRHqw9BJAERKMzUfA==","signatures":[{"sig":"MEUCIAfvAnhJibvV7IUG81+gi5D9J66vrCfUmRTeKvXnH+WjAiEA4ozUVU8eEdnA2LJjUhSYJiE0iATyAnFnu407LNBBgwM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":506160},"main":"dist/index.js","_from":"file:react-email-dnd-renderer-0.3.2.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"dev":"tsup --watch","test":"vitest run","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"jaywalk","email":"johan.mickelin@gmail.com"},"_resolved":"/private/var/folders/f8/754y7fp12vzgsbsqbwc4wndh0000gn/T/14d9c5efcb8d9b90444331edfd58296b/react-email-dnd-renderer-0.3.2.tgz","_integrity":"sha512-lCwbpNLJA0hUsSuXdVEW0cy/YPHGqu4cH8myB4XYf1bmbQ3/KNIj8yA3pc5hUB6Osf6S9GRHqw9BJAERKMzUfA==","repository":{"url":"git+https://github.com/johanmic/react-email-dnd.git","type":"git","directory":"packages/renderer"},"_npmVersion":"11.6.2","description":"Rendering utilities for react-email-dnd documents.","directories":{},"sideEffects":false,"_nodeVersion":"25.2.1","dependencies":{"@react-email-dnd/shared":"^0.3.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","vitest":"^2.0.0","typescript":"^5.6.0","react-email":"^3.0.1","@types/react":"^19.1.16","@phosphor-icons/react":"^2.1.10","@react-email/components":"^0.0.22"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","react-email":">=3.0.0","@react-email/components":">=0.0.22"},"peerDependenciesMeta":{"react-email":{"optional":true},"@react-email/components":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/renderer_0.3.2_1764852632661_0.11687039466040883","host":"s3://npm-registry-packages-npm-production"}},"0.3.3":{"name":"@react-email-dnd/renderer","author":{"name":"Johan Mickelin"},"license":"MIT","version":"0.3.3","description":"Rendering utilities for react-email-dnd documents.","keywords":["react","email","dnd","renderer"],"repository":{"type":"git","url":"git+https://github.com/johanmic/react-email-dnd.git","directory":"packages/renderer"},"homepage":"https://dnd.email/docs/packages/renderer/rendering-examples","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"sideEffects":false,"publishConfig":{"access":"public"},"dependencies":{"@react-email-dnd/shared":"^0.3.3"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","react-email":">=3.0.0","@react-email/components":">=0.0.22"},"peerDependenciesMeta":{"react-email":{"optional":true},"@react-email/components":{"optional":true}},"devDependencies":{"@phosphor-icons/react":"^2.1.10","@react-email/components":"^0.0.22","@types/react":"^19.1.16","react-email":"^3.0.1","tsup":"^8.0.0","typescript":"^5.6.0","vitest":"^2.0.0"},"scripts":{"build":"tsup","dev":"tsup --watch","typecheck":"tsc --noEmit","test":"vitest run"},"_id":"@react-email-dnd/renderer@0.3.3","bugs":{"url":"https://github.com/johanmic/react-email-dnd/issues"},"_integrity":"sha512-I7A9pOFmtwGzI7qR+DY8bwJSZ4r6v0f8XUxfo1lWa2HpmGUBkBFn7Haixbqng9N5WdXMwO+NOwN7p85N8vtEig==","_resolved":"/private/var/folders/f8/754y7fp12vzgsbsqbwc4wndh0000gn/T/9fc8ba58d5fad6dfb7afbb0756fd0970/react-email-dnd-renderer-0.3.3.tgz","_from":"file:react-email-dnd-renderer-0.3.3.tgz","_nodeVersion":"25.2.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-I7A9pOFmtwGzI7qR+DY8bwJSZ4r6v0f8XUxfo1lWa2HpmGUBkBFn7Haixbqng9N5WdXMwO+NOwN7p85N8vtEig==","shasum":"8bde9fc30b42c75136faf408b82af4b719826702","tarball":"https://registry.npmjs.org/@react-email-dnd/renderer/-/renderer-0.3.3.tgz","fileCount":9,"unpackedSize":506160,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIA3jhQDE7GneCI4ENc+CEkroC5z4Pv8FWgA/HlSQdGeJAiEApvs0COQSrHpQncWNnaDn+yxLWM9a7Q7Rk8svMcEDYf8="}]},"_npmUser":{"name":"jaywalk","email":"johan.mickelin@gmail.com"},"directories":{},"maintainers":[{"name":"jaywalk","email":"johan.mickelin@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/renderer_0.3.3_1764858107384_0.11526357193599246"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-19T09:46:04.413Z","modified":"2025-12-04T14:21:47.815Z","0.1.0":"2025-11-19T09:46:04.711Z","0.2.0":"2025-11-20T08:52:00.030Z","0.3.0":"2025-11-26T20:49:28.750Z","0.3.1":"2025-11-27T07:26:52.143Z","0.3.2":"2025-12-04T12:50:32.815Z","0.3.3":"2025-12-04T14:21:47.567Z"},"bugs":{"url":"https://github.com/johanmic/react-email-dnd/issues"},"author":{"name":"Johan Mickelin"},"license":"MIT","homepage":"https://dnd.email/docs/packages/renderer/rendering-examples","keywords":["react","email","dnd","renderer"],"repository":{"type":"git","url":"git+https://github.com/johanmic/react-email-dnd.git","directory":"packages/renderer"},"description":"Rendering utilities for react-email-dnd documents.","maintainers":[{"name":"jaywalk","email":"johan.mickelin@gmail.com"}],"readme":"# @react-email-dnd/renderer\n\nThe rendering engine for React Email DND. This package takes the JSON document structure produced by the editor and transforms it into various formats including React components, HTML strings, and plain text.\n\n## Installation\n\n```bash\npnpm add @react-email-dnd/renderer\nbun add @react-email-dnd/renderer\nyarn add @react-email-dnd/renderer\nnpm install @react-email-dnd/renderer\n```\n\n## Usage\n\nThe main entry point is the `renderDocument` function. It accepts a document (JSON) and an options object.\n\n```typescript\nimport { renderDocument } from '@react-email-dnd/renderer';\nimport type { CanvasDocument } from '@react-email-dnd/shared';\n\n// Your JSON document from the editor\nconst document: CanvasDocument = { ... };\n\nconst result = renderDocument({\n  document,\n  options: {\n    format: 'html',\n    variables: {\n      first_name: 'Alice',\n    },\n  },\n});\n\nif (result.format === 'html') {\n  console.log(result.html);\n}\n```\n\n## API\n\n### `renderDocument(request: RenderRequest): RenderResult`\n\nTransforms a `CanvasDocument` into the requested format.\n\n#### `RenderRequest`\n\n| Property   | Type              | Description                              |\n| ---------- | ----------------- | ---------------------------------------- |\n| `document` | `CanvasDocument`  | The JSON document structure to render.   |\n| `options`  | `RendererOptions` | Configuration for the rendering process. |\n\n#### `RendererOptions`\n\n| Property                  | Type                      | Default | Description                                                                |\n| ------------------------- | ------------------------- | ------- | -------------------------------------------------------------------------- |\n| `format`                  | `RendererFormat`          | -       | Output format: `'react'`, `'html'`, `'plain-text'`, or `'react-text'`.     |\n| `variables`               | `Record<string, unknown>` | `{}`    | Data for variable interpolation (e.g., `{{ user.name }}`).                 |\n| `throwOnMissingVariables` | `boolean`                 | `true`  | If `true`, throws an error when a variable is used in the doc but missing. |\n| `indent`                  | `number`                  | `2`     | Indentation spaces for string outputs (`html`, `react-text`).              |\n| `componentName`           | `string`                  | -       | Name of the exported component when using `react-text` format.             |\n| `customBlocks`            | `CustomBlockRegistry`     | -       | Registry for rendering custom components defined in the editor.            |\n| `daisyui`                 | `boolean`                 | `false` | Enables DaisyUI theming support and CSS injection.                         |\n| `theme`                   | `Record<string, string>`  | -       | Key-value pairs for theme colors (extends Tailwind config).                |\n| `colors`                  | `ColorOption[]`           | `[]`    | Palette of colors to generate Tailwind classes for (used with DaisyUI).    |\n| `throwOnMissingCustomBlocks` | `boolean`                 | `true`  | If `true`, throws an error when a custom block is used in the doc but missing. |\n\n### `RenderResult`\n\nThe return type depends on the requested `format`:\n\n- **`react`**: Returns `{ format: 'react', node: ReactElement }`. Useful for previewing in a React app.\n- **`html`**: Returns `{ format: 'html', html: string }`. The final HTML string ready for email clients.\n- **`plain-text`**: Returns `{ format: 'plain-text', text: string }`. A text-only version of the email.\n- **`react-text`**: Returns `{ format: 'react-text', code: string }`. The generated React source code as a string.\n\n## Theming & Customization\n\nThe renderer supports DaisyUI and Tailwind-based theming. You can pass a `theme` object or a list of `colors` to generate the necessary CSS styles inline.\n\n```typescript\nrenderDocument({\n  document,\n  options: {\n    format: \"html\",\n    daisyui: true,\n    theme: {\n      primary: \"#0ea5e9\",\n      secondary: \"#64748b\",\n    },\n  },\n})\n```\n\n## Custom Blocks\n\nIf your document uses custom blocks, you must provide the same registry used in the editor to the renderer so it knows how to render them.\n\n```typescript\nimport { renderDocument } from \"@react-email-dnd/renderer\"\nimport { MyCustomBlock } from \"./components/MyCustomBlock\"\n\nconst customBlocks = {\n  MyCustomBlock: {\n    component: MyCustomBlock,\n    // ... other definition parts\n  },\n}\n\nrenderDocument({\n  document,\n  options: {\n    format: \"react\",\n    customBlocks,\n  },\n})\n```\n","readmeFilename":"README.md"}