\n\n## Introduction\n\nA fork of [EmailBuilder.js](https://github.com/usewaypoint/email-builder-js) that adds support for **custom blocks with configurable slots**. Build reusable, parameterized email components that can be resolved at render time.\n\nRenders clean JSON or HTML output that works across clients and devices.\n\n## Installation\n\n```bash\nnpm install @brunomiguens/email-builder\n```\n\n## Quick start\n\n### Rendering a document to HTML\n\n```javascript\nimport { renderEmailToHtml } from '@brunomiguens/email-builder';\n\nconst html = renderEmailToHtml(document, {\n rootBlockId: 'root',\n customBlocks: [],\n});\n```\n\n### Using the Reader component\n\n```javascript\nimport { Reader } from '@brunomiguens/email-builder';\n\n;\n```\n\n## Custom blocks\n\nCustom blocks are reusable template components with configurable **slots** — placeholders that can be overridden per instance.\n\n### Defining a custom block\n\nA custom block entry contains its block structure and a set of slot definitions:\n\n```typescript\nimport type { CustomBlockEntry, SlotDefinition } from '@brunomiguens/email-builder';\n\nconst myBlock: CustomBlockEntry = {\n name: 'greeting-card',\n config: {\n root: {\n type: 'EmailLayout',\n data: { childrenIds: ['text-1'] },\n },\n 'text-1': {\n type: 'Text',\n data: { props: { text: '{{greeting}}' } },\n },\n },\n slots: {\n greeting: { label: 'Greeting', type: 'text', defaultValue: 'Hello!' },\n },\n};\n```\n\n### Slot types\n\n| Type | Default value type | Description |\n| -------- | ------------------ | ---------------------------------------------- |\n| `text` | `string` | Plain text replacement |\n| `html` | `string` | HTML content |\n| `color` | `string` | Color value (hex, rgb, etc.) |\n| `number` | `number` | Numeric value — type is preserved in output |\n| `table` | `TableItem[]` | Array of `{ label, value }` rendered as a table |\n\n### Rendering with custom blocks\n\nPass your custom block definitions when rendering:\n\n```javascript\nimport { renderEmailToHtml } from '@brunomiguens/email-builder';\n\nconst html = renderEmailToHtml(templateDocument, {\n rootBlockId: 'root',\n customBlocks: [myBlock],\n});\n```\n\nThe resolver automatically:\n\n- Replaces `CustomBlock` instances with their template content\n- Namespaces child block IDs to avoid collisions across multiple instances\n- Substitutes `{{slotName}}` placeholders with slot values (or defaults)\n- Converts `table` slots into email-safe HTML tables\n\n### Generating table HTML\n\nFor standalone use outside of custom blocks:\n\n```javascript\nimport { generateTableHtml } from '@brunomiguens/email-builder';\n\nconst html = generateTableHtml([\n { label: 'Item', value: 'Widget' },\n { label: 'Price', value: '$9.99' },\n]);\n```\n\n## Exports\n\n```typescript\n// Rendering\nexport { renderToStaticMarkup } from '@brunomiguens/email-builder';\nexport { renderEmailToHtml } from '@brunomiguens/email-builder';\n\n// Reader component\nexport { Reader } from '@brunomiguens/email-builder';\n\n// Custom blocks\nexport { resolveCustomBlocks, generateTableHtml } from '@brunomiguens/email-builder';\n\n// Types\nexport type { TReaderDocument, TReaderBlock, SlotDefinition, CustomBlockEntry, TableItem } from '@brunomiguens/email-builder';\n```\n\n## Built-in blocks\n\nEach block is its own npm package:\n\n- [Avatar](https://github.com/BrunoMiguens/email-builder-js/tree/main/packages/block-avatar)\n- [Button](https://github.com/BrunoMiguens/email-builder-js/tree/main/packages/block-button)\n- [Columns](https://github.com/BrunoMiguens/email-builder-js/tree/main/packages/block-columns-container)\n- [Container](https://github.com/BrunoMiguens/email-builder-js/tree/main/packages/block-container)\n- [Divider](https://github.com/BrunoMiguens/email-builder-js/tree/main/packages/block-divider)\n- [Heading](https://github.com/BrunoMiguens/email-builder-js/tree/main/packages/block-heading)\n- [HTML](https://github.com/BrunoMiguens/email-builder-js/tree/main/packages/block-html)\n- [Image](https://github.com/BrunoMiguens/email-builder-js/tree/main/packages/block-image)\n- [Spacer](https://github.com/BrunoMiguens/email-builder-js/tree/main/packages/block-spacer)\n- [Text](https://github.com/BrunoMiguens/email-builder-js/tree/main/packages/block-text)\n\n## Email client support\n\nAll blocks are tested and supported by modern email clients (desktop and mobile) including Gmail, Apple Mail, Outlook, Yahoo! Mail, HEY, and Superhuman.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}