Add, move and resize elements
Add components from the library, then select, move, resize, duplicate and delete them.
Everything on a screen (a button, a bar, a piece of text) is called an element. This page shows how to add elements and arrange them.
Add an element
- Open the Components tab on the left and make sure Library is selected.
- Find what you need. Scroll through the categories, or type in the search box (for example "toggle" or "health").
- Click a component to add it to the middle of the screen, or drag it to the exact spot you want.
You can also right-click an empty spot on the screen and pick a basic element (button, text, image, panel, toggle, checkbox, bars, radial, input, dropdown, tabs). It is added right where you clicked.
Some categories have more than one style. Click a category to see all of them, and use the theme menu (All themes) to show only one look, such as Sci-fi or Cartoon.
Note: Components marked Pro need the Pro or Max plan. See Plans.
Each of them has its own guide under Components in these docs.
Right-click an element
Right-click an element for its quick menu:
- Change its main text, its colours, font size, value (bars and sliders) and size and rotation right there.
- Duplicate, copy, cut, paste, hide, lock, bring to front, send to back and delete.
With several elements selected, the commands apply to all of them. Everything you change in one menu is a single step for Undo.
Select, move and resize
- Select: click an element. A blue box with small squares appears around it.
- Move: drag it. Pink guide lines show when it lines up with other elements or the middle of the screen.
- Resize: drag one of the small squares on its edges or corners.
- Rotate: drag the round handle above it.
- Select several: hold Shift and click, or drag a box around them on an empty part of the canvas.
For exact numbers, use Transform in the Properties tab on the right: X, Y, Width, Height and Rotation.
Copy and duplicate
- Ctrl D duplicates the selection.
- Hold Alt and drag an element to drag out a copy.
- Ctrl C and Ctrl V copy and paste, even between screens.
Duplicate is smart. Duplicate a button, move the copy 50 pixels down, then press Ctrl D again: the next copy lands another 50 pixels down. It is the quickest way to make a column of buttons.
Delete and undo
Press Delete to remove the selection. Made a mistake? Ctrl Z undoes it and Ctrl Y redoes it.
Layers: what is in front
Elements added later sit on top of earlier ones. To change that, right-click an element in the Layers panel and choose Bring to Front or Send to Back, or use Ctrl ] and Ctrl [.