Tips for Building a UI Builder Builder

Goal is to give our users a drag-and-drop style UI builder that they can use to create custom UIs themselves.

We want to build the base tool in Bubble. Our users will not be using Bubble proper - just the end result.

In our current platform - we supply a library of pre-built financial “Events” (think House or Mortgage or Down Payment) that people connect together in a decision tree like Canvas to visually create step-by-step scenarios and then run the math through those decision tree branches.

We know want to give our users the ability to create their own custom “Events” that they can add to our library. Trick is finding a simple way for them to add dropdowns, fields, calendar pickers, etc to their custom events. Basically, replicating Bubble’s native UI builder for our end users.

Any thoughts on best practices, resources, or similar projects that I can cannibalize to get a good head start?

Hey @jcowley

Thanks for the post and cool idea! While Bubble doesn’t natively support a completely drag and drop interface builder, we’ve seem some unique ideas for how to work around this. The most popular one is using a repeating group actually.

What you could do is have a data type that is event or event item. From there, your data structure might have a field for tracking the event item’s type. (ie is this a date picker, is this an input field etc). You could have conditional statements inside the repeating group’s cell to change how it looks and what’s displayed when each item is loaded all based on it’s type. (We’ve seen users go with this method to allow users to build custom forms.

The trick for you will be to have a master data type that each of these items in the repeating group get linked to. And, building out the logic to make sure that things execute in the right order based on however many items are in the RG.

It’s possible though! And, that’s the direction I’d head with it. By the way, don’t hesitate to reach out with any questions this might kick up to