React Flow Example Resources

I didn’t find much listed outside of the documented examples so during my hunt for things I noted all the cool examples I found in the wild below.

You can find recent examples here.

Node Shapes

This project shows how you can create different shaped nodes such as circles, squares & triangles.

Node Fields

Each node has custom fields that appear in a sidebar/toolbar/panel when actively selected.

It also includes a “Deploy” method that outputs a dynamic representation of the node graph.

Add Node Button with Auto Positioning

A simple example that shows how you can automate graph resizing when the window resizes.

Colored Minimap Nodes & Custom Control Button

This one is mostly boilerplate but the inclusion of matching colorized nodes on the minimap and adding custom buttons to the map control bar put it on the list.

Node Popovers & Tooltips

You have to dig in to the code to see it as the project the tooltips commented out but they work pretty well out of the box there.

Randomizing Positions & Toggling Draggable Nodes

This one offers a few cool features including some buttons to randomize the node layout, reset the viewport transform as well as making nodes that can be draggable on demand.

Dynamic Handle Counts

This nifty example lets you change a nodes handle configuration on the fly.

SVG Filter Generator

Here you can see that as you add “Filters” and chain them to the “Result” node, the output code changes in the textarea field. It includes custom nodes for each filter, node meta as well as actual usage of the node graph as you build it.

Subflows – Flows Inside Nodes

This one took me by surprise, once I saw it, the simplicity of it was pretty awesome. It uses the “Contextual Zoom” effect to have nodes that as you zoom in reveal their own subflow graph that can be managed within that context.

Go ahead and try it, zoom in on Node 2 below.

Window Resizing

A simple example that shows how you can automate graph resizing when the window resizes.

I am a founder & CEO of Code Atlantic and I've been working with WordPress for over 15 years creating plugins to help WP site owners grow for more than 10 of those. We have developed and maintained popular plugins including the best wordpress popup plugin, Popup Maker with over 4k 5 star reviews, as well as Content Control, Ahoy & User Menus.

Follow on:


  1. hitesh on February 17, 2023 at 7:38 am

    how to add logic to our node , like from field and if else condition with drag and drop

    • danieliser on February 23, 2023 at 3:39 am

      I’m not sure if your familiar with WordPress’s Gutenberg project, but they use React Portals for the side bar (called Inspector).

      I used a similar concept and have something like this:

      Input for node option (will appear in the NodeInspectorSlot)

      NodeInspectorSlot (portal, shows NodeInspectorFill controls for the currently selected node only)

      As for conditional logic for nodes, I’d need more info on what you mean.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.