The interface
A complete tour of the menubar, toolbox, canvas, inspector, and layers panel.
Easelt Builder gives you a full visual workspace for designing MTA:SA dx GUIs in your browser. This page is a complete tour of every region of the interface — the top menubar, the Toolbox, the canvas, the Inspector, the Layers panel, the status bar, and Preview mode — so you know exactly where each control lives and what it does.
Layout at a glance
The workspace is organized into a menubar across the top, three working panels around a central stage, and a status bar along the bottom. Every panel is collapsible and resizable — drag a panel's edge to give more room to whatever you're working on.
Easelt Builder brand on the left, the File / Edit / View menus, and a cluster of resolution, undo/redo, panel and export controls on the right.Top menubar
The `Easelt Builder` brand sits at the far left of the top bar. Next to it are three dropdown menus — File, Edit and View — and the right side of the bar carries quick-access buttons for resolution, history, panels and export.
File menu
| Item | What it does |
|---|---|
| New design | Start a fresh, empty design. |
| Designs… | Manage multiple design variants in one place. |
| Save (Ctrl S) | Save the current design. |
| Load | Open a previously saved design. |
| Export MTA resource… | Export your design as a ready-to-use MTA resource .zip. |
| Export design as PNG… | Export a flat PNG image of the design. |
Edit menu
| Item | What it does |
|---|---|
| Undo (Ctrl Z) | Step backward through your history. |
| Redo (Ctrl Y) | Step forward again through your history. |
| Duplicate (Ctrl D) | Make a copy of the selected element(s). |
| Copy (Ctrl C) | Copy the selection to the clipboard. |
| Paste (Ctrl V) | Paste from the clipboard onto the canvas. |
| Delete (Del) | Remove the selected element(s). |
| Select all (Ctrl A) | Select every element on the canvas. |
| Clear canvas | Remove everything and start from a blank stage. |
View menu
| Item | What it does |
|---|---|
| Grid (G) | Toggle the alignment grid on the canvas. |
| Snap (S) | Toggle snapping so elements align to the grid and each other. |
| Measure (M) | Toggle the measure overlay that shows sizes and gaps. |
| Toolbox panel | Show or hide the left Toolbox panel. |
| Inspector panel | Show or hide the right Inspector panel. |
| Preview / hide chrome (P) | Enter Preview mode to hide all the editor chrome. |
Right side of the top bar
Toolbox
The Toolbox on the left is a searchable list of element tools grouped by category. Type in the search box to filter tools by name, group or type, then click a tool to add that element to the canvas.
Because search matches name, group and type, you can jump straight to a tool by typing a category word even if you don't remember the exact element name.
Canvas / Stage
The canvas in the center is your design surface, rendered at whatever resolution you picked in the resolution selector. It is where you place, move and size every element — and it gives you live feedback while you work.
- Zoom with Ctrl+scroll, or Ctrl +, Ctrl -, and Ctrl 0 to reset.
- Pan by holding Space and dragging, or by dragging with the middle mouse button.
- Purple alignment guides appear while you drag, helping you line elements up.
- A measure overlay shows element sizes and the gaps to neighbouring elements and to the canvas edges.
Inspector
The Inspector on the right holds the controls for whatever you have selected. With nothing selected, it switches to show the GUI background settings for the design as a whole — so it's always doing useful work whether or not an element is active.
Layers panel
Toggle the Layers panel with the Layers button. It lists your elements as thumbnails you can drag to reorder, organize into group folders, and manage through a right-click menu.
Status bar
The status bar runs along the bottom of the workspace. It reflects the current state and surfaces contextual hints as you interact with the canvas and panels.
Preview mode
Press P to enter Preview mode, which hides all editor chrome so you see only your design exactly as it will appear. Press P again or Esc to exit.
Preview mode is view-only chrome-hiding — press P or Esc at any time to return to the full editor.
Panels are flexible
Every panel is collapsible and resizable — drag a panel's edge to resize it, or use the View menu and the top-bar buttons to toggle the Toolbox, Inspector and Layers panels entirely. Tailor the layout to the task in front of you.