Getting started

Quickstart

Build your first interface and export it as an MTA:SA resource in a few minutes.

Welcome to Easelt Builder — a browser-based visual designer for MTA:SA dx GUIs, by Easelt · C4. This quickstart walks you all the way from a blank canvas to a runnable MTA resource: you'll pick a resolution, drop in your first element, style it, wire up a little logic, test it live, and export a ready-to-drop-in .zip.

The 60-second overview

Here's the whole journey at a glance. Each step below is expanded in its own section, but this is the shape of a first project:

Pick a Resolution
Choose your target resolution (e.g. 1920x1080) in the top bar so positions stay correct everywhere.
Add an element
Click a Toolbox tool — try Button — and it drops onto the canvas.
Style it
Use the Inspector to set fill colour, corners, text, outline, and shadow.
Arrange
Add more elements and line them up with alignment guides and grid/snap.
Add logic
Optionally open Blueprint and wire a click to open a window, toggle visibility, or change text.
Test
Press ▶ Test in Blueprint to try it live, then Esc to stop.
Save
Press Ctrl S — Easelt also autosaves as you work.
Export
Go to File → Export MTA resource to get a .zip you can drop into your server.

Step 1 — Pick your target Resolution

Before you place anything, set the target Resolution in the top bar — for example 1920x1080. This tells Easelt Builder which screen you're designing against so the on-canvas layout matches what a player at that resolution will see.

💡

Because Easelt lays elements out responsively, positions stay correct on other resolutions too — pick the resolution you design at, and your GUI scales cleanly for everyone else.

Step 2 — Add your first element

Open the Toolbox and click a tool to add its element — start with Button. The element drops straight onto the canvas, ready to be positioned and shaped. Every element supports the same three direct-manipulation gestures:

Drag to move

Grab the element body and drag it anywhere on the canvas to reposition it.

Drag handles to resize

Pull the handles on the element's bounding box to change its width and height.

Rotate handle to rotate

Use the dedicated rotate handle to spin the element to any angle.

Step 3 — Style it in the Inspector

With your element selected, the Inspector shows everything you can style. Work through each control to give your Button the look you want:

Control	What it does
Fill colour	Set the element's background colour using the colour picker.
Corners	Round the element's corners to taste.
Text	Edit the label and its text appearance.
Outline	Add a border/stroke around the element.
Shadow	Cast a shadow behind the element for depth.

💡

Click the colour picker next to Fill colour to choose any colour — it's the fastest way to make an element match your server's theme.

Step 4 — Add more elements and arrange them

Real GUIs are made of several elements. Add more from the Toolbox, then line them up precisely using Easelt's two positioning aids:

Alignment guides — smart lines appear as you drag, so edges and centres snap into agreement with nearby elements.
Grid / snap — elements snap to the grid for tidy, even spacing without eyeballing pixels.

Step 5 — Add logic in Blueprint (optional)

Want your GUI to actually *do* something? Open Blueprint and wire up behaviour visually — no Lua required. From a single click you can, for example:

Open a window
Toggle visibility of an element
Change an element's text

ℹ️

Blueprint is optional — a purely visual layout exports and runs perfectly fine without any wired logic.

Step 6 — Test it live

In Blueprint, press ▶ Test to run your GUI live and try the interactions you wired up — click your button, watch the window open, see the text change. Press Esc to stop testing and return to editing.

Esc

Stop the live Test session

Step 7 — Save your work

Press Ctrl S to save. Easelt Builder also autosaves as you work, so your project is protected even if you forget — but a manual save is a good habit before exporting.

CtrlS

Save the project (autosave also runs in the background)

Step 8 — Export your MTA resource

When you're happy, turn your design into a real resource. Go to File → Export MTA resource to download a .zip. That archive is a complete, drop-in MTA:SA resource containing:

File	What it is
`gui.lua`	Your generated GUI: the elements you drew and their layout.
`lib.lua`	The supporting library the generated code relies on.
`meta.xml`	The resource manifest that tells MTA:SA what to load.
assets	Any images and other files your design uses.

💡

Unzip the .zip into your server's resources folder, then start it like any other MTA resource — no hand-editing required.

Handy: preview without the chrome

At any point, press P to preview your design — this hides the editor chrome (Toolbox, Inspector, and panels) so you see just the GUI as a player would. Press P again to bring the editor back.

P

Toggle preview — hide the editor chrome to see your GUI clean

Next steps

You've built and exported your first GUI — nice work. Head to these pages next to go deeper:

The interface

A full tour of the top bar, Toolbox, canvas, Inspector, and Blueprint.

Elements

Every element type you can add, and what each one is for.

The inspector

A complete reference for every styling section and property.