A better UI building experience

We’re very excited to announce the beta release of Anvil’s new Drag-and-Drop Designer!

Find your components more easily in our updated Toolbox, and quickly edit your components in-line. You now have more control over the structure of your app with our new Components Tree. We’ve also improved the drag-and-drop experience itself so it’s easier to build your UIs.

Adding a Button component to the Form and editing its properties from the Object Palette and Properties Panel in the new Beta Drag-and-Drop Designer

If you’d like to build with the new designer, click try the beta to make the switch. We think you’ll love the new features, and you can switch back – so why not try them out today?

Start building

Or keep reading to learn about some of the new features from this release:

Cleaner interface

To help you build apps on smaller screens, we’ve made it easier to access the Toolbox and the Properties panel. Each section of the right-hand side panel can collapse fully, and even with it closed you can easily drag-and-drop new components or change components’ properties.

Adding a Button component from the 'Add Component' button in the toolbar while the right side panel is collapsed

It’s also now easier to find your way around the Toolbox. We’ve organised components into different sections so that they’re easier to find, and the type of component is written underneath the icon.

Components in the new Toolbox are organized and easier to find.

Components in the new Toolbox
are organized and easier to find.

Easier to edit your components

You can now change common component properties quickly, right next to the selected component. Clicking on a component brings up a small menu from which you can edit a component’s properties, rename it, or delete it without opening the Properties panel.

The new menu to edit a Label component

The new menu to edit a Label component

Double clicking on a component with text now also allows you to edit its text property in-line.

Changing the text of a Label component with in-line editing.

Changing the text of a Label component with in-line editing.

Better drag and drop

We’ve made our drag and drop smoother and it’s now easier to see exactly where your components will land.

You can also now see the hierarchy and nesting of your components at a glance, thanks to the new Component Tree section in the right-hand side panel. You can move components around within the Component Tree and choose their positioning, and even drag and drop components directly into the Tree. This provides extra control over the nesting of your components.

Dragging a Button component into a ColumnPanel from the Component Tree

Try it out!

To start building with the new Designer, click “Try the Beta” at the top of your Form editor. If you want to learn more, be sure to read our documentation.

The Try the Beta link, at the top of the Form editor

We’re looking forward to hearing what you think! As always, you can ask questions and give us feedback on the Anvil forum.

More about 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.

Learn More

Get Started with Anvil

Use our drag and drop app builder to create an app that collects feedback and sends it to you by email, and publish it online, in ten minutes or less.

Nothing but Python required!
Go

Turn Your Pandas Code into a Web App

In this tutorial, we will build a dashboard using a local Pandas script or Jupyter notebook.
Go

Turning a Google Colab Notebook into a Web App

Put a front end on your Google Colab notebook, using the Anvil Uplink.
Go

Generate PDF Invoices with Python

In this example build, see how to generate and download PDF invoices
Go

A Task Manager App Built with Python

A simple task management app built with Anvil and Python.
Go