Reusables Tree

The Reusables Tree shows which pages use which reusable elements, and how deeply your reusables nest inside one another.

It answers the question you hit before every refactor: if I change this reusable, what breaks?

What to upload

A full Bubble application export. The parser needs pages or element_definitions; without either you get "Invalid Bubble JSON format. Expected pages and/or element_definitions."

See get your app export out of Bubble.

How it works

Bubble records a reusable placed on a page as an element of type CustomElement, carrying a reference to the reusable's definition rather than its name. The tree resolves those references back to the reusable's real name, then walks the element trees to build the hierarchy.

That resolution is why the tool needs element_definitions as well as pages: the pages tell you where a reusable is used, and the definitions tell you what it is.

Reading the tree

Blue nodes are pages.
Green nodes are reusables.
Grey nodes are deleted items.
Edges are coloured by direction: green going down into what an element contains, violet going up into what uses it.
Red marks a circular dependency — a reusable that, through some chain, contains itself.

A reusable can legitimately appear more than once in the tree: once for each place it is used. That is the point of the view, not a bug.

Every page in the app with the number of reusables it pulls in.

Pick one and you get its own tree, nested as deep as it goes. The panel on the right counts how many times each reusable appears inside that page.

One page and the five reusables it uses, one of which brings two more in with it. filters_template appears six separate times on this page.

What to do with it

Before changing a reusable, expand it to see every page that will be affected.
Circular dependencies are worth removing on sight; they make render order unpredictable.
Deep nesting is a common cause of slow page loads. The tree makes depth obvious in a way the Bubble editor does not.
Where a reusable is placed more than once, a chevron appears beside its row in the right-hand panel. Expanding it lists each placed instance with the values passed into its parameters, and highlights in amber every parameter whose value differs between them. That is the quickest way to find the one instance someone configured differently from the rest.

You can export the tree for the currently selected node, which is useful for pasting into a ticket.