How to Write Client-side Python
Note: This guide includes screenshots of the Classic Editor. Since we created this guide, we've released the new Anvil Editor, which is more powerful and easier to use.
All the code in this guide will work, but the Anvil Editor will look a little different to the screenshots you see here!
In the Anvil Editor, double-clicking the button will open up the client code editor and create a Python function. When a user clicks the button in the running app, this function will run in the browser:
Inside your button click function, you can call Anvil’s
alert() function to display an alert that says hello to your users:
To test the code you’ve just written, click run at the top of the IDE, enter a name and click the
say hi button. Your function will be called and it will display the alert:
Let me show you how client-side Python in Anvil works. In Anvil, your app’s web pages are made up of one or more Forms.
To write client-side code that dictates the behaviour or styling of your app’s components, you can click on the code view in the Form Editor.
Both Forms and components are represented in code as Python objects.
This means you can write Python code to change the component’s attributes. For example, you could change the colour of the “Say hi” button:
In client code, you can import and use Python libraries like
datetime. You could use the
datetime library to log when a user says hello:
As Anvil apps use Python on the client-side as well as the server-side, you can call server functions and pass them the Python objects you’ve been working with in client code.
To learn more about client-side Python in 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 your User Interface
- Write client-side Python
- Write server-side Python
- Store data in a database
- Deploy your app