Element Styling
Fine-tune individual element styles with visual controls for layout, spacing, typography, and colors.
When you select an element in the preview while in Design Mode, the Element Editor appears with controls to style that specific element.
Selecting an Element
- Make sure Design Mode is active
- Click on any element in the preview
- The element is highlighted and becomes editable
- The panel header shows the element type and source file
Element Information
The header displays:
- Element tag: The HTML element (div, button, h1, section, etc.)
- Source file: Which file contains this element's code
Styling Categories
The Element Editor organizes controls into categories. Expand each to access its controls.
Layout Controls
Control how elements arrange their children:
| Property | Options |
|---|---|
| Display | Block, Flex, Grid, Inline, None |
| Flex Direction | Row, Column |
| Justify Content | Start, Center, End, Between, Around |
| Align Items | Start, Center, End, Stretch |
| Gap | Spacing between child elements |
Use Flex layout for rows and columns. Set Direction to "Row" for horizontal layout or "Column" for vertical stacking.
Spacing Controls
Control margins (outside) and padding (inside):
Padding - Space inside the element:
- Top, Right, Bottom, Left
- Linked mode: Change all sides together
Margin - Space outside the element:
- Top, Right, Bottom, Left
- Linked mode: Change all sides together
Typography Controls
For text elements, control:
| Property | What It Does |
|---|---|
| Font Size | Text size in pixels or rem |
| Font Weight | Light, Normal, Medium, Bold, etc. |
| Line Height | Space between lines |
| Letter Spacing | Space between characters |
| Text Align | Left, Center, Right, Justify |
Color Controls
Set colors for the element:
- Background: The element's background color
- Text Color: Color of text within the element
- Border Color: Color of borders (if present)
Click any color swatch to open the color picker:
- Use the visual picker to select colors
- Enter exact hex, RGB, or HSL values
- Select from your color library
Border Controls
Add and style borders:
| Property | Options |
|---|---|
| Border Width | Thickness in pixels |
| Border Style | Solid, Dashed, Dotted, None |
| Border Radius | Corner rounding |
| Individual Sides | Control each side separately |
Size Controls
Set explicit dimensions:
- Width: Fixed width or auto
- Height: Fixed height or auto
- Min/Max Width: Size constraints
- Min/Max Height: Size constraints
Making Changes
- Select an element in the preview
- Find the relevant control category
- Adjust values using:
- Sliders for numeric values
- Dropdowns for options
- Color pickers for colors
- Number inputs for precise values
- See changes immediately in the preview
Changes are saved automatically.
Using the Tailwind Editor
For more control, you can edit the element's Tailwind classes directly:
- Select an element
- Find the class editor section
- Add or modify Tailwind utility classes
- Preview updates in real-time
The visual controls generate Tailwind classes. You can use either approach—they're synchronized.
Element Content
For some elements, you can edit their text content directly:
- Select a text element (heading, paragraph, span)
- Find the content section
- Edit the text
- Changes apply immediately
Deleting Elements
If an element can be deleted:
- Select it
- Click the delete icon in the panel header
- The element is removed
Not all elements are deletable. Structural components may need to be removed through the AI chat.
Best Practices
Start with the AI
Use the AI for major changes. Design Mode is best for refinement.
Use Consistent Spacing
Stick to consistent spacing values (8px, 16px, 24px, 32px) for a clean look.
Test on All Devices
Changes you make may need adjustment for other screen sizes. Use the device preview to check.
Use Theme Colors
When changing colors, use theme color tokens when possible for consistency.