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 into Anvil’s visual designer or by adding components using Python code:
Drag and drop a Button component
Let’s see 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 divided into design mode and code mode. To the right of the Anvil Editor, you will find the Toolbox.
A Quick Tour of the Anvil Editor
You can drag and drop components, such as labels, from the toolbox to build your user interface. This hello world app will also need a TextBox for users to enter their name:
Drag a label and text box
To configure components, you can edit their properties on the right side of the Properties panel. This includes both the information displayed by the component and its styling:
Changing Label and Button component properties
Each component is a Python object, so you can also set component properties in the Code view of the form editor:
Editing component properties in code
All components have events they can trigger. For example, when a user in your application clicks on a Button component, it fires a click event. We can create a Python method in Code view to call 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 hello” button
You can now click Run to test your application and its interface. Your users can now enter their name and click on the say hi button displays the alert:
Running the app and testing the “Say Hello” button
Using the drag-and-drop designer isn’t your only option for creating user interfaces in Anvil. You can also create and add components to your UI directly in code:
Add a UI component in code
Anvil comes with all the usual UI components – buttons, text boxes, dropdowns, tables, etc. 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?
>>> Start
Create your own app with Anvil
If you are new here, welcome! Anvil is a platform for building complete web applications with nothing but Python. No need to struggle with JS, HTML, CSS, Python, SQL and all their frameworks – just build everything in Python.
>>> Try the anvil
LOADING
. . . comments & After!