Properties Panel

When you select a component in the Structure Tree, its properties appear in the panel below. Each instance of a component can have different values, so you can reuse the same component across your page with different content.

Editing Component Definitions

To see how a component's properties are defined, double-click the component in the tree or on the canvas. This opens the component edit panel, which shows the component name at the top and a list of all its property definitions underneath.

Property Types

Meno supports several property types:

• string -- plain text input

• number -- numeric value

• boolean -- toggle (on/off)

• select -- dropdown with predefined options

• link -- URL field with target and localized href support

• file -- upload or reference assets like images

• rich-text -- full text editor with formatting

• list -- repeatable groups of fields

Templates

When a component is nested inside another, you pass property values using double-bracket templates. For example, if a parent has a property called title, you write it as {{title}} in the child's property field. The child then receives whatever value the parent holds.

Style Mapping

Properties can also control styles through mapping. When editing a component definition, you will see a blue dot next to certain style properties. Click it and the dot turns green, which means mapping is active.

You can then connect a property -- like a select with options such as small, medium, and large -- to specific CSS values for each option. This lets a single property drive visual changes.

To remove a mapping, click the green dot again. It turns back to blue and the mapping is deleted, returning the style to its original value.

Next Steps

• Structure Tree -- navigate and reorganize elements

• Command Palette -- add elements and run commands

• Keyboard Shortcuts -- complete shortcut reference

• Overview -- return to the full editor layout