# HTML to NUI Converter

You can visit the converter at

{% embed url="<https://html-to-nui.anvil.app>" %}

### 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

{% hint style="info" %}
The Converter does not work on JavaScript and can only convert static designs. Any script tag will be removed.
{% endhint %}

### How to Use the Container

* Visit [https://html-to-nui.anvil.app](https://html-to-nui.anvil.app/) and login/signup
* Click on Add App to create your first app. Enter the following details&#x20;

  * &#x20;**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

  <div><figure><img src="https://2537708928-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcUq5F4xEgEmzWWSSExeW%2Fuploads%2F56p5Xkz8YRH98egXNGUn%2Fimage.png?alt=media&#x26;token=a9de2071-f5cc-4d42-af2e-12e7f1b307ce" alt=""><figcaption></figcaption></figure> <figure><img src="https://2537708928-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcUq5F4xEgEmzWWSSExeW%2Fuploads%2F6qWZdCkWNJZkkkGRUky8%2Fimage.png?alt=media&#x26;token=a762bf3d-5ef4-4c1c-ad71-1095a75ed814" alt=""><figcaption></figcaption></figure></div>
* 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.&#x20;
* 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.&#x20;
* 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.

{% content-ref url="docs/designer-only-components" %}
[designer-only-components](https://nui-for-anvil.gitbook.io/nui/docs/designer-only-components)
{% endcontent-ref %}

### 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.&#x20;
* 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://nui-for-anvil.gitbook.io/nui/html-to-nui-converter.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.