--- tags: [gradio-custom-component, SimpleTextbox, workflow, builder, editor] title: gradio_workflowbuilder short_description: workflow builder colorFrom: blue colorTo: yellow sdk: gradio pinned: false app_file: space.py --- # `gradio_workflowbuilder` Static Badge workflow builder ## Installation ```bash pip install gradio_workflowbuilder ``` ## Usage ```python import gradio as gr from gradio_workflowbuilder import WorkflowBuilder import json def export_workflow(workflow_data): """Export workflow as formatted JSON""" if not workflow_data: return "No workflow to export" return json.dumps(workflow_data, indent=2) # Create the main interface with gr.Blocks( title="🎨 Visual Workflow Builder", theme=gr.themes.Soft(), css=""" .main-container { max-width: 1600px; margin: 0 auto; } .workflow-section { margin-bottom: 2rem; } .button-row { display: flex; gap: 1rem; justify-content: center; margin: 1rem 0; } .component-description { padding: 24px; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-radius: 12px; border-left: 4px solid #3b82f6; margin: 16px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .component-description p { margin: 10px 0; line-height: 1.6; color: #374151; } .base-description { font-size: 17px; font-weight: 600; color: #1e293b; } .base-description strong { color: #3b82f6; font-weight: 700; } .feature-description { font-size: 16px; color: #1e293b; font-weight: 500; } .customization-note { font-size: 15px; color: #64748b; font-style: italic; } .sample-intro { font-size: 15px; color: #1e293b; font-weight: 600; margin-top: 16px; border-top: 1px solid #e2e8f0; padding-top: 16px; } """ ) as demo: with gr.Column(elem_classes=["main-container"]): gr.Markdown(""" # 🎨 Visual Workflow Builder **Create sophisticated workflows with drag and drop simplicity.** """) # Simple description section with styling gr.HTML("""

Base custom component powered by svelteflow.

Create custom workflows.

You can customise the nodes as well as the design of the workflow.

Here is a sample:

""") # Main workflow builder section with gr.Column(elem_classes=["workflow-section"]): workflow_builder = WorkflowBuilder( label="🎨 Visual Workflow Designer", info="Drag components from the sidebar → Connect nodes by dragging from output (right) to input (left) → Click nodes to edit properties" ) # Export section below the workflow gr.Markdown("## 💾 Export Workflow") with gr.Row(): with gr.Column(): export_output = gr.Code( language="json", label="Workflow Configuration", lines=10 ) # Action button with gr.Row(elem_classes=["button-row"]): export_btn = gr.Button("💾 Export JSON", variant="primary", size="lg") # Instructions with gr.Accordion("📖 How to Use", open=False): gr.Markdown(""" ### 🚀 Getting Started 1. **Add Components**: Drag items from the left sidebar onto the canvas 2. **Connect Nodes**: Drag from the blue circle on the right of a node to the left circle of another 3. **Edit Properties**: Click any node to see its editable properties on the right panel 4. **Organize**: Drag nodes around to create a clean workflow layout 5. **Delete**: Use the ✕ button on nodes or click the red circle on connections ### 🎯 Component Types - **📥 Inputs**: Text fields, file uploads, number inputs - **⚙️ Processing**: Language models, text processors, conditionals - **📤 Outputs**: Text displays, file exports, charts - **🔧 Tools**: API calls, data transformers, validators ### 💡 Pro Tips - **Collapsible Panels**: Use the arrow buttons to hide/show sidebars - **Live Updates**: Properties update in real-time as you edit - **Export Options**: Get JSON config for your workflow """) # Event handlers export_btn.click( fn=export_workflow, inputs=[workflow_builder], outputs=[export_output] ) if __name__ == "__main__": demo.launch( server_name="0.0.0.0", show_error=True ) ``` ## `WorkflowBuilder` ### Initialization
name type default description
value ```python typing.Optional[typing.Dict[str, typing.Any]][ typing.Dict[str, typing.Any][str, typing.Any], None ] ``` None Default workflow data with nodes and edges
label ```python typing.Optional[str][str, None] ``` None Component label
info ```python typing.Optional[str][str, None] ``` None Additional component information
show_label ```python typing.Optional[bool][bool, None] ``` None Whether to show the label
container ```python bool ``` True Whether to use container styling
scale ```python typing.Optional[int][int, None] ``` None Relative width scale
min_width ```python int ``` 160 Minimum width in pixels
visible ```python bool ``` True Whether component is visible
elem_id ```python typing.Optional[str][str, None] ``` None HTML element ID
elem_classes ```python typing.Optional[typing.List[str]][ typing.List[str][str], None ] ``` None CSS classes
render ```python bool ``` True Whether to render immediately
### Events | name | description | |:-----|:------------| | `change` | Triggered when the value of the WorkflowBuilder changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. | | `input` | This listener is triggered when the user changes the value of the WorkflowBuilder. | ### User function The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both). - When used as an Input, the component only impacts the input signature of the user function. - When used as an output, the component only impacts the return signature of the user function. The code snippet below is accurate in cases where the component is used as both an input and an output. ```python def predict( value: typing.Dict[str, typing.Any][str, typing.Any] ) -> typing.Dict[str, typing.Any][str, typing.Any]: return value ```