NUI is a UI library designed to give you more control over your app’s interface, right from the Anvil designer.
It offers the following benefits out of the box -
Customise Everything - NUI aims to allow users to customise everything about their UI as per their brand with as minimal effort as possible. All within the designer itself.
Anvil Designer Friendly - It is designed to keep the workflow within the Anvil designer as much as possible
Wider Range of Properties & Events - NUI components offer a wider range of properties and events, allowing you to have more control over your design. Still need more? That’s also possible.
Use CSS anywhere - Apply CSS directly from the designer (no roles required). Get more control by defining CSS for specific states (hover, focus, etc.), and create and toggle between reusable presets. Best part? You can define CSS rules within the designer in a simpler syntax.
Better Structured HTML - NUI makes it easy to build properly structured pages with appropriate tags, making your apps more accessible and SEO-friendly
Support for more Icons - NUI allows support for three popular libraries - Font Awesome, Material Icons, and Bootstrap Icons
Easier integration with JS - Allows a more simplified approach for adding custom JS events or DOM manipulation
You can get started by Cloning the dependency - Anvil | Login
At that time, custom components weren’t that developed and there was no way to get live changes on them. But after the recent developments to custom components, there was nothing stopping this.
And it didn’t take that long. Probably 10-15 hours? And the time & efforts it saves me later should be worth it.
Hopefully the anvil team picks up this approach for the built in components and the anvil designer in general - i have been waiting for this for very long.
Amazing job! The presets at the top bar is genius!
And I love that the css animates by default.
Also, I’ve always wanted a way to “morph” elements from one type to another (i.e. textinput to textarea)
I’ll check out the git to properly request some features.
This is absolutely amazing - this is exactly the sort of thing we were hoping to enable you to build with the new approach to themes!
We’d love to hear your feedback about the process of building this toolkit. It has definitely caused us to accelerate documenting some (currently internal but scheduled for public release) hooks you could use to make it even slicker
Thanks! There were definitely a lot of improvements to custom components that I only found out about when building this. And I did discover some hidden features (like inline editing and designer name) by taking a look at the source code from the m3 dependency.
Those are definitely examples of things we want to document fully, so you don’t have to grub through the docs.
Also on that list: Have you seen how the M3 components implement their spacing properties? They’re a superset of the CSS margin and padding, but produce a nice draggable widget in the designer, and there are a couple of handy functions in anvil.property_utils to make them super easy to implement
Definitely something I missed. And definitely something I would love to implement next. Currently, it just uses separate margin and padding properties, which are not as easy to use as the widget (And bad for someone like me who always forgets the order for the different sides)
You can do those too! They just don’t produce the nice combined margin/padding widget. (At least one built in Anvil component - FlowPanel I think - does this because we already had spacing meaning something else)
The v2 of NUI is now available. NUI is now available as a third party dependency using the following token - 3ACFHAQDBLLJX7FL
The new version also brings the following improvements, additions and changes
New Image and Link components
An experimental HTML to NUI converter which converts any html code into a proper anvil form with NUI components that you can customise or add interactivity to. Learn more at HTML to NUI Converter | NUI for Anvil
[Experimental] true_html_structure property in NUI containers that removes any anvil wrappers for components added to it. Used in the HTML to NUI converter. Note: This patches the default add_component method on Anvil and may break things. Use with caution.
Preview Settings - A designer-only component that adds extra functionalities while using the Designer. Currently has two features
True View - Disables some designer only settings for NUI components like placeholder text, min height and enables true_html_structure in design preview (makes component unselectable)
Inflate Containers - Adds padding around all containers to make it easy to select them.
Presets Container - Another designer only component where you can place all your form presets for easier access. (Previously, this was automatically created which sometimes caused issues with the anvil designer).
The margin and padding properties now use the proper widget.
New attributes properties for all NUI components that lets you set HTML attributes.
