Introducing Four Improvements To Anvil’s Custom Components
Tags: python, webdev, anvil, news
Published: 2023-12-19 15:23:47

## We've made it simpler to build and use custom components in Anvil

Anvil's Custom Components allow you to build reusable UI components and use them through your app and others. We've recently made them easier to use and more flexible in a few different ways. Let me walk you through them:

1. [Live Updates in the Editor](#1-live-updates-in-the-editor)
2. [Categorize and Add Toolbox Icons](#2-categorize-and-add-toolbox-icons)
3. [Categorize Custom Component Properties](#3-categorize-custom-component-properties)
4. [Custom containers are simpler to build](#4-turn-custom-components-into-containers)

---


### 1. Live Updates in the Editor

We've introduced live updates for custom components in the Anvil Editor. Now, as you make changes to your custom component, you'll instantly see those changes reflected in the designer. Components now run in the designer the same as they do in a live deployed app. This real-time behavior speeds up the development process and helps you fine-tune your components with ease.

<figure>
  <img src="https://anvil.works/blog/img/simpler-custom-components/progress-bar-example.gif"><figcaption><a href="https://anvil.works/forum/t/progressbar-component-again/18656">Tobais’s progress bar</a></figcaption>
</figure>


Not only does live updates mean the components reflect your changes immediately, it also has other benefits like exceptions being thrown and flagged to you immediately in the [designer output](https://anvil.works/docs/client/new-designer#live-custom-components?utm_source=dev-to_4_improvements_custom_components).

---

### 2. Categorize and Add Toolbox Icons

We understand that as you add dependencies to your app, managing custom components in the toolbox can become challenging. To help you keep things organized, you can now [categorize custom components and change their icons](https://anvil.works/docs/client/custom-components#configuring-custom-components?utm_source=dev-to_4_improvements_custom_components). This makes them easier to locate and manage in the Editor.

<figure>
  <img src="https://anvil.works/blog/img/simpler-custom-components/styled-custom-components.png"><figcaption>Custom components in the Toolbox</figcaption>
</figure>

---

### 3. Categorize Custom Component Properties

In addition to categorizing components, you can now categorize your custom component's properties. This feature allows you to organize properties logically, making it simpler to configure your custom components. No more hunting for that one property buried deep in the list – categorize them for quick and easy access.

<figure>
  <img src="https://anvil.works/blog/img/simpler-custom-components/component-properties.png"><figcaption>The menu for customising a property, including categorisation options</figcaption>
</figure>

---

### 4. Turn custom components into containers

For the first time ever, it's possible for you to build your own [custom containers](https://anvil.works/docs/client/custom-components/html-components#making-a-custom-component-a-container?utm_source=dev-to_4_improvements_custom_components)! You can write your own custom HTML components and turn them into containers so that other components can be dragged and dropped inside.

<figure>
  <img src="https://anvil-website-static.s3.eu-west-2.amazonaws.com/blog/simpler-custom-components/container-example.gif"><figcaption>An example custom container</figcaption>
</figure>

[Check out the docs](https://anvil.works/docs/client/custom-components/html-components#making-a-custom-component-a-container?utm_source=dev-to_4_improvements_custom_components) to learn how to build custom containers.

---

With these new improvements, custom components in Anvil are easier to use, more flexible and more efficient than ever before. Try them out today and experience the power of Anvil's improved custom components for yourself! Happy app building!

<h4><a href="https://anvil.works/docs/client/custom-components#making-a-custom-component-a-container?utm_source=dev-to_4_improvements_custom_components">See the custom component docs -></a></h4>

---

## 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**. Check out our 80 second overview of Anvil:

{% embed https://www.youtube.com/embed/3V-3g1mQ5GY %}

---

## [Try Anvil for free!](https://anvil.works/build)

---

{% user codingwithryan %}