You are currently viewing the new Anvil Editor Docs.
Switch to the Classic Editor Docs
You are currently viewing the Classic Editor Docs.
Switch to the new Anvil Editor Docs

Quickstart: User Interfaces

Build your UI visually and write Python to make it work

Anvil allows you to build user interfaces quickly with its drag-and-drop editor. You can also write client-side Python code to set up user interface behaviour.

Follow this quickstart to build a page with a TextBox and a Button, then make the Button trigger an alert box.

Create an app

Log in to Anvil and click ‘New Blank App’. Choose the Material Design theme.

Location of the Create App button

Location of the Create App button

Add components

You will see your app in the centre of the screen. On the right is the Toolbox, which contains components to drag-and-drop.

Drop a TextBox TextBox icon and Button Button icon into the page.

Drop a TextBox TextBox icon and Button Button icon into the page.

Anvil Design View with a UI consisting of a TextBox and Button

Anvil Design View with a UI consisting of a TextBox and Button

Change component properties

Select the Button you just added to the page. Below the Toolbox, there is the Properties Panel, where you can modify the text on the Button.

Select the Button you just added to the page. Then modify the text on the Button by either double clicking the Button’s text in the designer or editing the text in the Properties Panel below the Toolbox.

Change it from ‘button_1’ to ‘Say Hello’.

Changing the text of a Button using the Properties Panel

Changing the text of a Button using the Properties Panel

Set up an event handler

Now scroll to the bottom of the Properties Panel. There is a list of events for this Button.

Click the blue arrows next to ‘click’.

Configuring a click event handler for a Button using the Properties Panel

Now click the on click event button in the Object Palette.

The `on click event` button

The on click event button

Write some Python

You will be taken to the Code View. This is Python that runs in the browser. The button_1_click method runs when the Button is clicked.

Replace the pass with this code:

    alert(f"Hello {self.text_box_1.text}!")

Run your app

Now click the ‘Run’ button at the top of the screen.

Running your app in the editor

Running your app in the editor

You’ll see your app running. Enter your name into the TextBox and click the Button. You should see an alert with a greeting.

Final app showing an alert box greeting the user

Final app showing an alert box greeting the user

Copy the example app

Click on the button below to clone a finished version of this app into your account.

Next up

Want more depth on this subject?

Read more about building user interfaces in Anvil.

Want another quickstart?

Every quickstart is on the Quickstarts page.


Do you still have questions?

Our Community Forum is full of helpful information and Anvil experts.