Getting started

Introduction

Easelt Builder is a visual designer for MTA:SA dx interfaces — draw your HUD or menu, wire up its logic, and export a ready-to-run resource.

Easelt Builder is a browser-based visual designer for building MTA:SA dxDraw GUIs — HUDs, menus, panels, login screens, shops, and multi-window flows. You draw on a canvas, style each element in the inspector, wire up logic in Blueprint, test it live at any resolution, and export a ready-to-run MTA resource — all without leaving your browser.

💡

New here? Jump straight to the Quickstart to build and export your first HUD in a few minutes, then come back to this page for the full picture.

What Easelt Builder is

Easelt Builder turns the tedious parts of dxDraw UI work — hand-calculating pixel positions, guessing at scale, re-testing across resolutions — into a direct, visual workflow. Everything you'd normally hand-write with dxDrawRectangle, dxDrawText, and dxDrawImage you instead draw, drag, and style on a live canvas, then export as a runnable resource.

The whole app runs in your browser. Your work is saved locally and encrypted at rest — nothing is uploaded to a server. Your designs stay on your machine.

ℹ️

Because projects live in your browser's local storage, they are tied to the browser you use. Export your resource to move a design between machines.

Responsive by fractions

The core idea behind Easelt Builder is responsive by fractions: every position and size is stored as a fraction of the screen, a number between 0 and 1 — exactly like well-written dxDraw code. An element at x = 0.40 sits 40% across the screen on *any* resolution, so your UI holds its layout whether a player runs 1080p, 1440p, or ultrawide.

For preview, Easelt Builder renders at a chosen resolution. It converts each stored fraction into a real pixel value and scales text and spacing so what you see matches what players get in-game.

Concept	How it works
Stored value	Every `x`, `y`, `width`, `height` is a fraction from `0` to `1`.
Pixel conversion	`pixel = fraction * gameWidth` — a fraction becomes a real on-screen pixel at the preview resolution.
Scale factor	`S = gameHeight / 1080` — text and spacing scale relative to a 1080p baseline.
Example	`x = 0.40` renders 40% across the screen at every resolution.

💡

Thinking in fractions means you design once and it looks right everywhere — no per-resolution tweaking.

What you can build

HUDs & overlays

Health bars, ammo counters, minimaps, notifications, and other always-on screen elements that stay pixel-perfect across resolutions.

Menus & panels

Interactive menus and panels with real click logic — buttons, tabs, and controls that actually respond, not just static art.

Multi-window flows

Connected screens like a login → shop → inventory flow, with windows that open, close, and hand off to one another.

The workflow

Draw on the canvas
Place and arrange your elements visually on the live canvas.
Style in the inspector
Set colors, sizes, fonts, and other properties for the selected element.
Add logic in Blueprint
Wire up interactivity — clicks, state, and window flow — using the visual Blueprint editor.
Test live
Preview your GUI running at a chosen resolution to confirm layout and behavior.
Export a resource
Generate a runnable MTA:SA resource you can drop into your server.

How this guide is organised

The documentation is split into five parts so you can find what you need at each stage of a project:

Getting started

Install nothing, open the builder, and ship your first GUI. Begin with the Quickstart.

Designing

Work the canvas and inspector — placing, styling, and arranging elements by fractions.

Interactivity

Add real logic in Blueprint — clicks, state, and multi-window flows.

Shipping

Test live and export a runnable MTA resource.

Reference

Look up the details — properties, functions, and file names, all in one place.

Languages

Easelt Builder is available in five languages, so you can work in the one you're most comfortable with:

English
Arabic
French
Portuguese
Spanish