Granite ERP
A multi-page ERP-style admin app, routed client-side with Pinecone Router.
Introducing Harmonia: Instant UIs, Zero Build Step
For a while now, Harmonia has quietly powered the user interfaces of the applications generated by codbex's low-code platforms, including Atlas. It has been battle-tested internally, refined release after release bit it was never talked about officailly - until today. We're announcing Harmonia publicly, a modern UI component library for Alpine.js, free for anyone to use under the permissive MIT license.
Why We Built Harmonia
codbex builds low-code and no-code platforms like Atlas, where application UIs are generated from intent files or BPMN diagrams rather than hand-written page by page. The applications those platforms generate needed a UI layer that is simple, lightweight, and renders entirely in the browser, not just for the end product, but for the development process that builds it.
That second part matters more than it sounds. When a UI is generated from a model, a developer or business analyst makes a change and needs to see it immediately. A framework that requires a compile or bundle step between "change" and "see the result" turns every iteration into a wait. Multiply that by the number of changes made across a project, and it adds up to real time and real cost.
So we needed a UI library that could render any change instantly, with no build step, while still giving us the flexibility, structure, and extensibility that build-step frameworks like React or Angular offer. On top of that, we wanted something that reflected codbex's own visual identity out of the box rather than fighting a component library's opinions about how things should look.
Nothing on the market quite fit that combination, so we built Harmonia.
What Is Alpine.js?
Alpine.js is a small JavaScript framework, often described as "jQuery for the Tailwind generation." It's included with a single <script> tag, adds behavior directly to your existing HTML through attributes like x-data, x-show, and x-on, and needs no compiler, no bundler, and no virtual DOM diffing step to work. You write markup, sprinkle in directives, and the page becomes reactive, immediately, in the browser.
This is a fundamentally different model from React or Angular, both of which are built around a component tree that typically gets compiled or bundled before it can run, and which shine when an application's complexity justifies that machinery. Alpine.js trades some of that architectural power for something React and Angular don't prioritize, a zero-build, instant-feedback development loop and a runtime small enough to not think twice about.
That tradeoff is exactly what made Alpine.js the right foundation for Harmonia. A component library built on Alpine inherits its no-build nature, which means it fits naturally into environments where markup itself might be generated, by a template engine, a low-code designer, or a server, and only needs to "come alive" once it reaches the browser.
What Harmonia Provides
Harmonia ships as a set of Alpine directives (x-h-button, x-h-select, x-h-dialog, and so on) rather than a component-tree abstraction. Under the hood, it provides the following.
- 70+ components including charts, layouts, and utilities.
- Accessible by default - proper ARIA roles and states, keyboard operability, and sensible accessible names on every component.
- Themeable through design tokens - spacing, colors, shadows, and fonts are defined as CSS variables, so light and dark mode work automatically and rebranding the whole library is a matter of changing variables, not overriding component internals.
- Built with Tailwind CSS v4 and esbuild, and distributed as plain CDN bundles, npm packages, or a WebJar, with no framework lock-in beyond Alpine itself.
- Agent-ready - Harmonia ships an agent-readable skill so coding agents like Claude Code and Hermes know how to use every component correctly, straight out of
node_modules.
To show what's possible, Harmonia's documentation includes full example apps built entirely with its components. Granite ERP is a multi-page admin app, Onyx Chat is a multi-page chat application, and Ember Habits is a mobile-first habit tracker.
Open in new tab
Onyx Chat
A multi-page team chat app with channels, direct messages, and reactions.
Ember Habits
A mobile-first habit tracker with bottom navigation, a quick-add floating action button, progress rings, and a completion calendar.
A Free Theme Generator
Design tokens are only useful if changing them is easy, so Harmonia ships a free, built-in theme generator alongside the docs. It's a visual tool, colors, shadows, and fonts are exposed as pickers and inputs rather than raw CSS variables, and it renders every component live as you adjust them. Pick a palette, preview it against real components instead of swatches, and export a stylesheet you drop straight into a project. No design tooling license or separate purchase required, it's part of Harmonia and part of the MIT license.
Charts, Drawn as SVG
Harmonia's chart components (bar, line, area, pie, doughnut, radar, polar area, scatter, bubble) are drawn as native SVG rather than to a <canvas>, and rely on no external charting library. That has real advantages. Charts inherit the page's theme colors automatically and adapt to light and dark mode the same way any other component does, and because the output is SVG, a chart can be exported directly to a scalable vector image that looks identical at any size, with a raster (PNG/JPEG/WebP) export available for tools that need a bitmap. The tradeoff is scope, Harmonia's charts cover the common cases well but are not a substitute for a dedicated charting library if a project needs a very large or specialized visualization surface. For everyday dashboards, they're often all that's needed, and they're already themed to match the rest of the UI.
Ready for Internationalization
Real applications need to speak more than one language, so Harmonia includes an opt-in i18next plugin. It adds an x-h-translate directive plus $t and $i18n magics, so translated text renders reactively and re-renders automatically when the language changes, with the language selection propagating across same-origin tabs and iframes. Like every opt-in plugin, it stays out of the default bundle until a project actually needs it.
Bring Your Own Icons
Harmonia ships a small set of built-in icons through its x-h-icon component, deliberately small rather than exhaustive. Icons are one of the easiest things to swap in a UI, so Harmonia doesn't lock a project into its own set. Any SVG icon set or icon framework works with Harmonia's markup-first approach, and for teams that want a large, ready-made set, an opt-in Lucide plugin is included, adding an x-h-lucide directive that keeps Lucide icons in sync with Alpine's lifecycle, including icons added dynamically.
Small Utilities for Everyday Pain Points
Alongside components, Harmonia ships a handful of standalone utilities for problems that come up in almost every UI project. Date formatting is a good example, formatting dates consistently across locales, field orders, and delimiters is a small thing that's easy to get wrong repeatedly across a codebase. Harmonia's x-h-date-format directive and $dateFormat magic handle it once, centrally, using the same locale-aware formatting engine as the date and date-time pickers, so every date in an application looks consistent without every developer reinventing the same formatting logic.
Built to Be Extended
Because Harmonia is built on Alpine.js, extending it follows the same pattern Alpine already provides. The Lucide and i18next integrations above are both ordinary Alpine plugins, opt-in, self-contained, and no different in kind from a plugin a project might write for itself. If a project needs an integration Harmonia doesn't ship, writing one follows a well-worn path rather than requiring a new architecture.
The same openness extends to styling. Harmonia's own components are built from a set of Tailwind-based utility classes it ships alongside them, and those same classes are available to consumers. That means a new, project-specific component built with Harmonia's utility classes and design tokens picks up theming, light and dark mode, and visual consistency automatically, and sits alongside Harmonia's own components as if it always belonged there, all without touching Harmonia's source.
An Honest Caveat
Harmonia renders entirely on the client. There is no server-side rendering of Harmonia components themselves, a page has to reach the browser before Harmonia's directives take over and make it interactive.
That's not a limitation in mixed rendering setups. A server can generate or assemble markup from templates, fragments, or intent files (exactly how codbex's own low-code products work), and Harmonia will happily take over rendering and reactivity once that markup lands in the browser. But Harmonia is not the right choice for applications that need everything fully rendered on the server. It's a UI library for web apps, not a full-stack or SSR framework, and we'd rather say that plainly than pretend it fits every use case.
How Harmonia Compares
Harmonia isn't trying to unseat the established players, it exists for a different set of priorities. Here's how it stacks up against some well-known UI libraries.
MUI is a mature, comprehensive component library, but it's React-only and requires a full build toolchain (bundler, JSX compilation) before anything renders. It's a strong choice if you're already committed to React and need its ecosystem, but that commitment is exactly what Harmonia avoids.
Ant Design offers similar enterprise-grade breadth, again bound to React (or Vue, via Ant Design Vue) and a build pipeline. For applications that don't need that much surface area, or that generate their UI dynamically, the build-step requirement is friction rather than a feature.
shadcn/ui is the closest in spirit to Harmonia. Instead of installing an opaque dependency, you copy components into your own codebase and own the markup outright. It's still React, though, and still assumes a bundler-driven project (Next.js, Vite) with Tailwind wired into the build. Harmonia gets you similar ownership of the markup, but with no build step at all.
SAP Fundamental NGX is Angular-only and, of the four, the heaviest in terms of framework commitment and tooling. It suits large enterprise Angular applications well, which is a different starting point from Harmonia's no-build, framework-light approach.
In short, Harmonia trades away full server-side rendering and the deeper architectural guarantees of a component-tree framework, in exchange for a zero-build, instant-feedback development loop and a lightweight runtime. If your application is already built around React or Angular and benefits from their build pipeline, that's a very reasonable place to stay. If you want components to render immediately, without a compile step standing between a change and seeing it, Harmonia is built for exactly that.
Try Harmonia
Harmonia is free and open source under the MIT license. Getting started is one script tag or one install.
sh
npm install @codbex/harmonia- Live docs and component gallery, codbex.com/harmonia
- Source code, github.com/codbex/harmonia
If you're building with an AI coding agent, Harmonia's agent-readable skill means Claude Code, Hermes, or any other coding agent can use every component correctly right away.
There is also a dedicated Claude Code Harmonia plugin. You can install it by executing the following commands:
sh
/plugin marketplace add codbex/harmonia
/plugin install harmonia@harmoniaGive it a try, build something with it, and let us know what you think.