uiloos a Headless Component Library

Hacker News

Share card

uiloos a Headless Component Library

Hi my name is Maarten Hus and today I'm releasing my commercial headless component library. It can be used to create carousels, tabs, accordions, sortables, image galleries, typewriter animations both single and multi cursor, notification centers, modals, flash messages, date pickers, date range pickers and calendars. My story is that I've been a web developer since 2007 and during this time I keep having the same problem: I need some functionality such as a carousel, or date picker, or a way to show flash messages, and I find a nice library with all the features I need... but it does not integrate well. Either the CSS of the component causes conflicts, or the component cannot easily be customized visually or structurally. This makes using libraries not always feasible when branding is important. It can be so jarring to see a component that is completely out of style with the rest the site. At the same time I also got to work with web developers that are masters of CSS and accessibility, but programming complex JavaScript is just out of their reach. They can copy and paste examples, and fiddle with existing code but find it difficult to write new code. So whenever you need to be in total control of the HTML and CSS you are mostly out of luck, and you will have to roll up your sleeves and program the thing yourself. Which always ends up taking way more time than you initially estimate, as UI components are surprisingly fickle beasts. This is where the idea for uiloos came from: what if there was a library of common behaviors for the web which can easily be configured for your specific needs. Want a carousel that automatically goes to the next slide, just configure it. Want a carousel that stops whenever the user interacts with the carousel, just configure it. Want a carousel that is "circular" (last slide goes to first slide), just configure it. You bring your designs, your HTML, your CSS and your accessibility story, and let me handle those pesky behaviors. In my mind uiloos has three parts: the first is the core which are just plain JavaScript (written in TypeScript) classes and functions in which all the behaviors are encoded. These are then unit tested against loads of scenarios. The second part are the bindings for various frameworks, which are at this time : Angular, React, Svelte, Vue and Alpine.js. They make handling the DOM manipulation a breeze. You can also use vanilla JavaScript in combination with the core, but you will have to handle the DOM manipulations yourself. I've tried to make this feasible by making every component of uiloos observable. This means you can subscribe to changes and update the DOM in one place, but be able to trigger events from anywhere else. I call this the "sink" based model, as all events flow to the same drain. The third part is documentation, from API docs, to examples, to tutorials and many sandboxes. The idea being that what cannot fit into uiloos core, such as various techniques can be stored there. Techniques such as how to set CSS variables from JS, or how to write those `useEffect` calls in React. My end-goal is to collect all UI behaviors into uiloos, and this requires time and therefore money. So I made the decision to make this a commercial library, which in turn sends me into the notoriously difficult devtools market. So which me luck! My pricing strategy is that you pay per domain on which you use uiloos, or per developer if you are a web agency, with a subscription for updates. It also has a perpetual license so if you stop your subscription you always have a fallback. Also to make uiloos as easy as possible to integrate with a project it is hosted on NPM, and does not require any sort of activation / phone call home in order to work. Be sure to check out the examples, and if you have any questions please ask them!