Docs
Editable Handle

Editable Handle

A React Flow component that allows you to dynamically add, edit, or remove input/output handles on your nodes - perfect for building nodes with flexible connection points.

React Flow

Overview

The Editable Handle component makes it easy to create nodes with dynamic connection points (handles). Instead of having fixed inputs and outputs, your nodes can:

  • Let users add new input/output handles on the fly
  • Edit handle labels and descriptions
  • Remove handles when they're no longer needed

This is particularly useful when building nodes that need to adapt to different use cases or when you want to give users more flexibility in how nodes connect to each other.

Installation

pnpm dlx shadcn@latest add https://simple-ai.dev/r/editable-handle.json

Usage

The Editable Handle system has two main parts:

  1. EditableHandleDialog: Used to create new handles with a user-friendly popup
  2. EditableHandle: The handle component itself that users can edit or delete

Adding New Handles

Use EditableHandleDialog to let users create new handles. It provides a simple interface for entering a handle's label and optional description.

import { EditableHandleDialog } from "@/components/ui/flow/editable-handle"
 
function MyNode() {
  const handleCreate = (name: string, description?: string) => {
    // Add the new handle to your state
    return true // Return true if handle was created successfully
  }
 
  return (
    <EditableHandleDialog
      variant="create"
      onSave={handleCreate}
      align="start"
    >
      <Button variant="outline" size="sm">
        Add New Input
      </Button>
    </EditableHandleDialog>
  )
}

Managing Handles

Use EditableHandle to display handles that users can edit or remove.

import { EditableHandle } from "@/components/ui/flow/editable-handle"
import { Position } from "@xyflow/react"
 
function MyNode({ id }: NodeProps) {
  const handleUpdate = (handleId: string, newName: string, newDescription?: string) => {
    // Update your handle state
    return true // Return true if update was successful
  }
 
  const handleDelete = (handleId: string) => {
    // Remove the handle from your state
  }
 
  return (
    <EditableHandle
      nodeId={id}
      handleId="handle-1"
      name="Input 1"
      description="Optional description"
      type="target"
      position={Position.Left}
      onUpdateTool={handleUpdate}
      onDelete={handleDelete}
      showDescription
    />
  )
}
Model SelectorGenerate Text Node