Canvas & Drag-and-Drop

The Canvas is the central area of the builder where fields are displayed and can be reordered.

Field Display

Each field on the canvas shows:

• Question text (or placeholder if blank)
• Field type indicator
• Drag handle (left side) for reordering
• Remove button (right side)
• Preview rendering of the field's input(s)
• Selection highlight (blue dashed border when selected)

Adding Fields

Fields are added from the ToolPanel (left sidebar on desktop, bottom drawer on mobile). The ToolPanel groups field types by category:

Category	Field Types
Text	Text, Long Text, Multi Text
Selection	Radio, Checkbox, Boolean, Dropdown, Multi-Select Dropdown
Rating	Rating, Ranking, Slider
Matrix	Single Matrix, Multi Matrix
Rich	Display, HTML, Image, Signature, Diagram
Organization	Section

Clicking a field type button adds a new field of that type to:

• The end of the form if no section is selected
• The end of the selected section if a section is currently selected

Drag-and-Drop Reordering

When dragEnabled={true} (default), fields can be reordered by dragging:

1. Grab the drag handle on the left side of any field
2. Drag up or down to reposition
3. Drop to place the field in its new position

The DnD system supports:

• Root-level reordering -- move fields within the main form
• Section nesting -- drag fields into or out of sections
• Touch + mouse -- works on both desktop and mobile devices

Disabling Drag-and-Drop

For better performance on slow devices or when reordering isn't needed:

<EsheetBuilder
  definition={myForm}
  onChange={handleChange}
  dragEnabled={false}
/>

Field Selection

Click any field on the canvas to select it:

• Selected field gets a blue dashed border
• The EditPanel (right sidebar) opens to show that field's properties
• On mobile, tapping a field opens the EditPanel as a bottom drawer

Click the canvas background or a different field to change selection.

Sections

Section fields are containers that can hold other fields:

• Sections render with a title bar and a bordered area for children
• Fields can be added directly into a section via the ToolPanel
• Sections support recursive nesting (sections inside sections)
• Conditional visibility applied to a section hides all children

Conditional Visibility Preview

Fields with visible rules show/hide in real-time as you fill out the form in Preview mode. In Build mode, all fields are always shown (with a visual indicator for conditional fields where applicable).