How to Build API-Centric Frontend Apps in Bellini

If your frontend app still treats APIs like an afterthought, you’re building things the hard way. APIs aren’t “add-ons” anymore. They’re the heart of every modern app. Whether it’s user data, product info, analytics, or payments, the frontend has become the API consumer. And as devs, we’re stuck wiring it all together—again and again. After years of writing fetch wrappers, transforming payloads, wrestling with inconsistent APIs, and trying to guess how to glue logic into a UI builder… I finally snapped. That’s when I found Bellini. A visual frontend builder that actually treats APIs as first-class citizens. No fake integrations. No brittle magic. Just a low-code tool that respects the complexity of real apps and gives devs room to work. Here’s how I build API-first frontends in Bellini—and why it’s replaced hours of boilerplate for me. Start with APIs, Not Screens In Bellini, the workflow starts where it should—your data layer. Before I design anything, I plug in the APIs I’ll be consuming. REST, GraphQL, Martini-powered APIs (Lonti’s orchestration tool), or even internal services—Bellini doesn’t care where they come from. Once connected, I can bind responses, inputs, and mutations to actual UI components without writing custom client code. No need to parse responses or transform on the fly—it’s all declarative and dynamic. Drag, Drop, and (Most Importantly) Bind Bellini’s canvas works like you'd expect: drag a component into place, set up the layout, bind it to your API response or mutation, and move on. What’s better is how real-time everything is. I can tweak inputs and immediately see how the data flows through the app. Want to build a table from an API call? Done. Add filters, search params, and pagination logic? You can do it all with a few clicks—or write your own logic if needed. And yes, you can write JavaScript expressions anywhere logic is allowed.

May 9, 2025 - 02:48

How to Build API-Centric Frontend Apps in Bellini

If your frontend app still treats APIs like an afterthought, you’re building things the hard way.

APIs aren’t “add-ons” anymore. They’re the heart of every modern app. Whether it’s user data, product info, analytics, or payments, the frontend has become the API consumer. And as devs, we’re stuck wiring it all together—again and again.

After years of writing fetch wrappers, transforming payloads, wrestling with inconsistent APIs, and trying to guess how to glue logic into a UI builder… I finally snapped.

That’s when I found Bellini. A visual frontend builder that actually treats APIs as first-class citizens. No fake integrations. No brittle magic. Just a low-code tool that respects the complexity of real apps and gives devs room to work.

Here’s how I build API-first frontends in Bellini—and why it’s replaced hours of boilerplate for me.

Start with APIs, Not Screens

In Bellini, the workflow starts where it should—your data layer.

Before I design anything, I plug in the APIs I’ll be consuming. REST, GraphQL, Martini-powered APIs (Lonti’s orchestration tool), or even internal services—Bellini doesn’t care where they come from.

Once connected, I can bind responses, inputs, and mutations to actual UI components without writing custom client code. No need to parse responses or transform on the fly—it’s all declarative and dynamic.

Drag, Drop, and (Most Importantly) Bind

Bellini’s canvas works like you'd expect: drag a component into place, set up the layout, bind it to your API response or mutation, and move on.

What’s better is how real-time everything is. I can tweak inputs and immediately see how the data flows through the app. Want to build a table from an API call? Done. Add filters, search params, and pagination logic? You can do it all with a few clicks—or write your own logic if needed.

And yes, you can write JavaScript expressions anywhere logic is allowed.