HTML to NUI Converter

The HTML to NUI Converter lets you convert HTML snippets into customizable Anvil forms with NUI components

You can visit the converter at

HTML to NUI ConverterHTML to NUI Converter

Prerequisites

Before using the converter, you need the following prerequisites

• Add the NUI dependency to the app you want to convert. A minimum of v2.0 is required

• Your SSH key has to be added to your Anvil Account. You can follow the guide at https://anvil.works/docs/how-to/app-server/linux-ssh-key-setup#setting-up-an-ssh-key-to-clone-your-anvil-app-with-git (The steps work with Windows as well)

The converter will generate a Python script that automates the process of adding a form to your Anvil app with the proper YAML code.

How it Works

The converter parses through your HTML code and generates the equivalent NUI components

• It maps HTML tags like img, btn, a, etc, to their respective NUI components (Image, Button, Link, etc.). By default, it uses a label. If any HTML element has nested children, a NUI container is used.

• The HTML attributes are mapped to the equivalent component properties (placeholder, src, disabled, etc.) Other attributes are added to the generic attributes property

• Any CSS in the style attribute is converted to the equivalent component properties (foreground, background, etc.). Other CSS properties are added to the CSS property.

• Any class rules are converted to presets. Other CSS rules are added to the generic stylesheet component.

• Script tags are ignored

The converter usually never fails. However, it may not generate the best results in all cases. For ex, a dropdown becomes a NUI container with options added as labels to it. This may not be as easy to use and add events to, but it can still work. As more components are added, the results should get better.