Latest Release
Numl v1.0.1 is the latest version released.
This documentation is a work-in-progress. If you get stuck, reach out for help in our Discord channel for chat support.
Numl is a library of Web Components and a Runtime CSS Framework for rapidly building UI that follows your Design System.
Blazing-fast prototyping using only HTML
Works with popular JS-Frameworks
Don’t require a build step, works with CDNs
Don’t require writing CSS, fully customizable in runtime with HTML or JS
Style mapping to state or screen width
Runtime theme generator with Dark Scheme and High Contrast Mode
Comprehensive Design System with dozens of tokens out-of-the-box
Compatible with Static Site Generators
Built with accessibility in mind
Free and Open source
Still don’t get…
You can consider this a replacement (at least partial) for HTML, CSS and even JavaScript in some cases.
It also fits the following definitions:
A language to build modern web UIs.
Multi-purpose HTML Framework
Modern CSS Framework with a unique set of features.
CSS Methodology with own future-proof approach.
Low-level JS Framework based on Custom Elements with life-cycle hooks and UX-oriented features.
Comprehensive Design System out-of-the-box.
A decent-sized set of reusable UI Components.
Who is Numl for?
For beginners – Use a well-thought-out Design System with automatic Dark Scheme and High Contrast Mode for rapid development of adaptive and accessible UIs. Create new components by nesting or/and styling foundation elements.
For enthusiastic – Customize the Numl Design System to the smallest detail in runtime using HTML. Use behaviors and control system to add simple interactions. Add your favorite framework (Vue.js, Angular, React, Svelte…) for complex logic.
For experts – Use JavaScript API to create elements that follow your Design System on top of the Numl. Integrate Design Tokens into elements to have more control. Add your own unique elements, styles, behaviors, and tokens.
Another UI Framework? Why should I care?
All-in-one – Numl is both a markup language for rapidly building responsive interfaces and a set of ready-to-use highly-customizable accessible elements. So you can use a single comprehensive tool to compose and style web applications. It’s also possible to create simple interactions using only HTML.
Unique – Numl is based on unique CSS generation technology that allows you to unleash all the power of modern CSS and take all styles under your control.
DX Focused – Numl is focused on providing the best possible Developer Experience. It has lots of built-in helpers and solutions for routine UI development and its approach is convenient for maintaining and refactoring.
Universal – Numl is built on top of Web Components, a modern web API to create reusable UI elements, and it’s compatible with most modern JS-frameworks. You can use it as is or create lightweight wrappers for your favorite framework to improve DX, SSR and SEO.