# Creating a Custom Inspector

### Opening the Inspector Builder

In the Inspector Window, click on the "Dots" icon in the upper right corner of a component. From the dropdown list, select **Edit Inspector with Vibe.**

<div data-full-width="true"><figure><img src="https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2Fiu7fJxUoHjY6a8VMimgz%2Fimage.png?alt=media&#x26;token=453d59f2-d8b4-4a37-9715-98f0efbd3320" alt=""><figcaption></figcaption></figure></div>

You will see the **Inspector Builder** at the bottom of the Component you're editing.&#x20;

<figure><img src="https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2FouJ2q3Tb1U67XcUbNnDO%2Fimage.png?alt=media&#x26;token=18fad826-15f0-4f1b-981c-333c2c506566" alt=""><figcaption><p>Vibe Inspector Builder, displaying a preview above it.</p></figcaption></figure>

{% hint style="info" %}
Vibe will automatically add all **Serialized** and **Public** properties and assemble them into groups based on **Header Attributes** in the script.

![](https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2FWmby7hGO2w2ueWJbygVq%2Fimage.png?alt=media\&token=cd017087-ea9d-4469-9f33-b66d4c017329)
{% endhint %}

{% hint style="info" %}
When you add a new property to your script, Vibe will automatically add it to the Inspector.
{% endhint %}

### Adding New Inspector Elements

You can now add new elements. First, let's hide the References inside a **Foldable Group** to make things look cleaner.&#x20;

Press the **Add Inspector Element** button. Select **Groups and Layouts** and pick **Foldout Group**.

<figure><img src="https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2FzQgxxPxIrQU24hhjiWrL%2Fimage.png?alt=media&#x26;token=1f7efaf4-810d-4902-84a1-00e1e71c206c" alt=""><figcaption></figcaption></figure>

A **Foldout Group Element** will appear on the bottom of the Inspector Builder.&#x20;

<figure><img src="https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2Fcpbcnn9yjIvaWBzvmuuA%2Fimage.png?alt=media&#x26;token=20d660dc-ff1d-4a6b-ae8c-71eae4c7b403" alt=""><figcaption></figcaption></figure>

You can also change its name using the input field. This is where you change the settings of each **Inspector Element.**

<figure><img src="https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2FS5bj7c5ZZlM6a4m4joXZ%2Fimage.png?alt=media&#x26;token=79f24163-2bb9-4207-a0cd-f6b2dc7e18fa" alt=""><figcaption></figcaption></figure>

Let's move the "gameObjectRef" property into the **Foldout Group**. Drag to change the order of elements. Drop an element on top of another one to make it it's child.

<figure><img src="https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2FA8Y83k1vieu1AD6dk8sY%2Fimage.png?alt=media&#x26;token=c3fd1bfa-bd9a-4daa-934d-d03830fd7066" alt=""><figcaption><p>"gameObjectRef" property is a child of the "References" Foldout Group.</p></figcaption></figure>

We now see the "gameObjectRef" property inside the "References" Foldout Group. This is what it looks in the Inspector above the builder when the foldout is open.

<figure><img src="https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2FA9UdcsHuuKrSusQgpEIv%2Fimage.png?alt=media&#x26;token=8851d2e3-adfd-4fb2-8f0e-e12b9d99479f" alt=""><figcaption></figcaption></figure>

Notice, we still have the empty Vertical Group. We don't need it - let's delete it.&#x20;

### Deleting Inspector Elements

To delete an Inspector Element you can either:

* Use the "X" button on the right side of the element.
* or select it and press the **delete key** on the keyboard.

<figure><img src="https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2FESa6cpNQzR3soOVuM8J4%2Fimage.png?alt=media&#x26;token=3e51079e-3fac-4980-b81a-25c371e15bed" alt=""><figcaption><p>The delete button appears when you hover the mouse over an Inspector Element</p></figcaption></figure>

### Adding Buttons

Let's add a button for the method we may want to call from the Inspector. Press the **Add Inspector Element** button. Select **Buttons** category and pick **Button**.

<figure><img src="https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2F8PzliiI7QQaGd4NMEM8k%2Fimage.png?alt=media&#x26;token=228990cb-d434-468a-82cc-60013d781df1" alt=""><figcaption></figcaption></figure>

You can choose the method to call from dropdown the element settings. Methods can be private or public. Methods with arguments are also supported.

<figure><img src="https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2FDE7JrYb2FwSenaFIA75z%2Fimage.png?alt=media&#x26;token=d78723da-0d88-4f6e-aaf3-57395325c2ab" alt=""><figcaption><p>A button with a method selected in the Inspector Builder</p></figcaption></figure>

<figure><img src="https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2FS9vlP6CthVgID9Jil79U%2Fimage.png?alt=media&#x26;token=d52aa0bf-d715-4ebc-a078-f3f479e4d2a9" alt=""><figcaption><p>A button for a method with arguments, visible in the inspector. User can click on the triangle marker to reveal the optional arguments used when calling the method.</p></figcaption></figure>

### Adding Styles

Now, a splash of color to make things pop! Let;s hover the mouse over the "References" **Foldout Group** and press the "+" button to show the dialog. Select **Style** > **Color.**&#x20;

<figure><img src="https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2FBhIJByv5lgVB2Xq1sddB%2Fimage.png?alt=media&#x26;token=c0aedea7-e0a2-4145-962b-b09c63f8437a" alt=""><figcaption><p>Adding an element with the "Add Child" button will automatically set it as a child of this element.</p></figcaption></figure>

Perfect. All the children of the **Foldout Group** have now been made  purple.&#x20;

<figure><img src="https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2FmbYia6vMZ9xH4Z1a63kR%2Fimage.png?alt=media&#x26;token=dc6b9cc3-c44e-4bfb-b125-865e56a12164" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If a **Style Element** is a child of a Group, it is applied to all Elements inside the Group.
{% endhint %}

{% hint style="warning" %}
A **Style Element** needs to be a child of a property, a button or a group. Otherwise you'll see a warning. Click on the warning to select the Inspector Element it refers to.

<img src="https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2FkAOxBUPjgCjDzLpBfJfx%2Fimage.png?alt=media&#x26;token=104d978d-94cd-4092-af53-9e45e3651017" alt="" data-size="original">
{% endhint %}

### Saving the Inspector

Save the changes using the "Save and Exit" button in the top right corner of the Inspector Builder.&#x20;

<figure><img src="https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2FwyI7SYRVrGqX7MQXq9XM%2Fimage.png?alt=media&#x26;token=2a0fa95a-07ec-466a-9048-0effb094c42a" alt=""><figcaption></figcaption></figure>

This closes the builder. We're done!
