Selecting elements
Click on any element in the canvas preview to select it. A blue outline appears around the selected element, and the style panel opens on the right side of the screen.The style panel
The style panel organizes editing options into sections:Text
Control typography for text elements:- Font family: Choose from available fonts
- Font size: Adjust text size in pixels
- Font weight: Set text weight (light, regular, bold, etc.)
- Text color: Pick a color using the color picker
- Line height: Control spacing between lines
- Letter spacing: Adjust spacing between characters
Appearance
Modify the visual styling of elements:- Background color: Set solid background colors
- Opacity: Control element transparency
- Border: Add borders with custom width, style, and color
- Border radius: Round the corners of elements
- Shadow: Add drop shadows for depth
Size
Control element dimensions:- Width and height: Set explicit dimensions
- Padding: Add internal spacing around content
- Margin: Add external spacing around the element
Layout
For container elements, control how children are arranged:- Display: Choose between flex and grid layouts
- Direction: Set horizontal or vertical flow
- Alignment: Control how items align on both axes
- Gap: Set spacing between child elements
- Justify content: Distribute space along the main axis
- Align items: Align items along the cross axis
Position
Control element positioning:- Position type: Static, relative, or absolute
- Coordinates: Top, right, bottom, left values
- Z-index: Control stacking order
Live preview
All changes appear instantly in the preview. Your changes are saved automatically when you exit edit mode.Keyboard shortcuts
| Key | Action |
|---|---|
E | Toggle edit mode |
Escape | Return to preview mode |