Drag & Drop Editor

Intuitive visual editor for building emails without code. Drag blocks, reorder content, and customize everything with simple mouse interactions.

Powered by @dnd-kit

Our drag-and-drop system uses @dnd-kit, a modern, accessible drag-and-drop library that provides smooth interactions and keyboard support.

How Drag & Drop Works

The drag-and-drop editor allows you to build emails visually:

  1. Add Blocks: Click blocks from the sidebar to add them to your email
  2. Drag to Reorder: Click and drag blocks to reorder them vertically
  3. Visual Feedback: See where blocks will be placed as you drag
  4. Drop to Place: Release to place the block in the new position
  5. Auto-Save: Changes are saved automatically as you work

Drag Methods

Mouse Drag

Click and hold on a block, then drag it to a new position. Visual indicators show where the block will be placed.

Drag Handles

Use the drag handles (grip icons) on blocks to initiate dragging. This provides more precise control.

Arrow Buttons

Use the up/down arrow buttons on blocks to move them one position at a time. Perfect for fine adjustments.

Keyboard Support

Use arrow keys when a block is selected to move it up or down. Full keyboard accessibility for all users.

Visual Feedback

The editor provides clear visual feedback during drag operations:

  • Drag Preview: See a preview of the block being dragged
  • Drop Indicators: Visual lines show where the block will be placed
  • Hover States: Blocks highlight when you hover over drop zones
  • Selection States: Selected blocks are clearly highlighted

Block Management

Each block has management controls accessible via the block editor:

  • Move Up: Move block one position up
  • Move Down: Move block one position down
  • Duplicate: Create a copy of the block
  • Delete: Remove the block from your email
  • Edit: Click to open the block editor in the sidebar

Column Layouts

Drag and drop also works within multi-column layouts:

  • Add blocks to specific columns by clicking the column
  • Drag blocks between columns
  • Reorder blocks within columns
  • Visual indicators show column boundaries

Pro Tips

  • Use drag handles for more precise control when reordering blocks
  • Arrow buttons are great for small adjustments
  • Keyboard navigation is fully supported for accessibility
  • Changes save automatically, so you can experiment freely

Related Documentation