USUI is a lightweight JavaScript toolkit designed to make creating menus or configs for Userscripts easier.
You can create Popups, which are draggable and customizable windows, with many settings to change their behavior.
USUI also comes with built-in modules to ease development of configuration menus, and have a standard look across browsers and mobile.
USUI is currently in open-beta, so anyone's allowed to use it, just be wary of any sudden changes
or stability issues.
Report bugs, or request features on GitHub
Modules
The Color Picker module (iRGB()) creates a psuedo-input element that acts to replace
the already existing HTML color inputs (<input type="color">) built-in to many
browsers, as they are all bad in their own ways, including this one actually.
Also important to note: you have to use input.dataset.value
and not just input.value. Yes, the styling is based on Firefox's color inputs.
Building Blocks are a set of modules designed to make creating forms, info boxes, and configs easier.
You can create text and graphics, button groups, and input fields very easily with them.
Range inputs (sliders, <input type="range">) have a way to automatically
add tick marks to indicate minimums and maximums, as long as they are provided.
You can view examples of USUI's modules by clicking the buttons in the titlebar.
Why and What's next
After creating an entire popup window system like USUI from scratch for just one Userscript,
which never even saw the light of day,
I decided it would be much easier to implement only one little library of utilities,
as opposed to creating a new one per Userscript.
The main ethos when I was making USUI was that the default theme for popups and modules should
look very barebones by default, which enables you have the liberty to customize them with much
more freedoms, where literally anything else makes it look better.
Many more modules are planned to be added in the future, once I finally get around to them.
I will probably continue to maintain USUI into the future, in case of impending GM API or other
changes in the JavaScript ecosystem.
I also fully intend on finding a purpose to this toolkit when creating or updating my existing
Userscripts, as this allows a lot of potential ideas to be made faster and easier.
Usage
You can use USUI by adding @require https://usui.qog.app/lib/USUI.js in the Userscript metadata block,
and include the CSS using USUI.spawnCSS(), where you can specify the host
and if it should overwrite any existing USUI. To refresh the version that's cached, add
search parameters to the URL, e.g. @require https://usui.qog.app/lib/USUI.js?v=25.
/usui/usui/ is the development branch, I just find this easier to manage
than using git branches and shit.
Credits
Made by CCN0
"UserScript UI" logo, wordmark and icon use the font Arimo by Steve Matteson.