{"id":28422948,"url":"https://github.com/yoopta-editor/email-builder","last_synced_at":"2025-06-24T13:30:53.175Z","repository":{"id":266461937,"uuid":"898139962","full_name":"yoopta-editor/Email-Builder","owner":"yoopta-editor","description":"Email-Builder based Yoopta","archived":false,"fork":false,"pushed_at":"2024-12-10T22:23:38.000Z","size":375,"stargazers_count":20,"open_issues_count":4,"forks_count":2,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-05T08:01:49.495Z","etag":null,"topics":["email-builder","email-design","email-editor","email-marketing","email-template","frontend","javascript","open-source","react","react-email-editor","rich-text-editor","typescript","wysiwyg","yoopta-editor"],"latest_commit_sha":null,"homepage":"https://yoopta.dev/examples/withEmailBuilder/email-builder","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yoopta-editor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-03T21:27:01.000Z","updated_at":"2025-05-21T17:26:42.000Z","dependencies_parsed_at":"2024-12-04T12:07:13.749Z","dependency_job_id":"70609476-8fb7-4c1f-a59d-0f2c17babd80","html_url":"https://github.com/yoopta-editor/Email-Builder","commit_stats":null,"previous_names":["yoopta-editor/email-builder"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yoopta-editor/Email-Builder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoopta-editor%2FEmail-Builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoopta-editor%2FEmail-Builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoopta-editor%2FEmail-Builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoopta-editor%2FEmail-Builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yoopta-editor","download_url":"https://codeload.github.com/yoopta-editor/Email-Builder/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoopta-editor%2FEmail-Builder/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261685291,"owners_count":23194079,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["email-builder","email-design","email-editor","email-marketing","email-template","frontend","javascript","open-source","react","react-email-editor","rich-text-editor","typescript","wysiwyg","yoopta-editor"],"created_at":"2025-06-05T07:39:05.984Z","updated_at":"2025-06-24T13:30:53.165Z","avatar_url":"https://github.com/yoopta-editor.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Darginec05"],"categories":[],"sub_categories":[],"readme":"# @yoopta/email-builder\n\nOpen-source email-builder built on top of the [Yoopta-Editor](https://github.com/yoopta-editor/Email-Builder)\n\n## Installation\n\n```javascript\nnpm install @yoopta/email-builder slate slate-react slate-dom\n# or\nyarn add @yoopta/email-builder slate slate-react slate-dom\n# or\npnpm add @yoopta/email-builder slate slate-react slate-dom\n```\n\n## Demo\n\n- https://yoopta.dev/examples/withEmailBuilder/email-builder\n\n## Quick Start\n\n```javascript\nimport EmailBuilder, { createYooptaEmailEditor } from '@yoopta/email-builder';\nimport type { YooptaEmailEditor, EmailTemplateOptions } from '@yoopta/email-builder';\n\n// Define your email template options\nconst templateOptions: EmailTemplateOptions = {\n  head: {\n    styles: [\n      {\n        id: 'font',\n        content: `body { font-family: Verdana, sans-serif; }`,\n      },\n    ],\n    meta: [{ content: 'width=device-width', name: 'viewport' }, { charset: 'UTF-8' }],\n  },\n  body: {\n    attrs: {\n      style: {\n        backgroundColor: '#fafafa',\n        width: '900px',\n        margin: '0 auto',\n      },\n    },\n  },\n  container: {\n    attrs: {\n      style: {\n        width: 600,\n        margin: '0 auto',\n      },\n    },\n  },\n};\n\nfunction EmailBuilderExample() {\n  // Initialize the editor\n  const editor = useMemo(() =\u003e createYooptaEmailEditor({ template: templateOptions }), []);\n  const [value, setValue] = useState({});\n\n  return (\n    \u003cEmailBuilder\n      editor={editor}\n      value={value}\n      onChange={setValue}\n      media={{\n        image: {\n          upload: async (file) =\u003e {\n            // Your image upload logic\n            return imageUrl;\n          },\n        },\n        // ... other media handlers\n      }}\n    /\u003e\n  );\n}\n```\n\n## Core Concepts\n\n### Email Template Options\n\nThe email template options define the structure and styling of your email:\n\n```javascript\ntype EmailTemplateOptions = {\n  head?: {\n    styles?: Array\u003c{\n      id?: string,\n      content: string,\n    }\u003e,\n    meta?: Array\u003c{\n      content?: string,\n      name?: string,\n      charset?: string,\n      httpEquiv?: string,\n      property?: string,\n    }\u003e,\n  },\n  body?: {\n    attrs?: {\n      style?: Record\u003cstring, string | number\u003e,\n      [key: string]: any,\n    },\n  },\n  container?: {\n    attrs?: {\n      style?: Record\u003cstring, string | number\u003e,\n      [key: string]: any,\n    },\n  },\n};\n```\n\n### Media Handlers\n\nThe email builder supports various media types through upload handlers:\n\n```javascript\ntype MediaUploaders = {\n  image?: {\n    upload: (file: File) =\u003e Promise\u003cstring\u003e,\n  },\n  video?: {\n    upload: (file: File) =\u003e Promise\u003cstring\u003e,\n    uploadPoster: (file: File) =\u003e Promise\u003cstring\u003e,\n  },\n  file?: {\n    upload: (file: File) =\u003e Promise\u003cstring\u003e,\n  },\n};\n```\n\n## Components\n\n### EmailBuilder\n\nThe main component that combines the editor and preview functionality.\n\n```ts\ntype EmailBuilderProps = {\n  editor: YooptaEmailEditor;\n  value: YooptaContentValue;\n  onChange: (value: YooptaContentValue) =\u003e void;\n  media?: MediaUploaders;\n  header?: null;\n  view?: 'editor' | 'preview';\n  readOnly?: boolean;\n  autoFocus?: boolean;\n  placeholder?: string;\n  className?: string;\n  style?: React.CSSProperties;\n  selectionBoxRoot?: HTMLElement | false;\n};\n```\n\n### EmailEditor\n\nThe editing interface component.\n\n```ts\ntype EmailEditorProps = {\n  id: string;\n  editor: YooEditor;\n  value: YooptaContentValue;\n  onChange: (value: YooptaContentValue) =\u003e void;\n  media?: MediaUploaders;\n  template?: EmailTemplateOptions;\n  readOnly?: boolean;\n  autoFocus?: boolean;\n  placeholder?: string;\n  selectionBoxRoot?: HTMLElement | false;\n};\n```\n\n### EmailPreview\n\nThe preview component that shows how the email will look.\n\n```ts\ntype EmailPreviewProps = {\n  editor: YooEditor;\n  value: YooptaContentValue;\n  template?: EmailTemplateOptions;\n  style?: React.CSSProperties;\n  className?: string;\n};\n```\n\n## Creating an Editor Instance\n\nUse `createYooptaEmailEditor` to create a new editor instance with email capabilities:\n\n```javascript\nconst editor = useMemo(() =\u003e createYooptaEmailEditor({\n  template: EmailTemplateOptions;\n}), []);\n```\n\n## Generating Email HTML\n\nThe editor instance provides a `getEmail` method to generate the final HTML:\n\n```javascript\nconst emailHTML = editor.getEmail(value, template?);\n```\n\n## Best Practices\n\n- **Email Template Structure**\n- Always include viewport meta tag\n- Define container width for better email client compatibility\n- Use web-safe fonts or include font definitions\n- **Styling**\n- Use inline styles for better email client compatibility\n- Test your email template across different email clients\n- Keep the template width between 600-800px for optimal viewing\n- **Media Handling**\n- Ensure media upload handlers return absolute URLs\n- Implement error handling for failed uploads\n- Consider image size optimization for emails\n\n## Example: Complete Email Builder Setup\n\n```javascript\nimport EmailBuilder, { createYooptaEmailEditor, type EmailTemplateOptions } from '@yoopta/email-builder';\n\nconst templateOptions: EmailTemplateOptions = {\n  head: {\n    styles: [\n      {\n        id: 'font',\n        content: `body { font-family: Verdana, sans-serif; }`,\n      },\n    ],\n    meta: [\n      { content: 'width=device-width', name: 'viewport' },\n      { charset: 'UTF-8' },\n      { content: 'IE=edge', httpEquiv: 'X-UA-Compatible' },\n      { content: 'telephone=no,address=no,email=no,date=no,url=no', name: 'format-detection' },\n      { content: 'light', name: 'color-scheme' },\n    ],\n  },\n  body: {\n    attrs: {\n      style: {\n        backgroundColor: '#fafafa',\n        width: '900px',\n        margin: '0 auto',\n      },\n    },\n  },\n  container: {\n    attrs: {\n      style: {\n        width: 600,\n        margin: '0 auto',\n      },\n    },\n  },\n};\n\nfunction EmailBuilderExample() {\n  const editor = useMemo(() =\u003e createYooptaEmailEditor({ template: templateOptions }), []);\n  const [value, setValue] = useState({});\n\n  // Example media upload handlers\n  const mediaUploaders = {\n    image: {\n      upload: async (file: File) =\u003e {\n        const url = await uploadImageToServer(file);\n        return url;\n      },\n    },\n    video: {\n      upload: async (file: File) =\u003e {\n        const url = await uploadVideoToServer(file);\n        return url;\n      },\n      uploadPoster: async (file: File) =\u003e {\n        const url = await uploadPosterToServer(file);\n        return url;\n      },\n    },\n    file: {\n      upload: async (file: File) =\u003e {\n        const url = await uploadFileToServer(file);\n        return url;\n      },\n    },\n  };\n\n  return (\n    \u003cdiv className=\"w-full p-10\"\u003e\n      \u003cEmailBuilder editor={editor} value={value} onChange={setValue} media={mediaUploaders} /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## API Reference\n\nFor detailed API reference, please refer to the TypeScript definitions included in the package.\n\n## Contributing\n\nContributions are welcome! Please read our contributing guide for details on our code of conduct and the process for submitting pull requests.\n\n## License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n## Roadmap\n\nMore and more Email components will be available soon.\nAs well as many other tools for more efficient work with the Email-Builder 😼\n\n## Sponsorship\n\nBut we can't do it without your support! If Yoopta has helped you in your work, please consider [sponsoring the project](https://github.com/sponsors/Darginec05). Your contribution is of great importance and helps us to continue to innovate. 💕\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoopta-editor%2Femail-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyoopta-editor%2Femail-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoopta-editor%2Femail-builder/lists"}