Node templates

How to display more information in the nodes or create custom 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 in your React Flow element

2. Modify the template in the 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 element field

For examples and complete syntax reference, see the demo or HTM documentation.