A web-based visual editor for creating SA-MP and open.mp TextDraws. Design your HUD directly in the browser and export ready-to-paste Pawn code, no server required.
Most TextDraw editors are either in-game tools that require running a SA-MP server, or basic web tools with limited features. This one runs entirely in the browser, has a proper layer system, supports multiple background images (layers) as a reference, and exports clean Pawn code for both Global and Player TextDraws.
If you like this project, consider supporting us!
The main canvas. Elements can be dragged, resized and selected individually or in a group. The left panel handles adding and organizing elements, the right panel shows properties for whatever is selected.
The export generates clean, ready-to-paste pawn code.
Requirements: Node.js 18 or higher
git clone https://github.com/San-Andreas-Online/web-textdraw-designer
cd web-textdraw-designer
cd app
npm install
npm run devOpen http://localhost:5173 in your browser and editing.
- Snap-to-grid with configurable grid size
- Drag selection for selecting multiple elements at once
- Resize any element with the corner handle
- Nudge selected elements with arrow keys
- Widescreen mode toggle for 16:9 layouts
All standard SA-MP TextDraw types are supported:
- Label
- Button
- Box
- Sprite
- Layer panel showing all elements in order
- Drag-and-drop layer reordering
- Toggle visibility and lock per element
- Bring to front / send to back
- Export to Pawn code. Global TD (
TextDraw) or Player TD (PlayerTextDraw) - Import from existing
JSONprojects orpawn codetextdraws
- Upload images as a overlay on the canvas
- Drag, resize, and adjust opacity per image
- Lock reference images so they don't get in the way while editing
- Useful for tracing mockups or screenshots
MIT