Building a Web App User Interface with Python
Tags: python, webdev, programming
Published: 2021-09-01 14:53:09


# 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:

<figure>
  <img src="https://anvil-website-static.s3.eu-west-2.amazonaws.com/blog/uis-in-100-seconds/drag-and-drop.gif" alt="Dragging and dropping a Button component"><figcaption>Dragging and dropping a Button component</figcaption>
</figure>

Let's look at how you can use the [Anvil editor](https://anvil.works/docs/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](https://anvil.works/docs/editor#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](https://anvil.works/docs/editor#toolbox).

<figure>
  <img src="https://anvil-website-static.s3.eu-west-2.amazonaws.com/blog/uis-in-100-seconds/editor-tour.gif" alt="A quick tour of the Anvil Editor"><figcaption>A quick tour of the Anvil Editor</figcaption>
</figure>

You can drag and drop components, like [Labels](https://anvil.works/docs/client/components/basic#label), from the toolbox to build your user interface. This hello world app will also need a [TextBox](https://anvil.works/docs/client/components/basic#textbox) for users to enter their name:

<figure>
  <img src="https://anvil-website-static.s3.eu-west-2.amazonaws.com/blog/uis-in-100-seconds/add-label-textbox.gif" alt="Dragging in a Label and a TextBox"><figcaption>Dragging in a Label and a TextBox</figcaption>
</figure>

To configure components, you can edit their [properties](https://anvil.works/docs/client/components/basic#basic-components) on the right hand side in the [Properties Panel](https://anvil.works/docs/editor#properties-panel). This includes both the information the component displays and its styling:

<figure>
  <img src="https://anvil-website-static.s3.eu-west-2.amazonaws.com/blog/uis-in-100-seconds/component-properties.gif" alt="Changing the properties of the Label and Button components"><figcaption>Changing the properties of the Label and Button components</figcaption>
</figure>

Every component is a Python object, so you can also set the component's properties in the [Form Editor's](https://anvil.works/docs/editor) Code View:

<figure>
  <img src="https://anvil-website-static.s3.eu-west-2.amazonaws.com/blog/uis-in-100-seconds/properties-in-code.gif" alt="Changing component properties in code"><figcaption>Changing component properties in code</figcaption>
</figure>

All components have [events](https://anvil.works/docs/client/ui#component-events) they can raise. For example, when a user of your app clicks a [Button](https://anvil.works/docs/client/components/basic#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](https://anvil.works/docs/client/python/alerts-and-notifications#alerts-and-notifications) to display an alert that says hello to your users:

<figure>
  <img src="https://anvil-website-static.s3.eu-west-2.amazonaws.com/blog/uis-in-100-seconds/click-event.gif" alt="Configuring a click event for the 'Say Hi' button"><figcaption>Configuring a click event for the 'Say Hi' button</figcaption>
</figure>

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:

<figure>
  <img src="https://anvil-website-static.s3.eu-west-2.amazonaws.com/blog/uis-in-100-seconds/run-your-app.gif" alt="Running the app and testing the 'Say Hi' button"><figcaption>Running the app and testing the 'Say Hi' button</figcaption>
</figure>

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:

<figure>
  <img src="https://anvil-website-static.s3.eu-west-2.amazonaws.com/blog/uis-in-100-seconds/add-components-in-code.gif" alt="Adding a component to the UI in code"><figcaption>Adding a component to the UI in code</figcaption>
</figure>

Anvil comes with all the [usual UI components](https://anvil.works/docs/client/components) - buttons, text boxes, drop-downs, tables, and so on. And if that’s not enough, you can create your own [custom components](https://anvil.works/docs/client/custom-components) and share them with other applications.

---

That was user interfaces with nothing but Python. To learn more about creating user interfaces with Anvil, why not **get started with Anvil's 10 minute Feedback Form Tutorial?**

[10 minute Feedback Form Tutorial](https://anvil.works/learn/tutorials/feedback-form)

> **Want more quality developer content?**
Follow me for more software development content! {% user codingwithryan %}