Editor Guide
Learn the canvas, layers, properties, and export options.
The editor is built around three panels: the left sidebar (Components, Hierarchy, AI), the center canvas, and the right Properties panel. Understanding how they interact is the key to building UIs fast.
Components tab: this is your toolbox. Drag ScreenGui, Frame, TextLabel, TextButton, ImageLabel, ImageButton, TextBox, ScrollingFrame, and layout objects (UICorner, UIGradient, UIListLayout, UIGridLayout, UIPadding) onto the canvas. The 3I extension adds constraint, media/3D, world-space, and interactive composite components. Click a component once to add it at the canvas center, or drag it to drop it at a specific spot.
Hierarchy tab: this shows the element tree. Rename elements by double-clicking, duplicate with Ctrl+D, reorder by dragging, or delete with the Delete key. Right-click any element for context actions. The hierarchy matters because parent-child relationships control layout - a child of a Frame positions relative to that Frame.
AI tab: describe a UI in plain text and the generator returns a starting layout. You can then refine it on the canvas. The Free plan includes 50 AI credits per month; each generation costs one credit.
Canvas: this is your working area. Elements render with their actual colors, text, and borders. Click an element to select it, drag to move it, and drag the corner handles to resize. Grid snapping helps you align elements to a 10px grid. Preview on Desktop, Tablet, or Mobile by switching the DeviceFrame preset.
Properties panel: this is where you fine-tune. It shows Position, Size, AnchorPoint, BackgroundColor3, BackgroundTransparency, Text, Font, TextSize, TextColor3, CornerRadius, and layout-specific fields. Extended component types (UIStroke, UIScale, ColorSequence, EventBinding) have their own editors in the property panel.
Undo and redo: use Ctrl+Z and Ctrl+Y, or the toolbar buttons. The editor keeps a snapshot history, so you can step back through every change.
Export: click Export for three formats. LocalScript is a single file for StarterGui. ModuleScript wraps the GUI in a reusable module. Client+Server bundles both sides with a RemoteEvent for two-way logic. Or download a ZIP with everything.
Keyboard shortcuts: Ctrl+Z/Y for undo/redo, Ctrl+C/V/D for copy/paste/duplicate, Delete to remove, arrow keys to nudge the selection, and Ctrl+S to save a project.