Menu
Design
Layout tools
The element tools on the canvas for flex and grid layouts, lists, tables and form fields.
Some elements have extra tools that the Style panel doesn't show: flex and grid layouts, lists, tables and form fields. You open them from the element's label on the canvas.
Open the tools
- Select an element on the canvas.
- If the element has tools, its label (the tag above the selection) shows a small sliders icon. Click it (Show element tools).
- The tools open next to the element. Click the icon again (Hide element tools) to close them.
The icon only appears on elements that use a flex or grid layout, and on lists, tables and form fields. The tools are hidden while the AI is working. Clicking the × in the tools also clears your selection.
Most settings work like toggles: click a highlighted option to remove it. A value marked (inherited) comes from a smaller screen size.
Flex
Shown for elements that lay out their children in a row or column.
| Control | Options |
|---|---|
| Breakpoint row | Base, sm, md, lg, xl, 2xl — the screen size your change applies to, from that size up. These match Phone, Landscape phone, Tablet, Laptop, Desktop and Large monitor in the Style panel. A green dot marks sizes that have their own settings. The size the canvas is showing is underlined. |
| direction | Row, Column, Row Reverse, Column Reverse |
| justify | How items spread along the direction: Start, Center, End, Between, Around, Evenly |
| align | How items line up across it: Start, Center, End, Stretch |
| gap | Space between items. XY sets one gap for both directions; X/Y sets them separately. Click More sizes (8-64) for larger gaps. |
| Advanced → wrap | None, Wrap, Rev (wrap in reverse) |
| Advanced → grow / shrink | Yes or No: whether the element can grow or shrink to fill space |
Grid
Shown for elements that lay out their children in a grid.
| Control | Options |
|---|---|
| Show grid lines | Draws the grid's columns and rows on the canvas. |
| Breakpoint row | Same as for flex. |
| columns | 1 to 4, or More columns (5-12) |
| gap | Same as for flex. |
| Advanced → rows | 1 to 6 |
| Advanced → flow | How items fill the grid: Row, Col, Dense (fills holes), R+D (row dense), C+D (column dense) |
| Advanced → justify items | How each item sits in its cell: S (start), C (center), E (end), St (stretch) |
A common use: set columns to 1 at Base and 3 at lg so cards stack on phones and sit in three columns on larger screens.
Lists
Shown for bulleted and numbered lists and their items (labeled LIST).
| Control | Options |
|---|---|
| style | none, disc (bullets), 123 (numbers), and more styles...: circle, square, a, b, c, A, B, C, i, ii, iii and I, II, III |
| position | outside or inside: whether bullets sit outside the text or in line with it |
| Marker Color | The bullet or number color: inherit, white, black, or any shade from your color scales |
| item value | On an item in a numbered list: the number it shows. Reset to auto-numbering goes back to counting normally. |
Tables
Shown for tables and their parts (rows, header and body sections, cells, caption).
| Control | Options |
|---|---|
| borders | collapse (shared borders) or separate |
| spacing | With separate borders: space between cells (0, 1px, 0.25, 0.5, 1, 2) |
| layout | auto (columns size to content) or fixed (equal columns) |
| caption | top or bottom |
| empty cells | show or hide |
For a single cell:
| Control | Options |
|---|---|
| colspan / rowspan | How many columns or rows the cell spans (1 to 6) |
| scope | On header cells: col, row, colgrp, rowgrp (helps screen readers) |
| vertical align | top, mid, bot, base |
Form fields
Shown for form elements, text fields, text areas and drop-down lists.
| Element | Controls |
|---|---|
| Form | method (GET or POST), action, autocomplete (on or off), validation |
| Text field | type (text, email, pass, num, search, tel, url, date), Convert to <textarea>, default value, placeholder, required |
| Text area | placeholder, rows (2, 3, 4, 6, 8), required |
| Drop-down | multiple, required |
What the tools can't do
The tools only appear on elements that already use a flex or grid layout. To turn an element into a flex or grid layout, or to change a layout in ways these tools don't offer, ask the AI. For example:
Put these three cards in a row on desktop and stack them on phones.
Buttons and links don't have element tools. Edit links by double-clicking them on the canvas. See Edit text, links and images in place.