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. 💡
Custom Logic? Still in Your Hands
The biggest difference between Bellini and other low-code tools I’ve tried? You’re not boxed in.
You can:
- Write your own JS functions
- Import third-party libraries (like Chart.js or Lodash)
- Build custom components when native ones fall short
- Style everything with your own CSS or design system
It’s low-code for developers, not a toy for PMs trying to build dashboards on their lunch break.
State, Error Handling, and API UX Are Built In
Bellini handles all the usual annoyances of modern frontend work:
- Loading states? ✅
- Inline error messages based on API response? ✅
- Form validation and submission handling? ✅
- Optimistic UI? Also yes.
You don’t need to wire together Redux or recoil or whatever’s trending this week. Bellini gives you centralized state with just enough abstraction to stay out of your way.
Real Apps, Real Deployment
This isn’t “just for prototyping.” I’ve used Bellini to build dashboards, internal tools, customer portals—apps that people actually use, with production-grade performance and user management baked in.
With the Bellini Free Edition, you can:
- Create up to 25 apps
- Publish 10 web apps
- Support 5 authenticated users
- Push to production (no hidden paywalls)
Deploying is as simple as clicking a button. You can preview, test, and share apps with your team without setting up infra.
TL;DR: This Is What Low-Code Should Be
Bellini gives you the speed of drag-and-drop UI building, the power of direct API binding, and the flexibility of code whenever you want it.
If you’re tired of writing the same frontend plumbing over and over—or stuck in a no-code tool that falls apart when you hit real use cases—try this instead.
You’ll ship faster, iterate cleaner, and finally stop fighting your frontend stack.
Original source: How to Build API-Centric Frontend Apps in Bellini
Top comments (0)