Live Chat

We'll need to share your messages (and your email address if you're logged in) with our live chat provider, Drift. Here's their privacy policy.

If you don't want to do this, you can email us instead at contact@anvil.works.

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

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.

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.

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

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

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("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

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

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.