> For the complete documentation index, see [llms.txt](https://enhancio.gitbook.io/reactflow-for-bubble.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://enhancio.gitbook.io/reactflow-for-bubble.io/guides/node-styling.md).

# Node Styling

The best way is using the [**Node JSON field**](/reactflow-for-bubble.io/element-reference/fields.md#adv-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:

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

## 2. Class-based styling approach

Assign a CSS class to each node:

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

Then define the style in the plugin's [**Custom CSS**](/reactflow-for-bubble.io/element-reference/fields.md#custom-css) field:

```css
#{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](/reactflow-for-bubble.io/element-reference/actions/load-nodes-and-edges.md) 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](https://react-flow-demo.bubbleapps.io/version-test) or [React Flow docs](https://reactflow.dev/) for all JSON configuration possibilities.