Getting Started With The Visual Designer

Opening the Designer

Overview

The top of the Visual Designer window features breadcrumbs that map the hierarchy of the type you’re currently editing. Click any type to jump directly to it, allowing multiple types in the same hierarchy to be edited consecutively within a single window. Chevrons between types allow you to swap out the type on the right-hand side of the chevron with a different descendant. Modified types are shown in bold, and each breadcrumb has a context menu for editing the attributes of the type and customizing element types for collection types.

The center of the Visual Designer window displays all the properties and groups for the current type. Collectively, these properties and groups are called nodes. The numbers below correspond to the numbered elements in the screenshot.

1. Colored nodes: Indicate the type they originate from (inherited). Hovering over them underlines the corresponding type in the breadcrumbs.
2. Right-click: Opens a context menu for actions on the node, such as resetting changes made in the Visual Designer. Right-clicking the background (the area where nodes are drawn) opens a menu with actions for the entire type.
3. Locked nodes: Cannot be modified until explicitly unlocked. Changes apply only to the current type and its descendants.
4. Type button: Displays the current type of the property. Click to open the Visual Designer for that type. For arrays, this opens the Visual Designer for the element type instead.
5. Attribute Editor button: Opens the Attribute Editor to modify the property’s attributes.
6. Visibility button: Toggles whether the property is visible in the Inspector.

Groups include a few additional controls of their own:

1. Opens the Attribute Editor for the group's attribute.
2. Appears only on groups that contain subgroups - such as tabs - and adds a new subgroup when clicked.
3. Removes the group.

The bottom of the Visual Designer window provides actions for the type you’re currently working on.

1. Saves the current type.
2. Toggles the visibility buttons for all nodes in the current type. When the buttons are shown, any hidden nodes become visible.
3. Opens a selector for choosing which group to add to the current type.
4. Toggles whether locked nodes can be modified. Locked nodes are inherited and remain uneditable unless explicitly unlocked.
5. Hovering over these icons highlights the corresponding members on the type: fields, properties, or methods.

Attribute Editor

The Attribute Editor is where you adjust the attributes of a property, group, or type.

1. Toggles pinning for the Attribute Editor. When pinned, the editor doesn’t close when it loses focus.
2. Opens a Visual Designer window for the type that owns the property currently targeted by the Attribute Editor.
3. Attributes in the editor provide a context menu that can be opened by right-clicking on their header or by clicking the burger menu, offering actions like “Remove Attribute.”
4. When an attribute member has been modified by the Designer for the current type, a blue bar appears on its left edge, similar to prefab overrides.
5. The Attribute Editor adds extra context options to the properties it displays, such as “Revert To Original,” which discards changes made to the property for the current type.

Configuration

The Visual Designer can be configured via Tools > Odin > Inspector > Preferences > Visual Designer.

Saving

The Visual Designer saves changes either automatically or manually, depending on the AutoSave setting in preferences.

When AutoSave is off, you need to save changes manually in the Designer window. If you try to close a Designer window with unsaved changes, a prompt will appear asking whether you want to save. However, if only an Attribute Editor is open for a type—without the full Designer window—changes are saved automatically when the editor closes.

When AutoSave is on, changes are saved automatically at the interval set in preferences. Closing any Designer window or Attribute Editor associated with the type also triggers an automatic save.

Excluding a class, struct, or member from the Visual Designer

Any class, struct, or member marked with ExcludeInOdinDesigner will be omitted from the Visual Designer. Changes made to it through the Designer will be ignored.

[ExcludeInOdinDesigner]
public class Example
{
    public int Int;
}

[ExcludeInOdinDesigner]
public struct Example
{
    public int Int;
}

public struct Example
{
    [ExcludeInOdinDesigner]
    public int Int;
}