# Overview

The Component Builder is a custom property editor designed to edit and preview all Avonni Components used in Flows. 

{% hint style="danger" %}

#### Lightning Web Security: Recommended for Best Performance

The performance and behavior of Avonni Components can be impacted if Lightning Web Security is disabled in your Salesforce Org.

* We **strongly recommend** enabling [**Lightning Web Security**](https://developer.salesforce.com/docs/platform/lightning-components-security/guide/lws-enable.html) to ensure optimal functionality.
  {% endhint %}

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FQps4Iv7MaUMvmsuWi1Df%2F2023-10-23_15-22-11.png?alt=media&#x26;token=d5fdb63d-d324-4428-a379-ed64da3983ac" alt=""><figcaption><p>Access the Component Builder</p></figcaption></figure>

With the Component Builder, you can:

1. **See a Preview**: It offers a canvas for a live preview of the Avonni Component you're creating.
2. **Adjust Settings**: On the right side, various tabs are available to adjust settings.
   * [**Properties Pane**](https://docs.avonnicomponents.com/flow/component-builder/properties-panel): This shows all customization options for Avonni Flow Screen Components. Here, you can tweak the primary settings of the component.
   * [**Interactions Pane**](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel): This feature helps you set up user interactions, such as navigating in Salesforce or displaying a message, without requiring coding. For instance, you can decide what happens when someone clicks on an action.
   * [**Style Pane**](https://docs.avonnicomponents.com/flow/component-builder/style-panel): Here, you can modify the appearance of the Avonni Component to match your desired style