SYNQ UI
Introduction
Build sleek, customizable in-game GUIs for your SYNQ routines
SYNQ includes a powerful, sleek in-game GUI library built entirely from scratch. Build professional, highly-customizable interfaces for your routines in minutes, with advanced elements like multi-selection dropdowns, sliders, status frames, and a robust saved variable system.
Key Features
- No external dependencies – SYNQ UI uses no external textures or assets
- Built-in persistence – Settings automatically saved using SYNQ's config system
- No addon required – Everything works out of the box with your unlocker
- Highly customizable – Colors, layouts, and behavior are fully configurable
- Powerful elements – Checkboxes, sliders, dropdowns, status frames, and more
Quick Start
Here's a simple BM Hunter UI example to get you started:
local Unlocker, synq, example = ...
-- Define RGBA color scheme for the UI (red, green, blue, alpha)
local gold = {255, 215, 0, 1} -- Rich gold for title and accents
local amber = {255, 191, 0, 1} -- Amber for interactive elements
local white = {255, 255, 255, 1} -- Pure white for text
local dark = {15, 15, 20, 0.85} -- Dark background with slight blue tint
-- Create new UI instance - all saved variables are stored in settings table
-- The slash command to open/close the GUI will be /example
local gui, settings, cmd = synq.UI:New("example", {
title = "BM Hunter Settings",
show = true, -- Show UI automatically when loaded
colors = {
-- Title color appears in the top left of the UI
title = gold,
-- Primary color is used for general text throughout the UI
primary = white,
-- Accent color controls checkbox, slider, and other element colors
accent = amber,
background = dark,
}
})
-- Make settings available to your routine
example.settings = settings
-- Declaring tabs in local variables keeps code cleaner and more readable
local rotation = gui:Tab("Rotation")
rotation:Checkbox({
text = "Enable Burst Mode",
var = "burstMode", -- Checkbox state is stored in settings.burstMode (boolean)
default = false,
tooltip = "Automatically use burst cooldowns when available"
})
-- You can also access tab objects directly via the tabs table
gui:Tab("Pet Management")
gui.tabs["Pet Management"]:Slider({
text = "Pet Heal Threshold",
var = "petHealHP", -- Slider value is stored in settings.petHealHP (number)
min = 0,
max = 100,
default = 40,
valueType = "%",
tooltip = "Heal pet when HP drops below this percentage"
})
This creates a fully functional UI that you can open and close with /example. Customize the colors, add more elements, and integrate settings into your BM Hunter routine—that's where the real power comes from!
Next: Learn how to configure your UI in UI Configuration.