About the Properties & Events Panel

The Properties & Events panel allows you to add properties and functionality to your page elements. With the panel you can:

• Access the Velo API reference for the selected element.
• View and manually update the ID of the selected element.
• Set default values for the properties of the selected element.
• Add an event handler function declaration to your code to interact with the selected element.

The Properties & Events panel is located to the right of the code editor.

Wix Studio

Supported IDEs

You can access the Properties & Events panel in the editor (Wix Studio and Wix Editor)

Wix Editor

The Properties & Events panel changes content when you select an element. The properties and event handlers listed in the panel differ based on the element that you select.

You can close and open the panel with the Properties & Events button in the toolbar:

The ID property

All elements come with a default ID value. When you select an element, its ID is displayed in the panel. You can manually change the ID of your element. Assigning meaningful IDs to your elements can make your code easier to maintain.

Default state properties

Certain boolean properties for your selected element appear under the Default Values section of the panel. They allow you to set an element’s state when the page loads. This limits the need to set an element’s initial state with code, keeping your code cleaner and more concise. Set the element’s initial state by selecting or clearing the checkbox to the left of the property.

The available default state properties are:

• Hidden: Hides the element from your site visitors when your page loads. You can use code to unhide the element upon an action or after a set amount of time. Hidden elements take up space on your page and appear faded in the editor until they are selected. An element's hidden state can also depend on whether its parent element is hidden or collapsed.
• Collapsed: Collapses the element and hides it from your site visitors when your page loads. You can use code to expand the element upon an action or after a set amount of time. Collapsed elements don’t take up space on your page and appear with diagonal hatching lines in the editor until they are selected. Collapsing and expanding can cause other elements to shift on your page. An element's collapse state can also depend on whether its parent element is hidden or collapsed.
• Enabled: Enables interactive elements such as buttons and text inputs. Elements with this property are initially in an enabled state. Clear the checkbox to disable the element when the page loads. You can use code to later enable the element when you want visitors to interact with it. Disabled elements appear faded in the editor.

Event handlers

Event handlers appear under the Event Handlers section of the Properties & Events panel. Event handlers allow you to add code that defines what happens when site visitors interact with this element. Clicking on an event handler in the panel adds the event handler’s function declaration to your page code for you.

Like properties, event handlers are specific to the element. Common event handlers that appear in the panel for many elements include:

• onBlur()
• onClick()
• onDblClick()
• onFocus()
• onMouseIn()
• onMouseOut()
• onViewportEnter()
• onViewportLeave()

Other event handlers can appear in the panel depending on the element that is selected. For example, when a Gallery element is selected, the panel includes additional event handlers to some of the ones listed above, such as:

• onCurrentItemChanged()
• onItemClicked()
• onPlay()
• onPause()

See the Velo API reference for descriptions of all the event handlers for each element.

Events AI assistant in Wix Studio

The Properties & Events panel in Wix Studio also comes with an AI Assistant button.

Use the AI assistant to help create interactive code for your event handlers. The AI assistant allows you to select an event handler and then describe what the code should do. It generates a code example that you can add to your page code.

It’s important to note that AI can make mistakes and that you should double check that any AI generated code is accurate before using it.

See also

• About Event Handlers in Wix
• Add an Event Handler
• Tutorial: Change the Text Label of a Button with Events
• Velo API reference