Chapter 1:
Build your user interface
Let’s start by building your UI using Anvil’s drag-and-drop editor.
Step 1: Create an app
Log in to Anvil and click ‘Blank App’. Choose the Material Design theme.

First, name the app. Click on the name at the top of the screen and give it a name.

Step 2: Add the first components
We construct the UI by dragging-and-dropping components from the Toolbox into the page.
The Theme Elements part of the Toolbox contains components that are specific to the current app’s Theme. Here, you’ll find the Card component:

Location of the Card component in the Toolbox
Drop a Card , and a Label
into the page.

Step 3: Change component properties
Below the Toolbox, you’ll see the Properties Panel, where you edit the styling and behaviour of your components.
Select the Label you just added to the page, and change the text
to ‘Feedback Form’.

Next, change the role
to Headline.

Step 4: Add field labels
Our feedback form will ask our users for their name, email address, and to leave some feedback.
We’ll use Labels for our input prompts. Drop three Labels into the page, and change their
text
properties to:
- Name:
- Email:
- Feedback:

Step 5: Add input components
Drop two TextBoxes and a TextArea
into the page for our user inputs, and rename them
name_box
, email_box
and feedback_box
.

We’re changing the name of each user input component, to make it easier to identify them from code.
In Chapter 2, we’ll set up a Data Table to store the data people enter.