# Node templates

Custom templates let you completely redesign how nodes look using TSX-like syntax. This is perfect for displaying custom data, icons, labels, or complex layouts inside your nodes.

## Setup

1. Enable [Enable custom templates](/reactflow-for-bubble.io/element-reference/fields.md#enable-custom-templates) in your React Flow element
2. Modify the template in the [Custom node template](/reactflow-for-bubble.io/element-reference/fields.md#custom-node-template) field

## Template Variables Available

* **label** - Node display text
* **imageUrl** - Node image URL
* **nodeData** - All your Bubble database fields for this node
* **Handle** - Component for connection positions
* To see more, enable [Debug template variables](/reactflow-for-bubble.io/element-reference/fields.md#debug-template-variables) element field

For examples and complete syntax reference, see the [demo](https://react-flow-demo.bubbleapps.io/version-test) or [HTM documentation](https://github.com/developit/htm).


---

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