Nomini

The tiny, reactive, server-driven framework

Uhh... what is Nomini?

Nomini is not your average JavaScript framework. Honestly, it’s barely a framework at all—and that’s the point. Nomini is just a tiny (~2kb) collection of useful attributes and helper functions that allow you to embrace writing JavaScript like the good old days, with a few modern conveniences layered on top.

Features:

nm-data: The heart of Nomini. Create a reactive data scope, similar to Alpine's x-data.
nm-bind: Take any property of any element, including classes and event listeners, and bind it to a reactive variable.

(With these two attributes, you can build almost anything! Still, there are a few more that punch well above their weight.)

nm-ref: Hold a reference to an element in your data scope.
nm-form: Automatically wire an entire form's inputs to reactive variables.
nm-use: A tiny templating system that takes advantage of nm-data scopes.

Installation

Nomini is a single file designed to be downloaded and vendored into your project (placed into a static directory).

That means you never have to worry about dependency updates, you can add new features as you please, or you can remove filthy code that you don't use.

If you prefer a CDN, just paste this line of code into your <head>.

<script defer src="https://cdn.jsdelivr.net/gh/nonnorm/nomini@0.3.0/dist/nomini.min.js"></script>

Flavors

Nomini comes in 2 different flavors, both tiny but surprisingly powerful:

Core (<800 bytes, 1.5kb uncompressed): Featherweight event and data-binding library, best for integrating with more advanced hypermedia libraries.
- Includes nm-data, nm-bind, nm-ref, standard helpers ($dataset, $watch, $dispatch).
Full (1.8kb, 4.5kb uncompressed): Syntactical sugar and AJAX support to bring Nomini closer to more advanced libraries.
- Includes above, nm-form, event modifiers, fetch helpers, reactive fetch variables, CSS transition support for fetch, nm-use, and advanced helpers ($persist).
Your own?: Use the custom bundler script to customize your own tiny copy of Nomini.

Credits

This project would not have existed without the inspiration of many other projects made by many talented developers. Thank you to:

Carson Gross for his work on htmx v4, by which the multipurpose fetch helper was inspired, and fixi, which was a benchmark for this library's minimalism.
Katrina Scialdone for their work on Ajaxial—a spiritual precursor to fixi—and Facet, which provided inspiration for the nm-use templating system.
Delaney Gillilan and the Datastar core team for their work on Datastar, which was a useful feature benchmark and inspiration for some of the helper functions.
Aiden Bai for his work on dababy, from which this project was directly forked for its innovative idea of JS property binding.