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.

You will see the Inspector Builder at the bottom of the Component you're editing.

Vibe Inspector Builder, displaying a preview above it.

Vibe will automatically add all Serialized and Public properties and assemble them into groups based on Header Attributes in the script.

When you add a new property to your script, Vibe will automatically add it to the Inspector.

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.

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

A Foldout Group Element will appear on the bottom of the Inspector Builder.

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

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.

"gameObjectRef" property is a child of the "References" Foldout Group.

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.

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

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.

The delete button appears when you hover the mouse over an Inspector Element

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.

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

A button with a method selected in the Inspector Builder

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.

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.

Adding an element with the "Add Child" button will automatically set it as a child of this element.

Perfect. All the children of the Foldout Group have now been made purple.

If a Style Element is a child of a Group, it is applied to all Elements inside the Group.

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.

Saving the Inspector

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

This closes the builder. We're done!