Node Styling

How to customize nodes individually?

The best way is using the Node JSON field in your node data type. Add a text field to your database to store custom JSON properties for each node, then map it in the React Flow element field Node JSON field. The JSON gets merged with each node, letting you set React Flow properties like className, style, etc.

You can use the Node JSON field in two ways:

1. Inline style approach

Store direct styling instructions in the JSON:

{"style": {"backgroundColor": "#007BFF", "color": "white"}}

2. Class-based styling approach

Assign a CSS class to each node:

{"className": "custom-node-blue"}

Then define the style in the plugin's Custom CSS field:

#{ELEMENT_ID} .custom-node-blue {
  background-color: #007BFF;
  color: white;
}

#{ELEMENT_ID} .custom-node-red {
  background-color: #FF7B00;
  color: white;
}

This method is helpful when styling groups of nodes consistently. See this approach demonstrated in demo.

3. Alternative method

Use Custom Node Settings JSON in the Load Nodes and Edges action to apply the same styling to multiple nodes. You can call the action multiple times with different settings and uncheck Clear existing data for subsequent calls.

For advanced customization examples, check the demo or React Flow docs for all JSON configuration possibilities.