sf9-email-editor

A 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.

Features

- 🎨 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

Installation

``bash
npm install sf9-email-editor
`

$3

Make sure you have the required peer dependencies installed:

`bash
npm install react react-dom @mui/material @mui/icons-material @emotion/react @emotion/styled
`

Basic Usage

`tsx
import React from "react";
import EmailEditor from "sf9-email-editor";

function App() {
return (
cloudServiceConfiguration={{
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);
}}
/>
);
}
`

Configuration Options

$3

| 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) |

$3

`tsx
interface S3Configuration {
accessKeyId: string;
secretAccessKey: string;
endpoint: string; // e.g., 'https://s3.amazonaws.com'
bucket: string;
region?: string; // default: 'us-east-1'
}
`

$3

`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;
}
`

Advanced Usage

$3

`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 ;
}
`

$3

`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 (
onSave={handleSave}
onSendTest={handleSendTest}
enableCloudStorage={false} // Use your own storage
/>
);
}
`

$3

`tsx
import EmailEditor from "sf9-email-editor";
import welcomeTemplate from "./templates/welcome";

function App() {
return ;
}
`

Development

$3

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
`

$3

Build the library:

`bash
npm run build:lib
`

This generates:

- dist/index.mjs - ES module
- dist/index.cjs - CommonJS module
- dist/index.d.ts - TypeScript declarations
- dist/style.css - CSS styles

Email Provider Setup

$3

1. Enable 2-factor authentication
2. Generate an App Password: https://myaccount.google.com/apppasswords
3. Use the App Password in emailConfiguration.password

$3

`tsx
emailConfiguration={{
smtpHost: 'smtp.office365.com',
smtpPort: 587,
secure: false,
username: 'your@outlook.com',
password: 'your-password',
fromEmail: 'your@outlook.com',
}}
`

$3

`tsx
emailConfiguration={{
smtpHost: 'smtp.mail.yahoo.com',
smtpPort: 465,
secure: true,
username: 'your@yahoo.com',
password: 'your-app-password',
fromEmail: 'your@yahoo.com',
}}
`

S3-Compatible Storage

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',
}}
``

License

MIT

Credits

Built on top of EmailBuilder.js by Waypoint.