Live Chat

We'll need to share your messages (and your email address if you're logged in) with our live chat provider, Drift. Here's their privacy policy.

If you don't want to do this, you can email us instead at contact@anvil.works.

The Anvil Editor

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

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

The Anvil Editor

  1. The App Browser lets you select which part of your app your are editing. Your app can contain:
    • Forms (user interfaces and Python code that runs in the web browser)
    • Modules (Python code that runs in the web browser or on the server)
    • Server Modules (Python code that runs on the server)
    • Services (Pre-built libraries and integrations like Data Tables, User management, etc)

  2. The App Menu (aka the Gear Menu) is where you configure your application.
  3. The Run Button runs the app in the Editor and shows the Output Panel (shortcut: Ctrl-Enter).
  4. 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.
  5. 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.

  6. The Toolbox is where you pick new components to add to your UI.
  7. The Properties Panel lets you configure the component you have selected in the Form Editor. (You can select components by clicking on them.)
  8. The Component Tree shows you the hierarchical structure of the components in the current Form. (Click the dropdown to view the tree.)

Toolbox

You construct your UI by dragging-and-dropping components onto your Forms from the Toolbox. (You can also create and add components using code.)

The Toolbox.

The Toolbox.

These components are always visible in the Toolbox:

Click ‘More components’ to see these components:

The Theme Elements part of the Toolbox contains components whose style is particular to the current app’s Theme. (This is not the complete list of theme-specific styles that can be applied to components. The Roles view shows you all of them.)

The Theme Elements part of the Toolbox, showing Headline, Card and Highlighted Button components.

Properties Panel

To edit the initial properties of your components, use the Properties Panel.

The top part of the Properties Panel for a Button.

The top part of the Properties Panel for a Button.

You can edit the styling and behaviour of your components such as:

  • what text a component displays
  • what icon a component displays
  • the text colour
  • spacing around the component
  • input type of TextBoxes
  • tooltip text

For full listings of each component’s properties, see the API Reference.

The Properties Panel is split into subsections; many properties are not shown until you click the ‘more’ button for the relevant subsection (this keeps the Properties Panel a manageable length).

Each Form has properties as well. You can modify the Form’s properties using the Properties Panel when no components are selected.

To modify what the component is called in the Python code, use the name property at the top of the Properties Panel.

Renaming a component.

Renaming a component.

Container Properties control the relationship between a component and the container it is in. For example, you can set the width, x-position and y-position of a component in an XYPanel .

The Container Properties for a component inside an XYPanel.

The Container Properties for a component inside an XYPanel.

You can set properties in code as well; each property is available as an attribute of the Python object:

self.button_refresh.text = "Check for messages"

When are the properties set?

Each Form contains this line of code:

# Set Form properties and Data Bindings.
self.init_components(**properties)

When this line of code runs (during Form initialisation), the properties you set in the Properties Panel are applied to your components.

Events

The Properties Panel also allows you to set up event handlers for your components.

Each component’s events are shown at the bottom of the Properties Panel. You can enter the name of a Python method in the box, and that method will run when the event fires. This method must be a method of the Form that the component is on.

Events can be defined at the
bottom of the Properties Panel.

Events can be defined at the
bottom of the Properties Panel.

If you click the Blue button with two white right-chevrons button next to the event, an empty method is automatically written for you (it contains a pass statement, which you can remove.)

def button_refresh_click(self, **event_args):
  """This method is called when the button is clicked"""
  pass

You can also set up event handlers in code using self.my_component.set_event_handler. See Anvil Components for more detail on events.

Form Editor

The Form Editor has two modes: Design View and Code View. You choose your view using the tabs at the top of the Form Editor:

Choosing between Design view and Code view of the Form Editor.

Choosing between Design view and Code view of the Form Editor.

Design view

Design view shows you how your Form will look when your app is running. This is where you drag and drop components to create your UI. It also displays the Toolbox and the Properties Panel.

Design view of the Form Editor.

Design view of the Form Editor.

Code view

Code View shows you the Python class that describes how your Form behaves. This is where you write your client-side Python code that runs in the browser. It also displays the Code Snippets Panel

Code view of the Form Editor.

Code view of the Form Editor.

App Browser

The App Browser lists the main parts of your app:

The App Browser.

The App Browser.

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

Click the plus buttons to add more.

Click the plus buttons to add more.

To delete and rename things, use the down-arrow Down-arrow icon next to existing Forms, Modules, Server Modules and Services. Forms have a few other options, you can duplicate them, set them as the startup Form, and click ‘use as component’ to make them appear in the Toolbox as Custom Components.

Click the down arrow for config.

Click the down arrow for config.

App Menu Gear Menu Icon

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

The App Menu (aka Gear Menu)

The App Menu (aka Gear Menu)

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.

Output from Server Modules will appear with a yellow background.

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. Click the links to go to that line of code in the Code View.

The Output Panel.

The Output Panel.

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

Background Tasks in the Output Panel.

Background Tasks in 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.

Click here to show/hide the Output Panel.

Component Tree

The hierarchy of components within the current Form is shown in the Component Tree. Click the arrow next to the component’s name in the top of the Properties Panel to open it.

Click here to the Component Tree.

Click here to the Component Tree.

The currently-selected component is highlighted in context of the other components. You can select any of the other components to view and edit the properties of that component.

Component Tree for a CRM’s invoicing page.

Component Tree for a CRM’s invoicing page.

Code Styles

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

Client code.

Client code.

Server code.

Server code.

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")

Code Snippets

The Code Snippets Panel lists all the components on the current Form. It is visible in the Code View.

Code Snippets lists all the components in this Form.

Code Snippets lists all the components in this Form.

Click on the arrow next to a component to see a list of all the component’s properties.

The properties of this Button.

The properties of this Button.

Click on the question mark to get a dialog containing more documentation about that component type.

Click this question mark for detailed component docs.

Click this question mark for detailed component docs.