Codux automatically scans your components for properties, and creates the appropriate input for each in the Properties panel on the right side of the screen, sorted by their importance.

Here you can provide values for your component's properties to achieve a specific state for the component in the component's board rendering.

By default, Codux automatically hides properties that aren't relevant, ensuring the panel is as easy to navigate as possible. When you first open the panel, only the properties marked as important in JSDoc, those with assigned values, interfaces from the same file as the component, and required properties will be displayed.

To display all properties, select Display all properties.

The Properties panel works by you first selecting an element from the Elements panel. Select one, and you'll see the panel populate with the element's properties.

At the top of the Properties panel is a search bar. Use this bar to narrow down the properties of the selected element to those that you're interested in viewing.

When you hover over a property, you'll have the ability to jump directly to the area of code in the code drawer where the property resides.

From the ellipsis menu, you'll also be able to remove the element's property from the rendering, and to swap input types with the Swap visualizer option.

In the example above, the selected element has a property with the input value '4', which corresponds to the number of stars shown in the reviews section on the board. Check out what happens on the board when we modify this (or any other) property.

It's worth noting that some properties are optional, while others are not. Required properties have an asterisk beside them, and if you remove one of these from a board, you'll see error indicators beside it and those nested with it.