The Anvil Editor

This is a picture of the Anvil Editor, with the most important parts labelled:

The App Browser lets you select which part of your app you are editing. Your app can contain:
- Client code (user interfaces and Python code that runs in the web browser)
- Server code (code that runs in a server-side Python environment)
- Services (Pre-built libraries and integrations like Data Tables, User management, etc)
The App Menu (aka the Gear Menu) is where you configure your application.
The Run Button runs the app in the Editor and shows the Output Panel (shortcut: Ctrl-Enter).
The Output Panel shows you everything that was print()ed when you last ran your app. For older log records, look at the App Logs.
The Form Editor displays what your user interface will look like, and lets you drag and drop components to create your UI. The Form Editor has two modes:
- Design View, which shows you how your Form will look when your app is running
- Code View, which shows you the Python class that describes how your Form behaves.
The Toolbox is where you pick new components to add to your UI.
The Properties Panel lets you configure the component you have selected in the Form Editor. (You can select components by clicking on them.)
The Component Tree shows you the hierarchical structure of the components in the current Form. (Click the dropdown to view the tree.)

The Anvil Editor with numbers 1 to 10 on the major sections. — The Anvil Editor

The App Browser is open by default and can be found by clicking the App button in the Sidebar Menu. It lets you select which part of your app you are editing:
- Client code (user interfaces and Python code that runs in the web browser)
- Server code (code that runs in a server-side Python environment)
- Assets (HTML, CSS and other uploaded files for your app. Editing these assets is entirely optional.)
The Sidebar Menu is where you configure your application, find your apps logs, and add pre-built libraries and integrations like Data Tables, User management, etc.
The Form Editor displays what your user interface will look like, and lets you drag and drop components to create your UI. The Form Editor has three modes:
- Design View, which shows you how your Form will look when your app is running
- Code View, which shows you the Python class that describes how your Form behaves.
- Split View, which displays both your Form design and the Python code.
The Object Palette lets you quickly and easily edit your component’s most commonly edited properties
The Version History Panel displays your app’s commit history and allows you to create new branches and clone your app with Git.
The Background Tasks Panel shows any running background tasks.
The App Console will appear after running your app. It shows the app’s output from print statements and exceptions.
The Run Button runs the app in the Editor and shows the App Console (shortcut: Ctrl-Enter). Clicking the dots menu gives you the option to run the app in split view or in a new window.
The Publish Button allows you to publish your app pubically or privately. Here, you can add and configure environments for your app.
The Toolbox is where you pick new components to add to your UI.
The Properties Panel lets you configure the component you have selected in the Form Editor. (You can select components by clicking on them.)
The Component Tree shows the hierarchy of components within the current Form and let’s you move components in the Form

App Browser

The App Browser lists the main parts of your app:

Client code - the Forms, Modules and Packages that define your app’s UI design and client-side behaviour.
Services - configuration pages for features such as User management, Data storage and Email
Theme - configuration of the overall look and feel of your app

The Sidebar Menu contains more options for building and configuring your app.

These are the options given in the Sidebar Menu:

App: The default view. Shows the App Browser.
Data: Add and configure Data Tables and Databases
Settings: Configure settings for your app:
- General: Change the name, description and logo of your app
- Python versions: Choose the version of Python running on the client and on the server.
- Dependencies: Add other apps to use as libraries or configure your app to use as a library
- Data Tables: Configure settings for Data Tables
- Collaboration: Configure sharing and cloning of your app
App logs: Get a log of exceptions and print()ed output from your app, split by user session and a list of current and past background tasks
Theme: Change the app’s colour scheme and add CSS roles to style components
Search: Search through your app

Clicking the blue plus button brings up a menu to add more features to your app, including the Email service, the Users service, the Uplink, App Secrets and built-in integrations. Selecting a feature will add it to the Sidebar Menu. It will also automatically add all the necessary imports to your code.

To remove a feature, right click over its corresponding icon in the Sidebar Menu and select ‘Remove Service’. This will also remove all the imports that are no longer necessary from your code.

The App Browser

The App Browser can be found by clicking . It lists the main parts of your app:

Client code - the Forms, Modules and Packages that define your app’s UI design and client-side behaviour
Server code - the Server Modules that run secure server-side Python
Assets - the HTML, CSS and other uploaded files for your app

You can add Forms, Server Modules, Modules, Folders and Services to your app by clicking on + Add Form or the dots menu.

You can also use the dots next to existing Forms and Packages to add new ones as well as to delete and rename things. For Forms and Modules, this menu also allows to choose what runs when your app starts. Forms have a few other options: you can duplicate them, or click ‘use as component’ to make them appear in the Toolbox as Custom Components:

You can add Forms, Server Modules, Modules, Folders and Services to your app by clicking on the plus buttons .

You can also use the down-arrows next to existing Forms and Packages:

To delete and rename things, use the down-arrow next to existing Forms, Packages, Modules, Server Modules and Services.

For Forms and Modules, this menu also allows to choose what runs when your app starts.

Forms have a few other options: you can duplicate them, or click ‘use as component’ to make them appear in the Toolbox as Custom Components.

The App Menu (aka Gear Menu) contains configuration and output relating to the entire app. Open it from the top of the App Browser:

Here are the options given in the App Menu:

Rename your app
Publish app: Configure your app’s URLs and other hosting/deployment options
Titles and Logos: Configure your app’s title, logo and description (useful for SEO and social media previews)
Share app: Clone your app, copy the app’s URL, clone it with Git, and export it as a file
Version history: save your app, revert to a previous version, publish a specific version, and clone it with Git
App logs: get a log of print()ed (and other) output from your app, split by user session
Background tasks: a record of all Background Tasks this app has run (including those running now)
Scheduled tasks: set Background Tasks to run according to a schedule, e.g. every Thursday at 3pm (similar to Unix’s cron)
Uplink: connect to code outside of your app (anywhere connected to the internet where you can write Python)
Dependencies: use other apps within this app, and make this app available to other apps
Delete your app
My Account: see your account details, configure two-factor authentication, add developers to your account, and upgrade your plan

Output Panel

The Output Panel shows the output of print statements within your app. It also shows tracebacks from unhandled exceptions, and (occasionally) messages from the Anvil system about your app.

Bottom Panel

App Console

The App Console will appear after you run your app. It shows the output of print statements within your app. It also shows tracebacks from unhandled exceptions, and (occasionally) messages from the Anvil system about your app.

Output from Server Modules will appear with a yellow background.

Output from Server Modules will appear with an orange border on the left-hand margin, while output from Client Forms and Modules will appear with a blue border.

The App Console showing printed output from the client

Exceptions will show a traceback - if the exception occurred on the server, the traceback will still show the whole call stack as if the code ran on the same machine. Clicking a link in the traceback will take you to the problematic line of code in the Code View.

The App Console showing an exception traceback coming from the server

When Background Tasks are running, their status is shown at the bottom of the Output Panel.

You can show/hide the Output Panel by clicking the >_Output button in the top-left of the Editor:

Click here to show/hide the Output Panel.

Background Tasks

Click on the Background Tasks tab to see the tasks that are currently running.

Version History

The Version History tab shows recent changes to your app and allows you to add and switch branches as well as clone your app with Git.

Designer Output

When in the design view, the Designer Output Console will appear if there are any component errors or a custom component prints something to the console.

Server Console

To launch a server console, click the button in the top right. This will bring up a REPL where you can connect directly to your chosen Python environment on the server.

Zen Mode and Quick Switcher

Activating Zen mode maximises an editor tab and simplifies the IDE view so that you can focus on your code. You can activate Zen mode by:

Using Alt+Shift+Z on Windows or Option+Shift+Z on Mac
Double clicking on a tab in the tab bar
Right clicking on the active tab

You can use the quick switcher to easily jump between tabs or files without using your mouse, which is particularly helpful while in Zen mode. Press Ctrl+P (or Cmd+P on Mac) to open it, then press it again to cycle through files.

Linting and Formatting

The Anvil Editor has Ruff linting and formatting built in. The linter shows warnings in your code as a yellow squiggly line. If you hover over the highlighted code, you’ll see more information about the warning in a tooltip.

You can auto-format your code using Alt+Shift+F on Windows or Option+Shift+F on Mac.

The Ruff linter is also configurable. You can configure the linter per app by:

Opening your app locally
Creating a pyproject.toml or ruff.toml file in the root directory
Adding your preferred configuration (see the Ruff documentation for details)
Pushing your changes back to Anvil

Code Styles

Anvil apps use Python code on client and server side. The Editor uses different visual styles for client and server code.

A function written on the client. The code editor has a blue bar on the left margin.

A function written on the server. The code editor has an orange bar on the left margin.

In Modules, code is styled like client code. Module code can be run on both client and server.

In this documentation, client and server code are styled as follows:

def client_code():
  """This is a function in the client"""
  # This is client code
  print("This is what client code looks like")

def server_code():
  """This is a function on the server"""
  # This is server code
  print("This is what server code looks like")

Deleting Apps

To delete an app, access the App Menu by clicking on the gear icon on the top-right corner of the App Browser. At the end of it, you will see a Delete App… option. Once you click on it, this pop-up will appear:

All you need to do is click on the check box to confirm you want to delete your app, and press the delete button.

To delete an app, go to Settings, by pressing on the gear button of the Sidebar Menu. Click on Delete app, under the Manage this App section.

You can also delete an app from the Start Page. Find the app in the ‘My Apps’ list and hover over it to reveal the delete button.

Once you click on one of the delete buttons, this pop-up will appear:

You’ll need to type in the name of the app to confirm you want to delete your app then press the delete button. Once this is done, your app will be permanently deleted.

Do you still have questions?

Our Community Forum is full of helpful information and Anvil experts.