Whiteboard Features

React Flow is designed for building node-based UIs like workflow editors, flowcharts and diagrams. Even if React Flow is not made for creating whiteboard applications, you might want to integrate common whiteboard features. These examples show how to add drawing capabilities to your applications when you need to annotate or sketch alongside your nodes and edges.

Examples

✏️ Freehand Draw (Pro)

Draw smooth curves on your React Flow pane. Useful for annotations or sketching around existing nodes.

Features:

• Mouse/touch drawing
• Adjustable brush size and color
• converts drawn paths into custom nodes

Common uses:

• Annotating flowcharts
• Adding notes to diagrams
• Sketching ideas around nodes

🎯 Lasso Selection

Select multiple elements by drawing a freeform selection area with an option to include partially selected elements.

Features:

• Freeform selection shapes
• partial selection of elements

Common uses:

• Selecting nodes and annotations together
• Complex selections in mixed content

🧹 Eraser

Remove items by “erasing” over them. Uses collision detection to determine what to delete.

Features:

• Collision-based erasing
• Visual eraser cursor

Common uses:

• Removing parts of a flow

📐 Rectangle Draw

Create rectangular shapes by clicking and dragging. Good for highlighting areas or creating backgrounds for node groups.

Features:

• Click-and-drag rectangle creation
• Customizable colors

Common uses:

• Creating background containers
• Grouping related nodes visually
• Highlighting sections of diagrams

Whiteboard libraries

If you are looking for a more complete whiteboard solution, consider using libraries that are specifically designed for whiteboard applications like tldraw  or Excalidraw . These libraries provide a full set of features for collaborative drawing, shapes, text, and more.