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.

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 and Button into the page.

Change component properties

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’.

Set up an event handler

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

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.

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

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.