Skip to main content
The <EmailEditor /> component is the heart of the library. It acts as the orchestrator, wrapping the editor engine and layout components.

​
Usage

import { EmailEditor } from "@open-email/editor";

export default function MyEditor() {
  return (
    <div style={{ height: "100vh" }}>
      <EmailEditor />
    </div>
  );
}

​
Props

​
initialDocument
EmailDocument
The initial document to load.
​
onChange
(document: EmailDocument) => void
Callback fired when the document changes.
​
config
EditorConfig
Configuration object for the editor.
​
style
CSSProperties
Inline styles for the editor container.
​
className
string
Custom class name for the editor container.

​
Configuration (config)

The config prop allows you to toggle features and customize the editor behavior. 
<EmailEditor
  config={{
    showSidebar: true,
    showToolbar: true,
    showProperties: true,
    theme: "light", // or "dark"
  }}
/>

​
Slot Overrides

You can replace parts of the editor UI with your own components using slot props.
​
toolbar
ReactNode | false
Replace or hide the toolbar.
​
sidebar
ReactNode | false
Replace or hide the sidebar.
​
propertiesPanel
ReactNode | false
Replace or hide the properties panel.
​
canvas
ReactNode
Replace the canvas area (advanced).
​
toolbarActions
ReactNode
Render additional content in the toolbar (e.g., a “Send Test” button).