Announcing the New Drag-and-Drop Designer
Tags: python, webdev, webapp
Published: 2023-10-31 14:17:20

## A better UI building experience

We're very excited to announce the 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. 

![The new Designer in action](https://anvil-website-static.s3.eu-west-2.amazonaws.com/blog/new-designer-beta/new-designer-overview.gif)

**Start building with the new Designer: [anvil.works/build](https://anvil.works/build?utm_source=crosspost:dev.to:/blog/new-designer-release)**

The new Designer is officially out of beta and will now be the default Designer, although you will still be able to switch back to the Classic Designer for the time being.

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](https://anvil-website-static.s3.eu-west-2.amazonaws.com/blog/new-designer/add-component-toolbox-closed-new.gif)

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.

![The new Toolbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9vtsxfpwlakrt22wry8.png)<figcaption>Components in the new Toolbox are organized and easier to find.</figcaption>


### 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 component editing menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5hrh6hxjzerwssnyc46.png)<figcaption>The new menu to edit a Label component.</figcaption>

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

![Editing a component in line](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/niecwv82qntbrapovzs4.gif)<figcaption>Changing the text of a Label component with in-line editing.</figcaption>

Customising your components is easier now, with the ability to add multiple roles:

![The Toggle multiple roles switch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48cbxxr896eekmfjn0s9.png)<figcaption>Toggling multiple roles for a component.</figcaption>


### 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.

![Anvil's drag and drop](https://anvil-website-static.s3.eu-west-2.amazonaws.com/blog/new-designer-beta/dragging-and-dropping.gif)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bp6p5ytpa1hf47udsmu.gif)

---

## And there's more...

There's more that we can't fit into a blog post, so be sure to read [our updated documentation](https://anvil.works/docs/client?utm_source=crosspost:dev.to:/blog/new-designer-release) to learn all about it.

The best way to experience the new Designer is to try it out for yourself:

**Start building with the new Designer: [anvil.works/build](https://anvil.works/build?utm_source=crosspost:dev.to:/blog/new-designer-release)**


## More about Anvil

If you're new here, welcome! [Anvil](https://anvil.works/?utm_source=crosspost:dev.to:/blog/new-designer-release) 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**.