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.
Drop a TextBox and Button into the page.
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’.
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’.
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.