Getting Started

DX404LibUI Introduction

DXLibUi

Introduction

DX404LibUI is a fork of the DXLibUI from supg (soupg), a DX9WARE Exclusive UI Library that was created to add UI support for DX9WARE scripts.

The library gets consistent additions and updates to make the user experience as smooth and enjoyable as possible.

Functionality

DXLibUI was built to be as simple as possible while still giving the developer as much control as possible. The library is built around variable usage and has a very basic syntax.

Each UI element / tool has its own set of properties which can be edited to add usability to the library.

How To Use

Copy and paste this line into your DX9WARE script to start using the library!

Lib = loadstring(dx9.Get("https://raw.githubusercontent.com/Brycki404/DXLibUI/refs/heads/main/main.lua"))()

Function List

This list of functions is very vague. For more info on each function, please refer to the rest of the FAQ.

Lib:SetWatermarkVisibility(Bool) --// (temporarily does not work)
Lib:SetWatermark(Text, {Location = {x, y}}) --// (temporarily does not work)
Lib:Notify("Notification Message", duration) --// Sends a notification (great when paired with OnChanged!)
Lib:CreateWindow(WindowTitle)

	Window:AddTab(TabName)
	
		Tab:Focus()
		Tab:AddGroupbox(Name, Side) --// Side can be "Left" or "Right" or "Middle"
		Tab:AddLeftGroupbox(Name)
		Tab:AddRightGroupbox(Name)
		
			Groupbox:AddButton(Text, Function) --// Function AND Text can be one-line or multi-line
				Button:AddTooltip("Tooltip Text")
				Button:DisconnectKeybindButton()
				Button:ConnectKeybindButton("[F4]")
				
			Groupbox:AddColorPicker({Index = "unique tool index", Default = {r,g,b}, Text = "Text"})
				ColorPicker:OnChanged(function(new) end) 
				ColorPicker:SetValue({r,g,b})
				ColorPicker:Show()
				ColorPicker:Hide()
				ColorPicker:AddTooltip("Tooltip Text")

			Groupbox:AddToggle({Index = "unique tool index", Default = false, Text = "Text"})
				Toggle:OnChanged(function(new) end) 
				Toggle:SetValue(Bool)
				Toggle:AddTooltip("Tooltip Text")
				Button:DisconnectKeybindButton()
				Button:ConnectKeybindButton("[F4]")
		
			Groupbox:AddSlider({Index = "unique tool index", Default = 0, Text = "Text", Min = 0, Max = 100, Suffix = "%", Rounding = 0}
				Slider:OnChanged(function(new) end) 
				Slider:SetValue(Int)
				Slider:AddTooltip("Tooltip Text")
				
			Groupbox:AddDropdown({Index = "unique tool index", Text = "Text", Default = 1, Values = {"Option 1", "Option 2", "Option 3"}})
				Dropdown:SetValues(table)
				Dropdown:Show() 
				Dropdown:Hide() 
				Dropdown:OnChanged(function(new) end) 
				Dropdown:SetValue(val) --// Value can be a number (index of item) or string (name of item)
				Dropdown:AddTooltip("Tooltip Text")
			
			Groupbox:AddKeybindButton({Index = "unique tool index", Default = "[F4]", Text = "ESP Toggle Keybind: [F4]"})
				KeybindButton:AddTooltip("Tooltip Text")
				KeybindButton:SetText("ESP Toggle Keybind: [F3]")
				KeybindButton:SetKey("[F3]")
				KeybindButton:OnChanged(function(new) end)
			
			Groupbox:AddTextBox({Index = "unique tool index", Placeholder = ">>PUT TEXT HERE<<"})
				TextBox:AddTooltip("Tooltip Text")
				TextBox:SetValue("Sword")
				TextBox:GetValue()
			
			Groupbox:AddLabel(text, optional_color) --// Supports Multiline
			Groupbox:AddTitle(text) --// Does not support multiline
			Groupbox:AddBlank(sizeNum) --// Adds an empty space of said size
			Groupbox:AddBorder() --// Adds Border

Demo Script

This is a demo script made to show off every feature of the library, feel free to use this in-game to play around with the library.

--// Initiating Library
Lib = loadstring(dx9.Get("https://raw.githubusercontent.com/Brycki404/DXLibUI/refs/heads/main/main.lua"))()

--// Making Window
local Window = Lib:CreateWindow({Title = "DXLibUi Demo", Index = "window_1", Size = {0,0}, Resizable = true, ToggleKey = "[F5]", StartLocation = {300, 300}, Rainbow = true, FooterToggle = true, FooterRGB = true, FooterMouseCoords = true})

--// Making Tabs
local Tab1 = Window:AddTab("Tab 1")
local Tab2 = Window:AddTab("Tab 2")

if Lib.FirstRun then -- If its the first run of the library, focus tab 1
    Tab1:Focus()
end

--// Making Groupboxes
local Groupbox1 = Tab1:AddLeftGroupbox("Left Groupbox")
local Groupbox2 = Tab1:AddRightGroupbox("Right Groupbox")
local Groupbox3 = Tab1:AddMiddleGroupbox("Middle Groupbox")

--// Button
Groupbox1:AddButton("Demo Notification", function()
    --/ Code that executes on button click
    Lib:Notify("Demo Notification", 1)
end)

--// Color Picker 
local ColorPicker = Groupbox2:AddColorPicker({Index = "picker_1", Default = Lib.AccentColor, Text = "GUI Color"})

--/ If color changes
ColorPicker:OnChanged(function(color)
    Window.AccentColor = color
end)

--// Blank
Groupbox2:AddBlank(10)

--// Reset Color
Groupbox2:AddButton("Reset Color", function()
    ColorPicker:SetValue(Lib.AccentColor)
end)

--// Toggle 
local Toggle = Groupbox3:AddToggle({Index = "toggle_1", Default = true, Text = "Hover over me!"}):AddTooltip("Demo Tooltip :)")

--// Label
if Toggle.Value then Groupbox3:AddLabel("Toggled: True", {100, 255, 100}) else Groupbox3:AddLabel("Toggled: False", {255, 100, 100}) end

--// Border
Groupbox3:AddBorder()

--// Slider
local Slider = Groupbox3:AddSlider({Index = "slider_1", Default = 500, Text = "Window Width", Min = 300, Max = 1000, Suffix = "px", Rounding = 2})

Groupbox3:AddLabel("Window Width: "..Slider.Value)

--/ If slider changed
Slider:OnChanged(function(value)
    Window.Size[1] = value
end)

--// Title
Groupbox1:AddTitle("Demo Title")

--// Dropdown
local Dropdown = Groupbox1:AddDropdown({Index = "dropdown_1", Text = "GUI Theme", Default = 1, Values = {"Dark", "Light"}})

--/ If dropdown value changes
Dropdown:OnChanged(function(value)
    if value == "Dark" then
        Window.FontColor = {255, 255, 255}; 
        Window.MainColor = {25, 25, 25};
        Window.BackgroundColor = {20, 20, 20};
        Window.AccentColor = {255, 50, 255}; 
        Window.OutlineColor = {40, 40, 40};
    else
        Window.FontColor = {69, 69, 69}; 
        Window.MainColor = {150, 150, 150};
        Window.BackgroundColor = {200, 200, 200};
        Window.AccentColor = {255, 50, 255}; 
        Window.OutlineColor = {100, 100, 100};
    end
end)

DXLibUi Demo

For more script examples, check out my DX9WARE Script Repository, which contains lots of DX9WARE scripts with this library as a core component.