The SubBlock Configuration System defines the declarative schema for block input fields in workflows. Each block exposes a set of configurable subblocks that control its behavior, with support for dynamic visibility, validation, advanced/basic mode switching, and type-specific rendering. This system bridges block definitions in the registry with the UI rendering layer and value storage layer.
For information about block registry and block execution, see Block Registry System and Block Handlers For UI rendering of subblocks, see Block Configuration UI
The SubBlock Configuration System operates at three layers: definition (registry), storage (Zustand), and rendering (React components). Block configurations declare their input schema using SubBlockConfig objects, values are stored per-workflow per-block in SubBlockStore, and the UI dynamically renders inputs based on visibility rules and mode settings.
Sources: 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/editor.tsx:128-138, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx:177-185, apps/sim/blocks/registry.ts48
The SubBlockConfig interface defines the complete schema for a block input field. Each configuration controls type, visibility, validation, and rendering behavior.
| Property | Type | Purpose |
|---|---|---|
id | string | Unique identifier within the block (e.g., "credential", "prompt") |
title | string | Display label for the input field |
type | SubBlockType | Input component type (e.g., short-input, dropdown, code) |
mode | 'basic' | 'advanced' | 'both' | 'trigger' | Visibility scope for the UI toggle |
canonicalParamId | string | Groups basic/advanced pairs for mode swapping |
required | boolean | condition | Validation rule, can be a static boolean or a dynamic condition |
defaultValue | any | Initial value when block is created |
condition | condition | function | Visibility predicate based on other field values |
dependsOn | string[] | {all?: string[], any?: string[]} | Declarative dependencies for invalidation and gating |
Sources: apps/sim/blocks/types.ts122-170 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx:92-92, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate.ts:17-44
The system uses useDependsOnGate to determine if a sub-block should be interactive based on the values of other fields. This hook parses the dependsOn configuration and computes a finalDisabled flag. evaluateSubBlockCondition is used for layout-level visibility (showing/hiding the field entirely).
Sources: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx:160-175, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate.ts:47-183, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx:118-165, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx:17-23
The SubBlock component acts as a router, mapping SubBlockConfig.type to specific React components.
| Type | Purpose | Component Reference |
|---|---|---|
short-input | Single line text with variable support | ShortInput |
dropdown | Single/Multi-select with async fetching | Dropdown |
combobox | Searchable select with model-provider filtering | ComboBox |
messages-input | LLM message history editor (role/content) | MessagesInput |
mcp-dynamic-args | Renders inputs based on MCP Tool JSON schemas | McpDynamicArgs |
variables-input | Assigning workflow variables | VariablesInput |
input-format | Defining structured input schemas | InputFormat |
Sources: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx:16-52, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx:80-95, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx:76-90, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx:45-52, apps/sim/blocks/types.ts154
The McpDynamicArgs component dynamically generates sub-block inputs at runtime by inspecting the inputSchema of a selected MCP tool. It maps JSON schema types (string, boolean, integer, enum) to standard UI components like Switch, Slider, or Combobox.
Sources: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx:114-130, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx:132-200
Many inputs (like Dropdown and ComboBox) use fetchOptions which depends on other sub-block values. The useDependsOnGate hook provides dependencyValues to these components, triggering a re-fetch whenever a dependency changes. This is facilitated by resolveDependencyValue which handles canonical mode mapping.
Sources: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx:111-125, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate.ts:102-151, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx:119-120
Sub-block values are managed via useSubBlockStore. The useSubBlockValue hook provides a unified interface for reading and writing these values, handling complex objects with deep equality checks and supporting real-time collaboration via the operation queue.
Sources: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value.ts:31-117, apps/sim/stores/operation-queue/store.ts89-109 apps/sim/hooks/use-collaborative-workflow.ts150-158 apps/sim/stores/workflows/subblock/store.ts13
The "Wand" system allows LLM-assisted generation of sub-block content.
SubBlock.WandPromptBar collects user intent.useWand hook calls the AI provider and streams the result into useSubBlockValue with isStreaming: true.Sources: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx:77-81, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx:19-29, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value.ts:119-129
Refresh this wiki