Email Editor Diagrams

Package Layering

The Email Editor is a layered monorepo. Each layer depends only on layers below it.

graph TB
subgraph "Consumer Layer"
APP[Your App]
end

subgraph "Convenience Layer"
EDITOR["@marlinjai/email-editor<br/>(High-level API)"]
end

subgraph "Implementation Layer"
UI["@marlinjai/email-editor-ui<br/>(React Components)"]
BLOCKS["@marlinjai/email-editor-blocks<br/>(Block Definitions)"]
end

subgraph "Foundation Layer"
CORE["@marlinjai/email-editor-core<br/>(Framework-Agnostic Engine)"]
end

APP --> EDITOR
EDITOR --> UI
EDITOR --> BLOCKS
UI --> CORE
BLOCKS --> CORE

MST Model Hierarchy

State is managed with MobX State Tree. The core package owns the entire state tree.

graph TD
ROOT[RootStore] --> TEMPLATE[TemplateModel]
ROOT --> UI_STATE[EditorUIStore]
TEMPLATE --> META[TemplateMetadataModel]
TEMPLATE --> SECTIONS["sections[]"]
SECTIONS --> SECTION[SectionModel]
SECTION --> COLUMNS["columns[]"]
COLUMNS --> COLUMN[ColumnModel]
COLUMN --> BLOCKS["blocks[]"]
BLOCKS --> BLOCK[BlockModel]

Data Flow

No MJML compilation during editing — only on export. This gives instant (<16ms) visual feedback.

sequenceDiagram
participant User
participant UI as UI (React)
participant Store as MST Store
participant Model as MST Model

User->>UI: Change font color
UI->>Store: block.updateStyle('color', '#ff0000')
Store->>Model: MST action updates property
Model-->>UI: MobX reactivity triggers re-render
UI-->>User: Instant visual update (<16ms)

Note over User,Model: No MJML compilation during editing!

User->>UI: Click Export
UI->>Store: Get template snapshot
Store-->>UI: Template data
UI->>Server: POST /api/compile
Server->>MJML: Compile to HTML
MJML-->>Server: HTML output
Server-->>UI: Download HTML

Dependency Graph

graph BT
CORE["core<br/>(0 React deps)"]
BLOCKS["blocks<br/>(React for TipTap)"]
UI["ui<br/>(React)"]
EDITOR["editor<br/>(React)"]

BLOCKS --> CORE
UI --> CORE
EDITOR --> CORE
EDITOR --> UI
EDITOR --> BLOCKS

style CORE fill:#90EE90
style BLOCKS fill:#FFE4B5
style UI fill:#FFE4B5
style EDITOR fill:#ADD8E6

Legend: Green = framework-agnostic | Orange = React-specific | Blue = convenience wrapper

For full architecture details, see the Email Editor Architecture page.