Basic Operations

Adding Elements

Click the container icon in the top toolbar to enter quick container insertion mode, then drag on the canvas to draw a container.

Keyboard shortcuts are shown beside menu items. For example, press F to create a frame and T to create a text element.

Tip: when building a section, you can create the container outside the breakpoint canvas first, finish the section, and then move it into the breakpoint. This helps you focus on the current section.

Insert Panel

Click the plus icon to open the insert panel. You can drag an element onto any position on the canvas, or click an element to add it to the main container. Clicking is useful for large elements such as sections.

Copy and Paste

Select an element and right-click to copy or paste it. You can also use Ctrl+C or Command+C to copy, Ctrl+V to paste, and Ctrl+D to quickly duplicate an element.

Undo and Redo

Use Ctrl+Z to undo and Ctrl+Alt+Z to redo. After refreshing the browser, undo history for previous actions is no longer available.

Move Elements

How an element moves depends on its positioning mode. Absolutely positioned elements can be dragged anywhere. Relatively positioned elements can only change order inside their container. You can also use arrow keys to adjust position or ordering.

You can move elements in the left element tree as well. This is more precise when the hierarchy is deep.

Edit Text

Double-click a text element to enter text editing mode. Click an empty area to exit.