Prototope is an Isotope-based JavaScript library for speedy UI prototyping.

Why Prototope?

• Innovative CSS-in-JS - Prototope bring util-first styling approach to JavaScript.
• Isotope-based - Prototope is based on Isotope - fast & lightweight UI library - to utilize its simple API and powerful capabilities.
• Simple - Prototope's API is simple, and utility-based, allowing you to learn it and build your app in a matter of minutes!
• TypeScript-ready - Prototope is written in TypeScript, enabling autocompletion and other useful features in modern editors.

Prototope is inspired by Tailwind, if you're looking for a CSS equivalent of Prototope, check out Tailwind. For more in-depth comparison go here.

Installation

npm install @isotope/prototope

Usage

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)]);

Interested?

Get started by checking out the docs.

Questions?

Have a question or want to chat about Prototope? If so, check out the Discord community!

Support Prototope

Help make Prototope better by contributing code or fixes, or donating: