HTML to NUI Converter

The HTML to NUI Converter lets you convert HTML snippets into customizable Anvil forms with NUI components. This allows using any HTML templates or AI generated designs within Anvil too.

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 use the converter on. 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)

• You need Python installed on your system

The Converter does not work on JavaScript and can only convert static designs. Any script tag will be removed.

How to Use the Container

• Visit https://html-to-nui.anvil.app and login/signup

• Click on Add App to create your first app. Enter the following details

  • App Name - Name of your Anvil app. Doesn't have to be exactly the same as your actual app name (This is just for your identification)

  • App Git URL - The Git URL of your Anvil app. You can access it in your Version History

  

  
• After creating an app, click on it and add a form. You can use any valid Python variable name here. The form will be made with that exact name in your App (however, you can change it later in the Anvil Editor)

• After creating the form and clicking on it, you will be taken to the main converter screen. Here, you can enter your HTML code and see a live preview of it.

• Once done, click on Create Anvil Form. In this screen, you can specify the branch name to add the form to (master by default). Finally, hit the Generate Python Script to get a Python file.

• Run this file locally on your PC. It should automate the process of adding the form to your app in the specified branch.

• Go back to your Anvil App (reload may be required). You should now see that same form added to your app.

General Tips

• Try using a basic template (like Custom HTML) instead of CSS-heavy themes like Material Design. This isn't compulsory, but the inbuilt CSS may slightly alter your design.

• Disable Bootstrap from your Anvil app. Follow the guide at https://anvil.works/forum/t/how-do-i-start-with-a-truly-blank-project-no-built-in-html-css/25294/4?u=divyeshlakhotia for the exact steps.

• The preview in the Anvil Designer may not be as accurate as the actual view when you run it (because the true_html_structure property isn't applied in the designer). However, you can get around this using the true_view property in Preview Settings.

Designer Only Components

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 modify and add events to, but it can still work. As more components are added, the results should get better.