The Editor Panel is a collapsible right-side panel that displays configuration options for the currently selected workflow block. It provides a context-sensitive interface for editing block names, configuring sub-block parameters, managing connections, and accessing block-specific settings like loop iterations or parallel execution counts.
For information about the individual input components used within the Editor Panel (credential selectors, tool inputs, etc.), see Block Configuration UI. For information about panel state management shared across the Variables and Chat panels, see Workspace Navigation & Sidebar.
The Editor Panel serves as the primary configuration interface for workflow blocks. When a user selects a block on the canvas, the panel populates with that block's editable properties. The panel adapts its content based on block type:
SubflowEditor. apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx:99-102PreviewWorkflow. apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx:104-106The panel enforces permission-based editing restrictions, supports collaborative real-time updates, and integrates with the AI-powered "Wand" generation system. apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx:112-120
Sources: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx:84-186, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx:173-185
The Editor Panel dynamically generates form fields based on the block's SubBlockConfig definitions. The rendering pipeline applies visibility rules, canonical parameter swapping, and advanced mode filtering.
The following diagram illustrates how block definitions are transformed into interactive UI elements.
Sources: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx:95-98, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx:177-185, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx:90-105, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate.ts:53-60
The SubBlock component serves as a polymorphic wrapper that dispatches to specific input components based on the type field in SubBlockConfig. apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx:12-52
The system supports a wide array of specialized inputs to handle complex workflow data:
Sources: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx:12-52, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx:21-79, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx:114-130
The Editor Panel integrates with the AI-powered "Wand" system, allowing users to generate content for fields using natural language prompts. Components like MessagesInput and ShortInput implement onWandTrigger to handle these interactions. apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx:191-195
The WandPromptBar component provides the interface for entering generation prompts, handling animations, and managing streaming states. apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx:19-29
Sources: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx:101-195, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx:79-137
The Editor Panel implements complex logic to manage field dependencies and conditional visibility.
The useDependsOnGate hook centralizes the logic for disabling or hiding fields based on other field values. apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate.ts:52-56
The isFieldRequired function evaluates whether a field must be filled based on the current context. apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx:118
required: true. apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx:120not and and operators for nested requirements. apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx:145-158Sources: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate.ts:157-183, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx:118-165
Field values in the Editor Panel are managed via the useSubBlockValue hook, which synchronizes local UI state with the global SubBlockStore and collaborative backend. apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value.ts:31-36
activeWorkflowId to ensure data is loaded for the correct context. apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value.ts:43collaborativeSetSubblockValue, which handles socket communication and database persistence through the OperationQueue. apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value.ts:111-117useCollaborativeWorkflow hook listens for remote onSubblockUpdate events and applies them to the local SubBlockStore. apps/sim/hooks/use-collaborative-workflow.ts121 apps/sim/hooks/use-collaborative-workflow.ts228-233Sources: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value.ts:41-182, apps/sim/hooks/use-collaborative-workflow.ts228-245 apps/sim/stores/operation-queue/store.ts91-109
Refresh this wiki