Building a Web App User Interface with Python

Coding With Ryan
3 min readSep 1, 2021


Anvil lets you build your app’s front-end entirely in Python — no HTML, CSS or Javascript required. You can build your UI by dragging and dropping components in Anvil’s visual designer or by adding components using Python code:

Dragging and dropping a Button component

Let’s look at how you can use the Anvil editor to create a user interface by turning this app into a “hello world” app that says hello to your users.

In the middle of the Anvil IDE is the Form Editor which is split into the Design View and the Code View. On the right of the Anvil editor you will find the Toolbox.

A quick tour of the Anvil Editor

You can drag and drop components, like Labels, from the toolbox to build your user interface. This hello world app will also need a TextBox for users to enter their name:

Dragging in a Label and a TextBox

To configure components, you can edit their properties on the right hand side in the Properties Panel. This includes both the information the component displays and its styling:

Changing the properties of the Label and Button components

Every component is a Python object, so you can also set the component’s properties in the Form Editor’s Code View:

Changing component properties in code

All components have events they can raise. For example, when a user of your app clicks a Button component it raises a click event. We can create a Python method in the Code View to be called when this happens. In your Button’s click method, you can call Anvil’s alert function to display an alert that says hello to your users:

Configuring a click event for the ‘Say Hi’ button

Now you can click run to test your app and it’s interface. Your users can now enter their name and clicking the say hi button displays the alert:

Running the app and testing the ‘Say Hi’ button

Using the drag and drop designer isn’t your only option for building user interfaces in Anvil. You can also create and add components to your user interface directly in code:

Adding a component to the UI in code

Anvil comes with all the usual UI components — buttons, text boxes, drop-downs, tables, and so on. And if that’s not enough, you can create your own custom components and share them with other applications.

To learn more about creating user interfaces with Anvil, why not get started with the 10 minute Feedback Form Tutorial?

Click here for the 10 minute tutorial.

Build your own app with Anvil

If you’re new to Anvil, welcome! Anvil is a platform for building full-stack web apps with nothing but Python. No need to wrestle with JS, HTML, CSS, Python, SQL and all their frameworks — just build it all in Python.

Want to build an app of your own? Get started with one of Anvil’s tutorials:

Don't forget!Follow me for more software development content!

Originally published at



Coding With Ryan

I’m Ryan and I'm a software developer. I write about Python, Anvil and developer relations. Follow me to see high quality tutorials.