EERP Suite

Email Editor Diagrams

Package Layering

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

Foundation Layer

Implementation Layer

Convenience Layer

Consumer Layer

Your App

@marlinjai/email-editor
(High-level API)

@marlinjai/email-editor-ui
(React Components)

@marlinjai/email-editor-blocks
(Block Definitions)

@marlinjai/email-editor-core
(Framework-Agnostic Engine)

Foundation Layer

Implementation Layer

Convenience Layer

Consumer Layer

Your App

@marlinjai/email-editor
(High-level API)

@marlinjai/email-editor-ui
(React Components)

@marlinjai/email-editor-blocks
(Block Definitions)

@marlinjai/email-editor-core
(Framework-Agnostic Engine)

MST Model Hierarchy

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

RootStore

TemplateModel

EditorUIStore

TemplateMetadataModel

sections[]

SectionModel

columns[]

ColumnModel

blocks[]

BlockModel

RootStore

TemplateModel

EditorUIStore

TemplateMetadataModel

sections[]

SectionModel

columns[]

ColumnModel

blocks[]

BlockModel

Data Flow

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

MJMLServerMST ModelMST StoreUI (React)UserMJMLServerMST ModelMST StoreUI (React)UserNo MJML compilation during editing!Change font colorblock.updateStyle('color', 'MST action updates propertyMobX reactivity triggers re-renderInstant visual update (<16ms)Click ExportGet template snapshotTemplate dataPOST /api/compileCompile to HTMLHTML outputDownload HTML
MJMLServerMST ModelMST StoreUI (React)UserMJMLServerMST ModelMST StoreUI (React)UserNo MJML compilation during editing!Change font colorblock.updateStyle('color', 'MST action updates propertyMobX reactivity triggers re-renderInstant visual update (<16ms)Click ExportGet template snapshotTemplate dataPOST /api/compileCompile to HTMLHTML outputDownload HTML

Dependency Graph

core
(0 React deps)

blocks
(React for TipTap)

ui
(React)

editor
(React)

core
(0 React deps)

blocks
(React for TipTap)

ui
(React)

editor
(React)

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

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