A customizable email template editor component built on EmailBuilder.js
npm install sf9-email-editorA customizable React email template editor component built on top of the powerful EmailBuilder.js framework by Waypoint. This package allows you to easily integrate a full-featured email editor into your applications.
- ๐จ Drag & Drop Interface - Intuitive visual editor for creating email templates
- ๐ฑ Responsive Preview - Desktop and mobile preview modes
- ๐ง Customizable - Theme, styling, and configuration options
- โ๏ธ Cloud Storage - S3-compatible storage for saving/loading templates
- ๐ง Email Testing - Send test emails directly from the editor
- ๐งช Test Data - Variable templating with preview mode
- ๐ฏ Block System - Rich set of pre-built email components
- ๐ฆ Export Options - JSON and HTML export capabilities
``bash`
npm install sf9-email-editor
Make sure you have the required peer dependencies installed:
`bash`
npm install react react-dom @mui/material @mui/icons-material @emotion/react @emotion/styled
`tsx
import React from "react";
import EmailEditor from "sf9-email-editor";
function App() {
return (
accessKeyId: "your-access-key",
secretAccessKey: "your-secret-key",
endpoint: "https://s3.amazonaws.com",
bucket: "your-bucket-name",
region: "us-east-1",
}}
emailConfiguration={{
smtpHost: "smtp.gmail.com",
smtpPort: 587,
secure: false,
username: "your@email.com",
password: "your-app-password",
fromEmail: "your@email.com",
fromName: "Your Company",
}}
onSave={(templateName, document) => {
console.log("Template saved:", templateName);
}}
/>
);
}
`
| Prop | Type | Required | Description |
| --------------------------- | ----------------------------------- | -------- | ----------------------------------------- |
| cloudServiceConfiguration | S3Configuration | No | S3 or S3-compatible storage configuration |emailConfiguration
| | EmailConfiguration | No | SMTP email server configuration |theme
| | Theme | No | Custom Material-UI theme |styleConfiguration
| | StyleConfiguration | No | Simple style customization |initialDocument
| | any | No | Initial template/document to load |onSave
| | (name: string, doc: any) => void | No | Callback when template is saved |onLoad
| | (name: string) => void | No | Callback when template is loaded |onSendTest
| | (email: string, doc: any) => void | No | Callback when test email is sent |showSamplesDrawer
| | boolean | No | Show samples drawer (default: true) |showInspectorDrawer
| | boolean | No | Show inspector drawer (default: true) |enableCloudStorage
| | boolean | No | Enable S3 features (default: true) |enableEmailSending
| | boolean | No | Enable email features (default: true) |
`tsx`
interface S3Configuration {
accessKeyId: string;
secretAccessKey: string;
endpoint: string; // e.g., 'https://s3.amazonaws.com'
bucket: string;
region?: string; // default: 'us-east-1'
}
`tsx`
interface EmailConfiguration {
smtpHost: string; // e.g., 'smtp.gmail.com'
smtpPort: number; // e.g., 587
secure: boolean; // Use TLS
username: string;
password: string; // For Gmail, use App Password
fromEmail: string;
fromName?: string;
}
`tsx
import { createTheme } from "@mui/material/styles";
import EmailEditor from "sf9-email-editor";
const customTheme = createTheme({
palette: {
primary: {
main: "#1976d2",
},
secondary: {
main: "#dc004e",
},
},
});
function App() {
return
}
`
`tsx
import EmailEditor from "sf9-email-editor";
function App() {
const handleSave = (templateName: string, document: any) => {
// Save to your backend
fetch("/api/templates", {
method: "POST",
body: JSON.stringify({ name: templateName, data: document }),
});
};
const handleSendTest = (recipientEmail: string, document: any) => {
// Track test email sends
console.log(Test email sent to ${recipientEmail});
};
return (
onSendTest={handleSendTest}
enableCloudStorage={false} // Use your own storage
/>
);
}
`
`tsx
import EmailEditor from "sf9-email-editor";
import welcomeTemplate from "./templates/welcome";
function App() {
return
}
`
To run the demo application:
`bash`
npm install
npm run dev:full # Runs backend (port 3001) and frontend (port 5173)
Or run separately:
`bash`
npm run server # Backend API on http://localhost:3001
npm run dev # Frontend on http://localhost:5173
Build the library:
`bash`
npm run build:lib
This generates:
- dist/index.mjs - ES moduledist/index.cjs
- - CommonJS moduledist/index.d.ts
- - TypeScript declarationsdist/style.css
- - CSS styles
1. Enable 2-factor authentication
2. Generate an App Password: https://myaccount.google.com/apppasswords
3. Use the App Password in emailConfiguration.password
`tsx`
emailConfiguration={{
smtpHost: 'smtp.office365.com',
smtpPort: 587,
secure: false,
username: 'your@outlook.com',
password: 'your-password',
fromEmail: 'your@outlook.com',
}}
`tsx`
emailConfiguration={{
smtpHost: 'smtp.mail.yahoo.com',
smtpPort: 465,
secure: true,
username: 'your@yahoo.com',
password: 'your-app-password',
fromEmail: 'your@yahoo.com',
}}
This package supports AWS S3 and any S3-compatible storage service (DigitalOcean Spaces, MinIO, Wasabi, etc.):
`tsx``
// DigitalOcean Spaces example
cloudServiceConfiguration={{
accessKeyId: 'your-key',
secretAccessKey: 'your-secret',
endpoint: 'https://nyc3.digitaloceanspaces.com',
bucket: 'your-space-name',
region: 'us-east-1',
}}
MIT
Built on top of EmailBuilder.js by Waypoint.