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.