LitFlow Examples

Explore various implementations of xyflow with Lit WebComponents.

• Basic Flow

  A simple graph with standard nodes and edges.

• Overview

  A comprehensive example showing various node types and features.

• Multiple Handles

  Nodes with multiple input and output ports.

• Dynamic Interactivity

  Add and remove nodes and edges dynamically.

• Custom Nodes

  Build complex nodes with internal state and custom Lit templates.

• Custom Edges

  Demonstrate different edge types: Bezier, SmoothStep, Step, and Straight.

• Subflows (Parent/Child)

  Nested nodes and parent-child relationships with group collapse/expand.

• Static Documentation Display (Read-only)

  Read-only graph for documentation with disabled interactions.

• Drag & Drop (Palette to Canvas)

  Interactive palette for dragging new nodes onto the canvas.

• Edge Markers (Arrowheads)

  Showcasing arrowheads, bidirectional edges, and edge labels.

• Marquee Selection (Bulk Select)

  Select multiple nodes and edges by dragging a selection box.

• Inspector Designer

  A dual-pane authoring tool with live JSON sync and two-way binding.

• Node Resizer & Toolbar

  Interactive node manipulation with drag-to-resize and contextual action toolbars.

• Zero-Config Automatic Layout

  Automatically arrange nodes from topological data using Hierarchical, Organic, or Tree strategies.

• Dynamic Orientation (LR/TB)

  Toggle between horizontal and vertical layouts. Handles and edges adapt automatically.

• Organizational Chart (Tree Layout)

  A specialized layout for strict parent-child relationships using D3-Hierarchy.

• Subgraph Isolation API

  Focus on specific parts of a graph by isolating connected nodes and edges.

• Schema-Driven Node

  Demonstrates dynamic node rendering based on Breadboard-compatible JSON Schema.