Email Newsletter Builder

!Email Newsletter Builder Banner

A professional, drag-and-drop email newsletter builder for React and Next.js applications. Built with Tailwind CSS, Redux Toolkit, and React DnD.


🚀 Live Demo

Features

- 🎨 Drag & Drop Interface: Intuitive WYSIWYG editor.
- 📱 Responsive Output: Generates HTML optimized for email clients.
- 🧩 Modular Components: Text, Image, Button, Product, Video, Countdown, Divider, Spacer, HTML, and Social blocks.
- 🏗️ Advanced Features: Custom HTML block and dynamic Merge Tags for personalization.
- 💅 Professional UI: Built with a clean, modern aesthetic using Tailwind CSS.
- 💾 State Managment: Powered by Redux Toolkit for robust undo/redo and persistence.
- 🔌 Backend Agnostic: Easily integrate with any backend (Node, PHP, Python, etc.).

Installation

Install the package via npm:

``bash
npm install email-newsletter-builder
`

You also need peer dependencies if not already installed:

`bash
npm install react react-dom @reduxjs/toolkit react-redux react-dnd react-dnd-html5-backend lucide-react tailwind-merge clsx
`

Quick Start

$3


Import the CSS globally in your application (e.g., in _app.tsx, layout.tsx, or main.tsx).

`tsx
import 'email-newsletter-builder/dist/index.css';
`

$3

You can preload a template by passing the initialState prop. This is perfect for loading data from an API or database.

`tsx
import { useState, useEffect } from 'react';
import { EmailEditor } from 'email-newsletter-builder';

const MyEditorPage = ({ templateId }) => {
const [initialData, setInitialData] = useState(null);

useEffect(() => {
// Fetch your template JSON from your API
fetch(/api/templates/${templateId})
.then(res => res.json())
.then(data => setInitialData(data.content));
}, [templateId]);

if (!initialData) return

;

return (
initialState={initialData}
onSave={async (data) => {
console.log('Saving updated template:', data);
}}
/>
);
};
`

$3


Use the EmailEditor component in your page.

`tsx
import { EmailEditor } from 'email-newsletter-builder';

export default function Page() {
return (



);
}
`

Integrating with a Backend

The editor is designed to be backend-agnostic. It provides callback props for all major actions (Save, Load, Upload Image, Send Test Email).

For a detailed walkthrough on connecting AWS S3, Supabase, Resend, or SendGrid, please read the Integration Guide.

For integrating with Django, PHP, or Laravel, see the Non-React Integration section.

$3

`tsx
// Save the JSON state to your DB
onSave={async (data) => await saveToDb(data)}

// Load templates from your DB
onLoad={async () => await fetchTemplates()}

// Handle image uploads (S3/Supabase)
onUploadImage={async (file) => await uploadToS3(file)}

// Handle test emails (Resend/SendGrid)
onSendTestEmail={async (email, html) => await sendTest(email, html)}

// [NEW] AI Features (Optional)
aiFeatures={{
onTextConnect: async (mode, context, prompt) => {
// Call your AI text API (OpenAI/Anthropic)
return "Generated text...";
},
onImageConnect: async (prompt) => {
// Call your image generation API (DALL-E/Midjourney)
return "https://image.url";
},
onLayoutConnect: async (prompt) => {
// Call your AI layout generator
return editorState;
},
onAnalyzeConnect: async (data, html) => {
// Call your analysis API
return { subjectLines: ["Suggesion 1"], spamScore: 0.5 };
}
}}
/>
`

$3


The builder now comes with a reference implementation for OpenAI (src/app/api/email-templates/ai/...).

1. AI Text Assistant: Rewrite, fix grammar, or expand text directly in the Properties Panel.
2. AI Image Generation: Generate images with DALL-E 3 from prompts within any image input.
3. Magic Layout Generator: Build entire newsletters from a single text description using GPT-4o.
4. Smart Subject Line Optimizer: Analyze content and suggest optimized subject lines.

To use the "Magic Build" features, simply add your OPENAI_API_KEY to .env.

$3

- CTA over Image: Support for background images on Sections, allowing text/buttons to be placed on top.
- Smart Drag & Drop: Visual guides, hover labels ("Text", "Button"), and quick "Add Section" buttons between elements.
- Media Gallery: Integrated media picker for background images.

📊 Data Structure

The editor persists its state as a JSON object (EditorState). You can programmatically generate or manipulate this JSON to create dynamic templates.

$3

`typescript
interface EditorState {
canvasSettings: {
width: number; // e.g. 600
backgroundColor: string; // e.g. "#ffffff"
fontFamily: string; // e.g. "Open Sans"
// ...
};
elements: EditorElement[]; // Ordered list of content blocks
}
`

$3

Each block in the elements array follows this pattern:

`json
{
"id": "unique-uuid-v4",
"type": "text", // or 'image', 'button', 'columns', etc.
"content": {
"text": "

Hello World

",
"url": "https://...",
"imageUrl": "..."
},
"style": {
"padding": "20px",
"backgroundColor": "transparent",
"textAlign": "left"
}
}
`

Exporting HTML

The library includes a utility to generate email-ready HTML from the editor state.

`typescript
import { generateHtml } from 'email-newsletter-builder';

// Assuming you have access to the editor state (e.g., via a custom save handler)
const html = generateHtml(editorState);
console.log(html);
`

Development

If you want to run this project locally to contribute:

`bash
git clone git@github.com:sunsoftny/email-newsletter-builder.git
cd email-newsletter-builder
npm install
npm run dev
``

License

MIT © Sunsoft NY