Email Template Editor

A complete React email template editor with Material-UI theming, drag-and-drop functionality, and real-time preview.

Features

• 🎨 Complete Material-UI Integration - Purple-themed design system
• 📧 Email Template Building - Drag-and-drop email components
• 🔧 Editable Template Names - Inline editing with auto-save
• 🎯 Variable Management - Dynamic content with variable extraction
• 📱 Responsive Design - Works on desktop and mobile
• 🌐 SSR Compatible - Works with Next.js and other SSR frameworks
• ⚡ Built with Vite - Fast development and optimized builds

Installation

npm install @devhiteshk/email-template-editor

Peer Dependencies

Make sure you have these peer dependencies installed:

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

Usage

Basic Usage

import React from 'react';
import { EmailTemplateEditor } from '@devhiteshk/email-template-editor';

function App() {
  const handleSave = (blockTemplate, htmlTemplate, variables, templateName) => {
    console.log('Template saved:', {
      blockTemplate,
      htmlTemplate,
      variables,
      templateName
    });
  };

  return (
    <EmailTemplateEditor
      templateName="My Newsletter"
      onSave={handleSave}
    />
  );
}

SSR Usage (Next.js)

import React from 'react';
import { ClientOnlyEmailTemplateEditor } from '@devhiteshk/email-template-editor';

export default function EmailBuilderPage() {
  const handleSave = (blockTemplate, htmlTemplate, variables, templateName) => {
    // Save to your backend
    fetch('/api/templates', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ blockTemplate, htmlTemplate, variables, templateName })
    });
  };

  return (
    <ClientOnlyEmailTemplateEditor
      templateName="Newsletter Template"
      onSave={handleSave}
    />
  );
}

With Initial Template

import React from 'react';
import { EmailTemplateEditor } from '@devhiteshk/email-template-editor';

const initialTemplate = {
  // Your template configuration
};

function App() {
  return (
    <EmailTemplateEditor
      template={initialTemplate}
      templateName="Welcome Email"
      onSave={(blockTemplate, htmlTemplate, variables, templateName) => {
        // Handle save
      }}
    />
  );
}

API Reference

EmailTemplateEditor Props

Prop	Type	Default	Description
template	TEditorConfiguration	undefined	Initial template configuration
templateName	string	"Untitled Template"	Initial template name
onSave	function	undefined	Callback when template is saved

onSave Callback

onSave?: (
  blockTemplate: TEditorConfiguration,
  htmlTemplate: string,
  variables: Record<string, string>,
  templateName: string
) => void

• blockTemplate: The block-based template configuration
• htmlTemplate: Generated HTML string
• variables: Extracted variables from the template
• templateName: Current template name

Components

EmailTemplateEditor

Main component for client-side applications.

ClientOnlyEmailTemplateEditor

SSR-safe wrapper that only renders on the client side. Use this for Next.js and other SSR frameworks.

Styling

The editor comes with a complete purple-themed Material-UI design system. All components are styled consistently and follow Material Design principles.

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT © [devhiteshk]

Support

If you encounter any issues, please file them on the GitHub issues page.