# Interface Overview

The Modeler uses a **four-panel layout** designed for efficient workflow editing.
Each panel has a specific role and they work together to provide a seamless
experience.

## Layout

```
┌─────────────────────────────────────────────────────────────────────┐
│                           Toolbar                                   │
├──────────────┬──────────────────────┬────────────┬──────────────────┤
│  Component   │                      │   Replay   │    Property      │
│  Panel       │      Canvas          │   Panel    │    Panel         │
│  (drag/drop) │    (React Flow)      │ (execution)│    (forms)       │
│              │                      │            │                  │
└──────────────┴──────────────────────┴────────────┴──────────────────┘
```

![Full modeler interface with all four panels visible](assets/screenshots/interface-overview.png){ .screenshot }

## The four panels

### Component Panel (left)

The **Component Panel** is your library of available workflow components. It
lists all events, actions, conditions, gateways, and subprocesses that the
model owner makes available.

- **Search**: Filter components by name using the search field at the top.
- **Categories**: Components are grouped by type (Events, Actions, Conditions, etc.).
- **Favorites**: Frequently used components appear at the top of each category with a star indicator.
- **Drag & drop**: Drag any component from the panel onto the canvas to add it.
- **Documentation**: Click the documentation icon next to a component to view its documentation.

[Learn more about the Component Panel](component-panel.md)

### Canvas (center)

The **Canvas** is the main editing area where you build your workflow visually.
It is powered by React Flow and provides:

- **Node placement**: Drag components from the panel or use quick-add buttons.
- **Edge connections**: Click an output port and drag to an input port to create connections.
- **Panning & zooming**: Drag the background to pan; use the mouse wheel to zoom.
- **Selection**: Click to select, Shift+click for multi-select, Shift+drag for box selection.
- **Snap to grid**: Nodes snap to a 20px grid for clean alignment.

[Learn more about the Canvas](canvas.md)

### Replay Panel (center-right)

The **Replay Panel** lets you visualize past workflow executions directly on the
canvas. It appears between the canvas and the property panel.

- **Load execution data**: Select an event node and load its execution history.
- **Step through**: Navigate execution steps one by one to see which path was taken.
- **Token inspection**: View the data (tokens) available at each step.
- **Live testing**: Trigger a test execution and see results immediately.

[Learn more about the Replay Panel](replay-panel.md)

### Property Panel (right)

The **Property Panel** appears automatically when you select a node or edge. It
provides:

- **Label editing**: Change the display name of any element.
- **Configuration form**: Dynamic form fields specific to the selected component.
- **Annotations**: Add documentation notes to any element.
- **Component info**: View metadata like plugin ID, provider, and documentation links.

[Learn more about the Property Panel](property-panel.md)

### Toolbar (top)

The **Toolbar** runs across the top and provides global actions:

- **Model title**: Shows the model name with an unsaved-changes indicator.
- **Quick-add event**: Add a new event node from the toolbar.
- **Flow filter**: Show or hide individual flows when a model has multiple events.
- **Context selector**: Filter available components by workflow context.
- **Search**: Toggle the search bar with `Ctrl+F`.
- **Dark mode**: Switch between light and dark themes.
- **Zoom controls**: Zoom in, zoom out, and fit to screen.
- **Copy/Paste**: Clipboard operations for selected elements.
- **Export**: Export the model as Recipe, Archive, JSON, or SVG.
- **View mode**: Toggle between fullscreen and restored display.
- **Save**: Save the current model.

[Learn more about the Toolbar](toolbar.md)

## Panel resizing

Both the Component Panel and the Property Panel can be resized by dragging
their edges. This lets you adjust the layout to focus on the canvas or on
configuration, depending on your current task.

## Responsive behavior

The modeler is designed to work in full-screen browser windows. For the best
experience, use a screen width of at least 1280px. Panels will adapt to
available space, and touch targets are sized for touch devices (minimum
44x44px).

On narrower screens, the toolbar collapses lower-priority buttons into an
overflow dropdown menu. See [Toolbar](toolbar.md) for details on responsive
behavior.

The modeler also supports [View Modes](../features/view-modes.md) -- you can
switch between fullscreen and a resizable floating window.
