How to build a web UI with Python
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.
Every component is a Python object, so you can also set the component’s properties in the Form Editor’s Code View:
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:
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:
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:
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?
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.
Want to build an app of your own? Get started with one of our tutorials:
Build Database-Backed Apps
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:
- Build your User Interface
- Write client-side Python
- Write server-side Python
- Store data in a database
- Deploy your app