NUI - Advanced UI Library with highly customizable components and built-in CSS styling

Show and Tell
1

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

Or try the example app - https://anvil.works/build#clone:3GYIU4PY32WJJYH7=VJVCIHWDDM2W2BG75J7O6NSP

Link to docs - Introduction | NUI for Anvil

This is still in Beta. If you have any questions or want to report an issue, you can do so on the GitHub repository - Divyesh06/nui-for-anvil · Discussions · GitHub

10 Likes
2

This looks like a crazy amount of effort. What was the inspiration?

2 Likes
3

Awesome! I love it! Now I can get rid of jQuery for 90% of my use cases (darn 10% needed for raw HTML and dynamic on the spot calculations, haha)

1 Like
4

And it even accepts media queries :face_with_open_eyes_and_hand_over_mouth:

1 Like
5

I had the basic idea years ago - Make Anvil more Role Free

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.

6 Likes
6

Great work and thanks for sharing!! :slight_smile:

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.

Again, awesome work @divyeshlakhotia :pray:

3 Likes
7

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.

Thank you for creating this!

2 Likes