EERP Suite

Email Editor Quickstart

Set up the Email Editor in a React project in under 5 minutes.

Installation

npm install @marlinjai/email-editor
# or
pnpm add @marlinjai/email-editor

Basic React Integration

import { EmailEditorReact } from '@marlinjai/email-editor/react';
import '@marlinjai/email-editor/styles.css';

function App() {
  return (
    <EmailEditorReact
      initialTemplate={myTemplate}
      onChange={(template) => console.log(template)}
      onExport={(template) => sendToServer(template)}
    />
  );
}

The EmailEditorReact component includes everything: sidebar, canvas, property inspector, and block library.

Server-Side MJML Compilation

The editor uses MST (MobX State Tree) for instant in-browser editing. MJML is only compiled on export — server-side:

// api/compile.ts
import { MJMLExporter } from '@marlinjai/email-editor-core/server';

const exporter = new MJMLExporter();

export async function POST(request: Request) {
  const template = await request.json();
  const { html, mjml, errors } = exporter.export(template);
  return Response.json({ html, mjml, errors });
}

Why server-only? MJML is a large dependency (100-300ms compile time). Keeping it server-side means the client bundle stays small and editing stays instant (<16ms).

Architecture Overview

The editor is split into four packages:

PackagePurpose
@marlinjai/email-editorHigh-level wrapper (start here)
@marlinjai/email-editor-uiReact components
@marlinjai/email-editor-blocksBlock definitions and templates
@marlinjai/email-editor-coreFramework-agnostic MST engine

The core package has no React dependency — it can work with Vue, Svelte, or vanilla JS.

Next Steps