How to Build Clean, Scalable Dashboards in Bellini

#lowcode #frontend #ux #javascript

Let’s cut to the chase: most business dashboards suck.

They’re cluttered. Hard to scan. Painful to maintain. And they often do a worse job answering a question than a basic SQL query.

As devs, we’ve all either inherited or built a dashboard like that. It works… technically. But it’s dense, inconsistent, and nobody wants to use it.

I’ve been there. So I ditched the usual drag-and-drop UI kits and started building dashboards in Bellini—Lonti’s low-code frontend tool that’s actually designed for developers. Not just for shipping fast, but for building right.

Here’s how I approach dashboard dev now—and how Bellini helps me do it faster without sacrificing flexibility.

**1. Start With the Why, Not the *What***

Before I drag in a single chart, I map out:

→ Who’s using this?

→ What decisions do they need to make?

→ What’s the one thing they should see right away?

If I can’t answer that, I shouldn’t be building a dashboard yet.

Bellini lets me sketch out responsive layouts fast—rows, columns, cards—without fighting rigid templates. So even in the prototyping phase, I can keep structure and intent aligned.

2. APIs Come First, Not Last

Bellini is API-native. Not just “connects to an API”—I mean, built around APIs.

I bind components directly to live API endpoints (REST or GraphQL). Sometimes those are custom APIs I expose with Martini, or models I standardize with Negroni. Sometimes they’re third-party services pulled straight into Bellini’s secure runtime.

The key: I don’t write glue code. I don’t hand-roll fetch wrappers. I just plug in the data and move on.

3. Clarity Beats Density

Here’s the truth: your dashboard isn’t a data dump. It’s a decision-support tool.

I follow three rules:

Use white space generously.
Prioritize one KPI per block.
Avoid chart soup (if it doesn’t answer a question, don’t include it).

Bellini gives me full CSS control and lets me plug in external libraries when needed (D3, Chart.js, GSAP—you name it). I’ve animated charts, styled cards, and even embedded SVG workflows, all without breaking layout or data bindings.

4. Make It Clickable (Without Overengineering It)

Dashboards should be interactive, not overwhelming.

Bellini supports all the goodies: filters, modals, paginated tables, conditional views—and you can inject custom JS wherever you want. I’ve built dashboards where:

Users filter orders by region
Drill down into customer history
Trigger backend actions like invoice resends or status updates

The logic sits alongside the UI. No context switching. No backend guesswork.

5. Reuse, Refactor, and Scale

My favorite Bellini feature? Reusable components.

I treat dashboards like real software. If I build a killer leaderboard component or a multi-tab KPI view, I refactor it into a reusable block. Bellini supports versioning, Git integration, and workspace sharing—so I can collaborate with other devs and still keep my components clean.

Frontend should be sustainable, not just fast.