Cxui : ultimate user interface framework?

I made a cool ui framework that works kind of similar to the Roact framework
It’s still in really early development but i wanted some opinion of it and if I should release it

Features will > include

  • Super memory friendly (this framework was bulit for memory in mind)
  • Short and direct, functions to create UIComponents in one line or to change certain functions
  • Flexibility (this was also built with this in mind)

I’ll try to include images when I have time.
But for right now I have my prototype draft for the idea of cxui (keep in mind this was made in an afternoon)

cxui.rbxm (7.5 KB)

Cool right?
  • Yeah i’ll keep up with updates n maybe or will use this
  • yea I’ll prob not use this
  • nah
0 voters

Imma go to bed

5 Likes

update ig
working on the actual first instance of this
can yall rate my organization


The ultimate user interface framework

Features include

Easy to understand and to type out and use for programming!
Memory friendly
Data exporting > basically exporting a cxuiClass back to data
Component wrapping / creating (i’ll explain later)
Custom functions / signals to simply

Previews

input events or events in general

local cxui = require(cxuiiguess)
local class = cxui.New("Frame")

class.callback = function(self, callbackCode, ...) -- exam 1
    if callbackCode == 1 then -- click code kinda like Enums yaknow
        warn("Clicked");
    end
end

class.MouseButton1Click:Connect(function() -- exam 2 this
    warn("Clicked")
end)

cxuiClass Interface

local cxui = require(cxuiiguess)
local interface = cxui.New("ScreenGui", {
	{
		"Frame",
		Size = UDim2.fromScale(1, 1),
		Position = UDim2.fromScale(.5, .5);
		AnchorPoint = Vector2.new(.5, .5),
		Name = "idkwhateveruwantittobe"
	}
})

-- setting interface to StarterGui
interface.Parent = game.StarterGui

-- destroying interface
interface();

The 1.0.0 bulid is not ready yet

who wants this?
  • Me
  • U can keep it
0 voters

No hate or anything, just my personal opinion. But I don’t think UI library’s are all that useful. Building UI in instances and learning how to code it nice and organized is al ot more better to do for me. I have tried fusion and vide out, but I never really enjoyed using it.

The way I setup my UI:

The hud module would handle parenting and return the instnace for other modules to use so that they don’t have to get the PlayerGui and stuff.

hud:

--!strict
local Players = game:GetService('Players')

local Player = Players.LocalPlayer
local PlayerGui = Player:WaitForChild('PlayerGui')

local hud = script.hud

hud.Parent = PlayerGui

return hud

yeah bro I tried Roact and hated using it. this is why I made this
btw I do the same thing u do too and idk I just hate how it looks

ik nobody cares about this project anymore,
so this will be the last update of this post.


Download RBXM : cxui.rbxm (9.6 KB)
**Download RBXL Showcase : cxuishowcase.rbxl (63.1 KB)

The new, the better user interface framework for advanced programmers.
CXUI, pronounced with each letter, is a lightweight & free framework for advanced scripters in roblox.

It’s features coupled with its free type / natural format makes it a useful tool when working with interfaces.
Specifically made with developers in mind, this framework is adaptable and easy to understand.

Features include

  • Free type / natural typing format
  • Bulit-in functions (Like for tweening you could say obj:Tween(TweenInfo, Properties))
  • Connections manager (When the object is destroyed, connections made with it are disconnect with it, more info later)
  • Component library (A library to build components to use inside your code)

PSUEDOCODE

cxui.New("ClassName", {
	-- Properties
}, {
	-- Children (you will literally never use this)
})

cxui.New(nil, {
	"ClassName"
}) -- Pure data example

-- Making a ScreenGui with a Frame in it

cxui.New("ScreenGui", {}, {
	{
		"Frame", 
		Size = UDim2.fromOffset(100, 100)
	}
})

-- or, in a better way

cxui.New("ScreenGui", { -- inside the properties table
	{ -- you can add in data for children
		"Frame",
		Size = UDim2.fromOffset(100, 100)
	}
})

{ -- Data analogy
	ClassName, -- WILL ALWAYS BE IN THIS POSITION, or data[1]
	  -- oh yeah I forgot you can add names too, its the same deal with the classname just make sure it comes after the classname.
	Properties, --- anywhere really
	Children, --- Same thing
	
	Wraps, -- functions bulitin, they are called and given the cClass, cStack, or cxuiStack (more later)
}

{ -- Example with a textbutton that prints "Hello World!" each time it is clicked
	"ScreenGui",
	
	{
		"TextButton",
		
		Size = UDim2.fromOffset(200, 50),
		Position = UDim2.fromScale(.5, .5),
		AnchorPoint = Vector2.new(.5, .5),
		
		function(cStack)
			cStack.MouseButton1Click:Connect(function()
				print("Hello World!")
			end)
		end,		
	}
}

{ -- or in a different sense, you can make the cxui stack button and implement it into the data
	"ScreenGui",
	cxui.New("TextButton", {

		Size = UDim2.fromOffset(200, 50),
		Position = UDim2.fromScale(.5, .5),
		AnchorPoint = Vector2.new(.5, .5),

		function(cStack)
			cStack.MouseButton1Click:Connect(function()
				print("Hello World!")
			end)
		end,		
	})
}

{ -- There are special wraps for some GuiObjects (buttons, canvasgroups, textboxes)
	"TextButton",
	
	Size = UDim2.fromOffset(200, 50),
	Position = UDim2.fromScale(.5, .5),
	AnchorPoint = Vector2.new(.5, .5),
	
	onClick = function()
		print('Hello World!')
	end,
}


{
	"ScreenGui",
	
	{ -- works anywhere.
		"TextButton",

		Size = UDim2.fromOffset(200, 50),
		Position = UDim2.fromScale(.5, .5),
		AnchorPoint = Vector2.new(.5, .5),

		onClick = function()
			print('Hello World!')
		end,
	}
}

-- What is a cxuiStack?
-- It's basically a metatable, that mimics a real instance
-- It saves connections in its _connections table, which explains connection manager

-- Just know you can't substitude it for actual instances, to get the actual instance, you would do cxuiStack.inst
-- This code is open source and I'm too lazy to write a doc, you can search in inst! and cxui to find special functions and whatnot.

--[[ cxui itself (the module i mean)
cxui.New(classname?, data, children?) yeah this is want you'll need to use most of the time
cxui.fromExisting(instance), creates a cxuiStack from an existing instance, will NOT support Clone or for cxuiStack so just clone the actual instance, 
and you can't export that cxuiStack either.

bulitin to each cxuiStack (example: cxuiStack:getElementFromId(id), cxui.getElementFromId(stack, id), like string and string literals)
	
	:/.getElementFromId(stack?, id)
		how to apply ids,
		add id and a value that isn't nil to the data
		exam: cxui.New("Frame", {
			id = true
		})
	:/.getElementFromName(stack?, name)
	:/.mount(rootClass) rootClass could be an instance or cxuiClass, mounts it and parents it to that rootClass.
	:/.unmount(). destroys the whole cxuiStack and literally everything else with it, you could also do cxuiStack()
]]

-- done

1 Like


icon for cxui

1 Like