A Visual Drag-and-Drop Designer for Lightning Web Components?

I don’t know about you but I find setting up Lightning Web Components to be a tedious, thankless process. Developers are typically handed a static design document from UI/UX, and are tasked with turning that into a live component: manually entering markup, stylesheets and JavaScript and Apex controller code from scratch, and data-binding the component. Wash, rinse, repeat. Depending on the complexity of the component, this process can take many hours of dev time to get right. Not to mention if UI/UX make changes mid stream.

Wouldn’t it be cool to off-load most of this process to UI/UX or even a friendly Administrator? I’m thinking of a visual tool where UI/UX or Admins can click and drag lightning-* components onto a canvas, then apply all styling, and setting all properties via a property panel; even doing data binding (e.g. binding a lightning-datatable to a List View rows). All with zero coding. Meanwhile, behind the scenes all of the markup and most of the code is being auto-generated.

Well, say hello to your new favorite LWC dev tool… Bambú Builder (Bambú with the accent is Spanish for bamboo).

Bambú Builder does not actually create any LWCs. Instead, during the design process it is continuously auto-generating most of the code, including as much of the JavaScript code as possible. The designer saves their design and when they’re happy with it, hands it off to a developer who copies and pastes the generated code into an LWC they create. And voila, right out of the gate, most if not all of dev’s work is already done for free. This frees developers up to focus on the heavy lifting (a.k.a. the real coding).

Bambú Builder is available right now on the AppExchange here.

These videos show Bambú Builder in action.

Happy coding!