Email Editor for React

A React-based email template editor component that allows users to create and customize email templates through a visual interface. This component can be embedded in any React application.

Features

• Visual email template builder
• Rich set of components (text, buttons, images, dividers, containers, columns, etc.)
• Markdown support for text editing
• Responsive email templates
• Embeddable into React applications

Installation

npm install @kontakto/email-template-editor

Usage

Embedding into existing project

You can easily embed the EmailEditor into any React application:

import { EmailEditor } from '@kontakto/email-template-editor';

function MyApp() {
  return (
    <div className="my-container">
      <EmailEditor 
        persistenceEnabled={true}
        minHeight="80vh"
      />
    </div>
  );
}

Available Props

Prop	Type	Default	Description
minHeight	string	'100vh'	Sets the minimum height of the editor container
persistenceEnabled	boolean	false	When true, enables save functionality and shows save buttons. Requires callbacks for persistence operations.
samplesDrawerEnabled	boolean	true	Controls whether the templates/samples drawer is shown
drawerEnterDuration	number	225	Duration for drawer enter transition (ms)
drawerExitDuration	number	225	Duration for drawer exit transition (ms)
initialTemplate	object	-	Initial template to load when editor first mounts
initialTemplateId	string	-	ID of the initial template
initialTemplateName	string	-	Name of the initial template
onSave	function	-	Callback when template is saved: (template) => void
onChange	function	-	Callback when template changes: (template) => void
loadSamples	function	-	Loads sample templates: () => Promise<SampleTemplate[]>
loadTemplates	function	-	Loads user templates: () => Promise<SampleTemplate[]>
loadTemplate	function	-	Loads specific template: (id) => Promise<Template>
deleteTemplate	function	-	Deletes a template: (id) => void
copyTemplate	function	-	Copies a template: (name, content) => void
saveAs	function	-	Saves template with new name: (name, content) => Promise<{id, name}>
theme	object	theme.ts	Custom theme for the EmailEditor, must be a Material UI theme object

Imperative API

You can access the EmailEditor's methods using a ref:

import { EmailEditor } from 'kontakto-email-editor';
import { useRef } from 'react';

function MyApp() {
  const editorRef = useRef(null);
  
  const handleSave = () => {
    const template = editorRef.current.saveTemplate();
    console.log('Saved template:', template);
  };
  
  const handleLoad = (template) => {
    editorRef.current.loadTemplate(template);
  };
  
  const handleGetCurrent = () => {
    const current = editorRef.current.getTemplate();
    console.log('Current template:', current);
  };
  
  return (
    <div>
      <button onClick={handleSave}>Save</button>
      <button onClick={handleGetCurrent}>Get Current</button>
      <EmailEditor ref={editorRef} minHeight="600px" />
    </div>
  );
}

Stand-alone version using Vite

This project includes a standalone version that can be run using Vite:

# Install dependencies
npm install

# Run the development server
npm run dev

This will start a development server with the EmailEditor running as a standalone application that uses browsers local storage to save and load templates.

Theming

The EmailEditor component has the CssBaseline and ThemeProvider components from Material UI applied by default. However, if you need to supply a custom theme, you can do so by passing a custom theme to the EmailEditor component. The theme should be a Material UI theme object.

Development

To run this locally:

1. Clone the repository
2. Install dependencies:

   npm install
   

3. Start the development server:

   npm run dev
   

4. Visit http://localhost:5173/ in your browser

Project Structure

• src/blocks/ - Email components (text, images, buttons, etc.)
• src/editor/ - Core editor functionality
• src/app/ - Main application components
• src/email-builder/ - Email template rendering
• src/core/ - Core utilities and types

Technologies

• React
• TypeScript
• Material UI
• Zustand for state management
• Vite as the build tool
• Marked and Highlight.js for markdown and code highlighting

Email-Template-Editor

Licensed under the MIT License. See LICENSE for details.

This project, Email-Template-Editor, is a substantial derivative work based on an original MIT-licensed project, email-builder-js by Waypoint (Metaccountant, Inc.). email-builder-js is a free and open-source block-based email template builder designed for developers to create emails with JSON or HTML output. While the original code was created by Waypoint, this project has been significantly refactored with:

1. Restructuring of the project files and directories.
2. Implementation of how external context is handled.
3. Changes to the purpose of the project to be integrated and embedded into other React based projects.

Original Code from Waypoint (Metaccountant, Inc.)

The following parts (not limited to) of this project are derived from the original MIT-licensed project email-builder-js by Waypoint:

• The parsing logic is based on Waypoint's original block-based parsing approach
• The concepts for the blocks
• The concepts for the editor
• The concepts of the builder

Acknowledgements

This project gratefully acknowledges the original work by Waypoint (Metaccountant, Inc.) on email-builder-js as the foundation upon which this version was built.