Introducing Prototope - utility-first CSS-in-JS library!

You might know that CSS-in-JS has been growing in popularity recently. Due to better maintainability and flexibility, JavaScript has become a legitimate alternative to usual CSS.

Now, I’ve recently created a new JavaScript UI library called Isotope with a goal of combining high performance and memory efficiency (check out the benchmark) with approachable and easy-to-use API. Personally, I think that results look promising. But naturally, as it’s a relatively-new library, it doesn’t have an ecosystem required to be a legitimate go-to tool for many of its potential users.

With this in mind, I’m happy to announce that Isotope ecosystem is now extended by one new library - Prototope! It’s a CSS-in-JS library to go along with Isotope, but with a little twist.

I’ve recently been exploring the Tailwind CSS library, that’s increasingly growing in popularity.  The concept of using a set of utils to built your UI really intrigued me, and led me to prototyping and bringing my designs to production much faster, with better experience along the way. With this in mind, I started using Tailwind with Isotope, which of course is still an option, but then I got an idea - what if I bring Tailwind-like library to JS and integrate it with Isotope’s JS-first approach? And that’s how Prototope was born.

The library builds upon Isotope’s context and directives functionalities, in order to provide a set of easy to use utility functions. Here’s an example:

import { Prototope, bgColor, h, w } from "@isotope/prototope";
import { createDOMView } from "@isotope/core";

const view = createDOMView(document.getElementById("app"));
const { node } = view.$(Prototope());
const box = node.div([bgColor("primary"), h(8), w(8)]);

Apart from nice API, Prototope is quite small for a library of its kind (7.5KB min+gzipped) and it’s written in TypeScript.

So, if you’re interested in such a tool, be sure to check out the docs and drop a star on Isotope ecosystem monorepo, if you like it!

For more content about Isotope, Prototope and web development as a whole, follow me on Twitter, Facebook or through my newsletter. Thanks for checking in!