Componyx: UI components & data binding without the framework tax

Componyx started about 18 years ago as a personal project. It began with a small collection of UI components and a browser compatibility library, a bit like what people used jQuery for back then. As web technology evolved, I got new ideas about what I could build, and eventually I wrote the first lines of what became Bindary.

When most of the industry moved to React, Angular and the build tools that come with them, I kept building on my own codebase. That wasn't originally a statement against available frameworks, it was simply the way I preferred to build software.

Today it's two products in one package: Componyx.UI, with 25+ components, an application shell and a visual form builder, and Bindary, a data-binding layer for plain HTML. You can use them together or either one on its own. Everything runs straight in the browser, without a build step and with zero runtime dependencies. It's for anyone tired of build steps and dependencies, or just curious to try something different, and it really shines in real apps with grids, menus, forms and data. And as of this week, it's on npm, NuGet and GitHub, free to use, with docs and live demos at componyx.com.

What makes it different

Most frameworks give you the tools to build components yourself. You still pick a UI kit, a form library and a data grid, set up a build, and wire it all together. Componyx.UI comes with the components already built: 25+ of them, from a simple button to a data grid, an app shell and a form builder. They all extend the same base component and share the same lifecycle, so once you know how one works, you know how they all work.

They also work on plain HTML. Componyx.UI detects elements with a ui-type attribute and renders them as components, either automatically or when you trigger detection yourself. Newer components are written as standard Web Components, used through their own custom tag. Either way, you can add them to any page your server already renders. And if you'd rather skip the markup, every component can also be created entirely in JavaScript.

Componyx.UI also has a modular design: components are built from other components. The same Button is used in the Menu, the TabStrip and the AppSkin, and the same Box renders the Menu and DatePicker dropdowns as well as the Dialogs.

How to use it

A component is plain HTML with attributes:

<a ui-type="Button" ui-text="Click me" ui-command="alert('Hi!')"></a>

Bindary uses b-* attributes. Here's some data, a loop and an expression:

<ul b-context="shop">
    <li b-repeat="items">
        <b b-value="name"></b>: {{price > 10 ? 'expensive' : 'cheap'}}
    </li>
</ul>

And the two together, with a component property bound to data:

<div b-context="sizes">
    <div ui-type="ComboBox" ui-placeholder="- Select -"
        ui-item-list="{{options}}" ui-observing="true"></div>
</div>

$bindary.appData.shop = {
    items: [{ name: "Coffee", price: 3 }, { name: "Book", price: 15 }]
};

$bindary.appData.sizes = {
    options: [{ text: "Small" }, { text: "Medium" }, { text: "Large" }]
};

Change a price and only that one line updates. Push a new option into the array and the combo box updates itself. Bindary uses Proxies under the hood, so only what's bound to the changed data gets touched, without a virtual DOM.

To keep these examples short, they use Bindary's global data store. For real apps you can also write Bindary components, where the data lives on the component class itself.

Setup is a script tag and a stylesheet. On .NET there's a NuGet package where it's a single tag in your head. It also works with Node, or inside an existing React or Vue app if you just want to try one component.

The Form component

The Form is one of the biggest components in Componyx.UI. It lets you set up and organize forms quickly and it has a drag-and-drop build mode. A visual form builder is often a separate library or an online service. Here it's simply part of the Form component.
Note that the build mode is the one feature that needs Bindary. Every other component works fine with or without it.

A few honest notes

The package is free to use, commercially too. It isn't open source in the OSI sense. It's source-available under the Business Source License 1.1 and each release switches to MIT four years later. I chose that because this is one person's work and I don't want to see it rebranded.

I'm not taking pull requests on the core yet. Over time, though, I'd love to work with a few like-minded developers who enjoy building this way as much as I do. If that sounds like you, get in touch.

You don't have to write code to help. Testing a new release, reporting a bug or pointing out something unclear in the docs is just as valuable.

I know "no build step" isn't for everyone. But if you build business apps with lots of forms and data and you're tired of keeping a frontend toolchain alive next to your actual product, have a look. The docs have live demos, so you can see it working before you install anything.

If you give it a try, I'd love to hear what works for you and what doesn't.

Docs and demos: componyx.com

GitHub: componyx/componyx.ui

npm: @componyx/ui

NuGet: Componyx.UI