[Plugin] ReactFlow - plugin for flowcharts/diagrams/workflows as in n8n or Zapier

Showcase Plugins
1

Hello Bubblers,

I want to introduce our plugin ReactFlow: Node-based Graph/Diagram. It enables to create quite impressive and interactive flow (node-based) diagrams - similar diagrams to the ones in the workflow automation tools as n8n, Zapier or Make.

I must say it was quite challenging to make it highly interactive with Bubble because ReactFlow library is quite complex and we wanted to make it as much customizable as possible. But I think we have managed it quite well and we already got some nice feedbacks from our users (thank you!).

What we are most proud of about this plugin:

  • custom nodes templates - this feature enables Bubblers to define nodes layouts with HTM syntax that is similar to JSX/React (but no need to use it if you are ok with the default layout)
  • auto-layout - automatically organize node positions to minimize edge crossings and optimize spacing between nodes
  • it elegantly loads nodes and edges data from bubble database
  • documentation - we also spent a lot of effort on a documentation - either in the plugin page or help of the plugin fields. We hope that event the more complex features will be clear for you to understand

You can see the ReactFlow demo here or the ReactFlow plugin profile with guides and how-tos. You can also check our ReactFlow Bubble plugin landing page.

We will be happy for any feedback and insights!

Some examples:

image
image1000×507 77.2 KB

image
image840×277 24.1 KB

image
image1085×678 39.7 KB

3 Likes
2

We’ve recently introduced new states selected nodes IDs and selected edges IDs. These are useful if you want to show users information from node or nodes they’ve selected.

Also we added demo of custom node templates with images:

image
image2344×452 65.1 KB

Open in demo

2 Likes
3

hay can you make a guide please of the type of node that is a group that stores node? i cant figure it out

4

Hello, thank you for reaching out!

Do you mean something like this? Sub Flow - React Flow

5

i meant smth like this:

image
image336×239 18.7 KB

6

We will have a look at it and let you know.

1 Like
7

Thank You!! and i face some more issues and i want to know if there is solutions for this :slight_smile: thank you !

  1. adding node on edge drop
  2. **Preventing Cycles
  3. Context Menu
    4.what type of nodes i can make {image uploader/node with input/node with buttons}..

Thank You!!!

8

We have just introduced 2 new features:

1. Subflows & Grouping

Rendering nested graphs and grouping of nodes as shown in the following screenshot:

image
image648×606 26.9 KB

Demo

2. Add Node On Edge Drop

Introduced a new event and state so you can create a new node when you drop the connection line on the canvas.

Demo (in Bubble-database-ready plugin section)

9

@yakir78111

Regarding the other requested features:

  • Preventing Cycles - this could be quite tricky to prevent from plugin side of view. I suggest to handle this in you workflows logic when adding new edge.
  • Context Menu - this is also quite tricky because of integrating well with Bubble. Do you have idea how it should work so it is not super-complicated from developer point of view? Workaround is to show context about the selected node or edge next to the canvas - does that work for you?
  • You can currently define custom node templates that can include inputs or buttons. But we do not have currently support reading such values or clicks - because this is tricky to do while keeping the plugin not too complicated for developers. You could probably access inputs values or button clicks using external Javascript, but we did not try it yet.

Hope it helps and reach out if any more questions.

10

Thank You!!

1 Like