This feature is optional - you do not need to know HTML to use Anvil!
However, if you do know HTML, or employ a web designer who does, this reference will allow you or them to create a beautiful template into which you can easily drag-and-drop your Anvil components.
You can set the raw HTML of a Custom HTML form to anything you like by clicking the ‘Edit’ button in the Properties Panel:
You can also open the HTML editor by choosing ‘Edit HTML’ from the three dots menu at the top of the Form Editor.
This will open the HTML Editor at the bottom of the Form Editor, and you can expand the panel by clicking the separator bar:
This will open the HTML Editor to the right of the Form Editor:
As you edit the HTML, you will see the changes appear live in the Form Editor. You can designate slots in the HTML to support dragging and dropping new components into your custom Form - see slots and templating for details.
Any element in your Form’s HTML can be accessed from your Form’s Python code. To access an element, you’ll first need to give it the
anvil-name=<name> attribute. Then, in Python, you can look up the element in the Form’s
For example, if you have the following element in your HTML…
…you can then find that element in Python:
my_element = self.dom_nodes["my-element"]
An Anvil HTML template has one or more areas into which components can be dropped, called “slots”. HTML slots are created by adding
anvil-slot-repeat as an attribute to any element of your HTML.
Anvil themes use “slots” to create templates for your Forms. For instance, the Anvil Material Design 3 theme has a slot called
title where you can drag and drop a Label component to use as the title for your app. You can create your own HTML templates using slots.
Old HTML templates made use of explicit drop zones, along with HTML slots, to define where components would land. However, drop zones are no longer necessary and we advise against using them anymore.
If you want to read more about how explicit drop zones worked, visit the Classic Editor docs.
The simplest way to create an HTML slot is by adding the
anvil-slot attribute on an HTML element. Every time a component is dropped into a slot created with the
anvil-slot attribute, it will get added inside that HTML element.
<!-- Each component added to the "default" HTML slot will be inside the same div with a lightblue border -->
style="border: 2px solid lightblue">
When a component is dropped into an HTML slot, that component will automatically get a
slot container property indicating in which component it is nested:
Another way to create HTML slots is to use the
anvil-slot-repeat is added to an element, this element will not appear on your page when the form is blank, but for every component added to that slot, a new copy of that element will be created, and the component will be added to the end of it:
<!-- Each component you drag and drop onto this "default" slot
goes in a new div with a pink border -->
style="border: 2px solid pink">
If you don’t want your components to be added to the end of your
anvil-slot-repeat element, you can also specify deeper wrapping. If there is an element with the attribute
anvil-component-here inside your
anvil-slot-repeat element, the component will go there rather than at the outside of the repeat.
In the example below, we create a box with a pink border for each element, inside which is a box with a blue border, inside which is our component:
Designer prompts and placeholders
You can use
anvil-designer-only to include prompts to the designer that will not appear in the final app. Adding the
anvil-designer-only class to an element makes it invisible when the app is run.
<!-- The first div will only be visible while editing your app in the designer -->
<div class="anvil-designer-only" style="color: gray; font-style: italic;">
Drop components below
<div anvil-slot="default" style="border: 2px solid lightblue; padding: 5px"></div>
You can also add placeholders that will show up if nothing is added to a slot. You just need to add
anvil-if-slot-empty=<name-of-empty-slot> to the placeholder element. For example, in the code block below, we’ve created a placeholder element that will show up only if the
title slot is empty.
<div anvil-if-slot-empty="title">Drop a title here!</div>
Do you still have questions?
Our Community Forum is full of helpful information and Anvil experts.