EEmail Editor

Note (2026-03-22): Data Brain has been archived. Platform packages now consume the DatabaseAdapter interface from @marlinjai/data-table-core (pair with @marlinjai/data-table-adapter-d1 or @marlinjai/data-table-adapter-prisma). The legacy DataBrain*Adapter classes are deprecated. The editor core layer is unaffected.

Email Editor

A visual drag-and-drop email template builder built on MobX State Tree with MJML (Mailjet Markup Language) export, plus a full-featured email marketing platform.

Platform Overview

The Email Editor is a pnpm monorepo with 12 packages organized into two layers:

Editor Layer (4 packages)

PackageDescription
@marlinjai/email-editor-coreFramework-agnostic engine: MST state, schema, block registry, MJML compiler
@marlinjai/email-editor-uiReact components: 3-panel editor, renderer, inspector, sidebar
@marlinjai/email-editor-blocks14 block types + 35 prebuilt section templates
@marlinjai/email-editorHigh-level API: createEditor() and EmailEditorReact

Platform Layer (8 packages)

PackageDescription
@marlinjai/email-templatesTemplate CRUD, versioning, dashboard UI
@marlinjai/email-contactsContacts, CSV import, segments, merge fields, unsubscribe
@marlinjai/email-campaignsCampaign wizard, scheduling, A/B testing, send orchestration
@marlinjai/email-send-adapter-resendResend email provider adapter
@marlinjai/email-analyticsOpen/click/bounce tracking, heatmaps, engagement scoring
@marlinjai/email-teamsMulti-user workspaces, roles, approval workflows, brand kit
@email-editor/sharedCross-package infrastructure: database adapter context, auth, workspace context (private, workspace-only, not published to npm)

Block Types

The editor ships with 14 block types across four categories:

CategoryBlocks
TextText (rich text via TipTap)
MediaImage, Button, Hero, Carousel, Social
LayoutDivider, Spacer, Accordion, Navbar, Table, Raw HTML
BrandBranded Header, Branded Footer (locked)

Plus 35 prebuilt section templates (hero sections, feature grids, CTAs, footers, etc.).

SaaS Dashboard

The platform packages combine to form a complete SaaS email marketing dashboard with:

  • Template management with version history
  • Contact lists with CSV import and segmentation
  • Campaign creation with A/B testing and scheduling
  • Real-time analytics with click heatmaps and engagement scoring
  • Team workspaces with role-based access and approval workflows
  • Automation sequences with conditional branching

Features

  • MobX State Tree -- Fine-grained reactivity for instant editing (<16ms updates)
  • MJML Compilation -- Server-side rendering to email-safe HTML
  • Undo/Redo -- Full history management via MST snapshots
  • Drag & Drop -- Intuitive block placement with dnd-kit
  • Device Preview -- Desktop and mobile views
  • Theming -- Customizable colors and fonts
  • Type Safe -- Full TypeScript support with Zod validation
  • Database Agnostic : All platform adapters consume the DatabaseAdapter interface from @marlinjai/data-table-core (works with D1, Prisma, or any custom adapter)

Quick Start

pnpm add @marlinjai/email-editor @marlinjai/email-editor-core react react-dom
'use client';

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

function App({ initial }: { initial?: TemplateSnapshotOut }) {
  const [doc, setDoc] = useState(initial);

  // The editor fills its container, so the container needs a height.
  return (
    <div style={{ height: '80vh' }}>
      <EmailEditorReact
        initialTemplate={initial}
        onChange={setDoc}
        onSave={() =>
          fetch('/api/save', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(doc),
          })
        }
      />
    </div>
  );
}

The editor is uncontrolled: initialTemplate is read once on mount, and onChange receives the whole document (debounced by 300 ms). The stylesheet is scoped under .ee-root, so it is safe beside Tailwind CSS 4 and needs no Tailwind configuration. Compile the document to HTML on your server; see the Integration guide and packages/editor/README.md for Next.js setup, server compilation and the onRequestImage image picker hook.

Documentation