Props panel

To open the element props editor, select the desired element in one of the following ways:

Click on the element on the page
Click on the element on the layers panel
Set the сaret (text cursor) on the code element in the editor

Once the element is selected, its props panel will appear on the right. There, you will see:

Element name
Tab bar with styles and props

Styles

Here, you can set the visual representation of the element. You can configure both default state and pseudo-class styles: hover, active, focused and more.
All style properties are grouped into the following tabs:

Layout

Typography

Indents

Borders

Position

Effects

States (pseudo-classes)

To configure the styles for a pseudo-class, select the desired style in the tab and change it. Don't forget to go back to the default state. To check how it works, go to the preview mode.

Props

The Props tab contains non-style properties that are defined by the component developer. There are various properties. For example, the GoogleMap component has the Query property which allows you to specify a place that will be shown in the center of the map.

Tips&Tricks of the element props panel

All units of measurement available in CSS can be used.

Math

You can use the following mathematical operations in the input field:

+,

-,

*,

/.

For example, enter the

720px/2

value, click on Enter and get the

360px

value.

Calc()

If you enter an expression containing different units, the input field will reformat it into a calc value.

For example,

100vh-60px

will be converted to

calc(100vh-60px).

Input shortcuts

Action

Windows and Linux

MacOS

Увеличение числового значения на 1

↑

Уменьшение числового значения на 1

↓

Увеличение числового значения на 10

Shift

+

↑

⇧(Shift) + ↑

Уменьшение числового значения на 10

Shift

+

↓

⇧(Shift) + ↓

Увеличение числового значения на 100

Ctrl

+

↑

⌘(Cmd) + ↑

Уменьшение числового значения на 100

Ctrl

+

↓

⌘(Cmd) + ↓

Увеличение числового значения на 0.1

Alt

+

↑

⌥(Option) + ↑

Уменьшение числового значения на 0.1

Alt

+

↓

⌥(Option) + ↓