How to build a web UI with Python

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

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

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 TextBox

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

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

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

Configuring a click event for the ‘Say Hi’ button

When you’ve finished your app, all you have to do is test it and use Anvil’s two-click deployment to publish it online for people to use. 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

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

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 our 10 minute Feedback Form Tutorial?

Get started

Build your own app with Anvil

If you’re new here, 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.

Try Anvil

Want to build an app of your own? Get started with one of our tutorials:

Data Dashboard

In this tutorial, you will learn to plot data using client-side Python code and deploy it online for others to see.
Go

Build Database-Backed Apps

In this tutorial, you will learn how to build a simple news aggregator app.
Go

Build a Simple Feedback Form

Build a data-entry app, and learn the techniques fundamental to building any Anvil app. In this tutorial, you will:

  • Write server-side Python
  • Build your User Interface
  • Write client-side Python
  • Store data in a database
  • Deploy your app
Go