Skip to main content
The <EditorSidebar /> provides the drag-and-drop interface for adding components to the email, as well as a tree view of the current document structure.

​
Features

  • Components Tab: Browse available components grouped by category (Layout, Content, Utility).
  • Layers Tab: View and manage the hierarchy of the email document. Reorder elements via drag-and-drop.
  • Drag & Drop: Drag components from the sidebar onto the canvas to add them.

​
Usage

If you are using <EmailEditor />, the sidebar is included by default. You can also use it standalone if you are building a custom editor layout. 
import {
  EditorSidebar,
  EditorProvider,
  DragDropProvider,
} from "@open-email/editor";

function CustomLayout() {
  return (
    <EditorProvider>
      <DragDropProvider>
        <div className="flex">
          <EditorSidebar />
          {/* ... canvas ... */}
        </div>
      </DragDropProvider>
    </EditorProvider>
  );
}
Note: For drag-and-drop to work in a custom layout, you must wrap your application in a <DragDropProvider /> inside the <EditorProvider />.

​
Props

​
registry
ComponentRegistry
The component registry to use. Defaults to the internal defaultRegistry.
​
defaultTab
'components' | 'layers'
The tab to show initially. Defaults to “components”.