# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://enhancio.gitbook.io/reactflow-for-bubble.io/guides/node-styling.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.