Explore a professional workflow builder, timed execution, connection editing and validation, controlled selection and deletion, editor modes, node movement, custom node composition, and read-only monitoring. Give each editor a unique flowId when multiple canvases share a page.
Professional flow creator
Build a complete automation from an unlimited step palette. Drag from a node's + handle and drop anywhere on another node to create both connection ports automatically, then reconnect, edit, arrange, undo, and publish the workflow.
Professional automation flow builder
⌁
Automation workspace
Draft
5 steps4 connections
Hover a step, drag its + handle, and drop anywhere on another step.
WebhookStart when an HTTP event arrives. idle
Transform dataMap fields into a new payload. idle
ConditionRoute the flow using a rule. idle
Send emailDeliver a transactional message. idle
NotificationNotify a person or a channel. idle
Use arrow keys to navigate, and Control or Command with an arrow key to follow connections. Hold Shift while navigating to extend the selection. Press Space to grab selected nodes, then use arrows to move and Space or Enter to drop. Press C to choose ports for a connection. Delete or Backspace requests deletion; Escape cancels the active operation.
Document Review Workflow
Build, validate, and inspect an interactive document review process. This application-style demo combines custom node templates, dynamic graph editing, external validation, inspector integration, connection rules, and execution presentation.
Document review workflow studio
Interactive workflow studio
Document Review Workflow
Upload, extract, validate, and route a document through automatic approval or human review.
Steps
8
Paths
2
Issues
1
StartBegin document processing. idle
Next
Upload documentReceive a PDF or image. idle
Start * Document
Extract informationRead structured fields from the document. idle
Document * Extracted data Error
Validate documentCheck the extracted fields. idle
Extracted data * Validation result
Document valid?Choose the next review path. idle
Auto approveNeeds review
Validation result * Valid Invalid
Manual reviewAsk a person to review exceptions.!
1 validation error
idle
Review * Approved Rejected
Approve documentApply the approved status. idle
Approve * Complete
CompleteFinish the workflow. idle
Complete *
Use arrow keys to navigate, and Control or Command with an arrow key to follow connections. Hold Shift while navigating to extend the selection. Press Space to grab selected nodes, then use arrows to move and Space or Enter to drop. Press C to choose ports for a connection. Delete or Backspace requests deletion; Escape cancels the active operation.
Timed workflow simulation
Start an automatic execution where each connection remains in progress for three seconds before the next node is reached. The presentation signal drives node status and flowing edge motion without changing the workflow definition.
Automatic three-second workflow handoffs
Automatic execution
Three-second workflow handoffs
Follow a linear order workflow while each connection remains visibly in progress before activating the next node.
Delay
3 sec
Steps
4
Ready — every connection handoff will remain in progress for three seconds.
Receive orderAccept the incoming order. idle
Order
Validate orderCheck inventory and payment. idle
Order * Validated
Approve orderCommit the fulfilment decision. idle
Validated * Approved
Notify customerSend the order confirmation. idle
Approved *
Use arrow keys to navigate, and Control or Command with an arrow key to follow connections. Hold Shift while navigating to extend the selection. Press Space to grab selected nodes, then use arrows to move and Space or Enter to drop. Press C to choose ports for a connection. Delete or Backspace requests deletion; Escape cancels the active operation.
Connection routing and execution states
Choose a persisted path shape, radius, offset, markers, label, and waypoints, then apply transient status and motion without changing the workflow structure.
Connection routing and execution state laboratory
Routing laboratory
Connection routing and execution states
Routing stays in the workflow definition. Status and motion are transient presentation state. Select the first route to add, move, or remove waypoints.
Extracted data Needs review
Extract documentRead structured values from the uploaded document. idle
output
Validate fieldsCheck the extracted values against business rules. idle
input invalid
Manual reviewAsk an operator to resolve validation failures. idle
input
Use arrow keys to navigate, and Control or Command with an arrow key to follow connections. Hold Shift while navigating to extend the selection. Press Space to grab selected nodes, then use arrows to move and Space or Enter to drop. Press C to choose ports for a connection. Delete or Backspace requests deletion; Escape cancels the active operation.
Branch and merge workflow
Pass one TngFlowDefinition that fans a request into automated and review branches, uses top and bottom port sides for the vertical paths, then merges both results before publishing a response.
Branch and merge workflow with Plain CSS
Incoming requestReceive and normalize the request. idle
Use arrow keys to navigate, and Control or Command with an arrow key to follow connections. Hold Shift while navigating to extend the selection. Press Space to grab selected nodes, then use arrows to move and Space or Enter to drop. Press C to choose ports for a connection. Delete or Backspace requests deletion; Escape cancels the active operation.
Branch and merge workflow with Tailwind CSS
Incoming requestReceive and normalize the request. idle
Use arrow keys to navigate, and Control or Command with an arrow key to follow connections. Hold Shift while navigating to extend the selection. Press Space to grab selected nodes, then use arrows to move and Space or Enter to drop. Press C to choose ports for a connection. Delete or Backspace requests deletion; Escape cancels the active operation.
Canvas grid visibility
Toggle the canvas background grid independently from snap-to-grid. Adaptive density keeps the on-screen dot spacing fixed while zooming, and --tng-flow-grid-color controls their contrast.
Canvas grid visibility with Plain CSS
Grid: Background dots are visible. Adaptive density and snapping remain enabled.
Incoming requestReceive and normalize the request. idle
Use arrow keys to navigate, and Control or Command with an arrow key to follow connections. Hold Shift while navigating to extend the selection. Press Space to grab selected nodes, then use arrows to move and Space or Enter to drop. Press C to choose ports for a connection. Delete or Backspace requests deletion; Escape cancels the active operation.
Canvas grid visibility with Tailwind CSS
Grid: Background dots are visible. Snapping and adaptive density remain enabled.
Incoming requestReceive and normalize the request. idle
Use arrow keys to navigate, and Control or Command with an arrow key to follow connections. Hold Shift while navigating to extend the selection. Press Space to grab selected nodes, then use arrows to move and Space or Enter to drop. Press C to choose ports for a connection. Delete or Backspace requests deletion; Escape cancels the active operation.
Create, validate, and reconnect
Create consumer-owned connections, reject duplicates, multiplicity conflicts, and incompatible data types, then reconnect an existing endpoint.
Connection editing with Plain CSS
Try: Request → Parse, repeat it, connect Fallback → Parse, connect Request → Archive, or drag the existing edge from Publish to Archive.
Request payloadPrimary text payload. idle
Text
Fallback payloadSecond source for multiplicity checks. idle
Text
Parse requestConverts text into structured JSON. idle
Text JSON
Publish resultCurrent connection target. idle
JSON
Archive resultAlternate reconnection target. idle
JSON
Use arrow keys to navigate, and Control or Command with an arrow key to follow connections. Hold Shift while navigating to extend the selection. Press Space to grab selected nodes, then use arrows to move and Space or Enter to drop. Press C to choose ports for a connection. Delete or Backspace requests deletion; Escape cancels the active operation.
Create a connection or reconnect the existing edge.
Connection editing with Tailwind CSS
Try: Request → Parse, repeat it, connect Fallback → Parse, connect Request → Archive, or drag the existing edge from Publish to Archive.
Request payloadPrimary text payload. idle
Text
Fallback payloadSecond source for multiplicity checks. idle
Text
Parse requestConverts text into structured JSON. idle
Text JSON
Publish resultCurrent connection target. idle
JSON
Archive resultAlternate reconnection target. idle
JSON
Use arrow keys to navigate, and Control or Command with an arrow key to follow connections. Hold Shift while navigating to extend the selection. Press Space to grab selected nodes, then use arrows to move and Space or Enter to drop. Press C to choose ports for a connection. Delete or Backspace requests deletion; Escape cancels the active operation.
Create a connection or reconnect the existing edge.
Selection, deletion, modes, and locked nodes
Keep selection in a signal, multi-select graph elements, delete editable items, protect locked nodes, and compare edit, inspect, and readonly permissions.
Selection and modes with Plain CSS
Mode: edit Selected: nothing
IntakeMovable and deletable. idle
Request
Locked reviewSelectable, but cannot move or delete. idle
Request Decision
PublishMovable and deletable. idle
Decision
Use arrow keys to navigate, and Control or Command with an arrow key to follow connections. Hold Shift while navigating to extend the selection. Press Space to grab selected nodes, then use arrows to move and Space or Enter to drop. Press C to choose ports for a connection. Delete or Backspace requests deletion; Escape cancels the active operation.
Select a node or connection.
Use Shift/Cmd/Ctrl for multi-selection, Cmd/Ctrl+A to select all in edit mode, and Delete/Backspace to request deletion. The locked review remains protected.
Selection and modes with Tailwind CSS
Mode: edit Selected: nothing
IntakeMovable and deletable. idle
Request
Locked reviewSelectable, but cannot move or delete. idle
Request Decision
PublishMovable and deletable. idle
Decision
Use arrow keys to navigate, and Control or Command with an arrow key to follow connections. Hold Shift while navigating to extend the selection. Press Space to grab selected nodes, then use arrows to move and Space or Enter to drop. Press C to choose ports for a connection. Delete or Backspace requests deletion; Escape cancels the active operation.
Select a node or connection.
Use Shift/Cmd/Ctrl for multi-selection, Cmd/Ctrl+A to select all in edit mode, and Delete/Backspace to request deletion. The locked review remains protected.
Controlled node positions
Handle nodePositionChange, replace the moved node in the definition signal, and keep the editor free of application-owned mutations.
Controlled node positions with Plain CSS
Prepared prompt Generated answer
Prompt builderAssemble the system and user instructions. idle
Prompt
Reasoning modelGenerate a grounded response. idle
Prompt Answer
ResponseReturn the final answer to the agent runtime. idle
Answer
Use arrow keys to navigate, and Control or Command with an arrow key to follow connections. Hold Shift while navigating to extend the selection. Press Space to grab selected nodes, then use arrows to move and Space or Enter to drop. Press C to choose ports for a connection. Delete or Backspace requests deletion; Escape cancels the active operation.
Controlled node positions with Tailwind CSS
Prepared prompt Generated answer
Prompt builderAssemble the system and user instructions. idle
Prompt
Reasoning modelGenerate a grounded response. idle
Prompt Answer
ResponseReturn the final answer to the agent runtime. idle
Answer
Use arrow keys to navigate, and Control or Command with an arrow key to follow connections. Hold Shift while navigating to extend the selection. Press Space to grab selected nodes, then use arrows to move and Space or Enter to drop. Press C to choose ports for a connection. Delete or Backspace requests deletion; Escape cancels the active operation.
Custom model node
Compose the model body with TailNG Card components while the editor retains node position, drag behavior, selection, and connector placement.
Custom model node with Plain CSS
Prepared prompt Generated answer
Prompt builderAssemble the system and user instructions. completed
Prompt
Reasoning step
Reasoning model
Generate a grounded response.
GPT reasoning pass
running · 52%
Prompt Answer
ResponseReturn the final answer to the agent runtime. waiting
Answer
Use arrow keys to navigate, and Control or Command with an arrow key to follow connections. Hold Shift while navigating to extend the selection. Press Space to grab selected nodes, then use arrows to move and Space or Enter to drop. Press C to choose ports for a connection. Delete or Backspace requests deletion; Escape cancels the active operation.
Custom model node with Tailwind CSS
Prepared prompt Generated answer
Prompt builderAssemble the system and user instructions. completed
Prompt
Reasoning step
Reasoning model
Generate a grounded response.
GPT reasoning pass
running · 52%
Prompt Answer
ResponseReturn the final answer to the agent runtime. waiting
Answer
Use arrow keys to navigate, and Control or Command with an arrow key to follow connections. Hold Shift while navigating to extend the selection. Press Space to grab selected nodes, then use arrows to move and Space or Enter to drop. Press C to choose ports for a connection. Delete or Backspace requests deletion; Escape cancels the active operation.
Read-only execution monitor
Read-only mode disables selection and all graph mutations while operators retain pan and zoom for passive workflow monitoring.
Read-only monitor with Plain CSS
Prepared prompt Generated answer
Prompt builderAssemble the system and user instructions. completed
Prompt
Reasoning modelGenerate a grounded response. completed
Finished in 1.8 seconds
Prompt Answer
ResponseReturn the final answer to the agent runtime. completed
Delivered to the user
Answer
Use arrow keys to navigate, and Control or Command with an arrow key to follow connections. Hold Shift while navigating to extend the selection. Press Space to grab selected nodes, then use arrows to move and Space or Enter to drop. Press C to choose ports for a connection. Delete or Backspace requests deletion; Escape cancels the active operation.
Read-only monitor with Tailwind CSS
Prepared prompt Generated answer
Prompt builderAssemble the system and user instructions. completed
Prompt
Reasoning modelGenerate a grounded response. completed
Finished in 1.8 seconds
Prompt Answer
ResponseReturn the final answer to the agent runtime. completed
Delivered to the user
Answer
Use arrow keys to navigate, and Control or Command with an arrow key to follow connections. Hold Shift while navigating to extend the selection. Press Space to grab selected nodes, then use arrows to move and Space or Enter to drop. Press C to choose ports for a connection. Delete or Backspace requests deletion; Escape cancels the active operation.