Skip to main content
The <PropertiesPanel /> allows users to edit the properties of the currently selected component. It dynamicallly generates form fields based on the component’s PropertySchema.

​
Features

  • Dynamic Fields: Automatically renders text inputs, color pickers, toggle switches, and select dropdowns based on the selected component type.
  • Grouping: Organizes properties into groups (Content, Style, Layout) for better usability.
  • Live Updates: Changes are reflected immediately in the editor canvas.

​
Usage

Like the sidebar, this is included in <EmailEditor /> but can be used standalone. 
import { PropertiesPanel, useEditor } from "@open-email/editor";

function CustomLayout() {
  return (
    <EditorProvider>
      <div className="flex">
        {/* ... canvas ... */}
        <PropertiesPanel />
      </div>
    </EditorProvider>
  );
}

​
Supported Field Types

The panel supports the following field types defined in PropertySchema:
  • text: Simple text input.
  • textarea: Multi-line text input.
  • number: Numeric input.
  • color: Color picker with hex input.
  • select: Dropdown menu.
  • toggle: Boolean checkbox.
  • url: Input optimized for URLs.
  • spacing: (Coming soon) Spacing controls for padding/margin.