Excited to share this handy tool I have been working on which should allow designing stuff using html/css (or just let AI generate the UI code for you) and get it all converted to an Anvil form with NUI Components
You can test it out here by setting up your app -
https://html-to-nui.anvil.app
Please ensure that your app has this as the dependency (which is a new version of NUI with specific features to support this)
Note: This is not production ready at all yet. At the current stage, it is more of a demo to play around with. There could be a lot of broken things hrere
How does this work?
NUI components resemble HTML elements more closely. There is specific tags for components, options for custom css etc. In the new version, html attributes have also been added.
Due to this, NUI components can behave like any html element. Even the ones that aren’t available in the component library. For ex. an image element (which is not there yet in NUI) becomes a label with src attribute and a dropdown becomes a container with options as a label element.
Any style attribute gets mapped to the css property of the NUI component. Classes are mapped to presets. And a generic stylesheet component has also been added that takes other css.
Currently, bugs are expected with this. Feel free to report them.
Also, the converter app itself was built in a hurry and currently lacks more features as well as proper navigation library. Expect them to be added soon