Getting started

ui connects reactive state and animation to UI that you built in Roblox Studio. It does not create Instances or render a component tree.

Install

Add the package with Pesde:

pesde add twistedsignal/ui

Map the generated roblox_packages directory into your Rojo project, then require the package from the mapped location:

local ui = require(ReplicatedStorage.roblox_packages.ui)

Bind existing UI

The keys in a binding tree resolve in this order: property, event, then child. A property accepts a constant, reactive value, Rx observable, or reactive expression. An event accepts a callback. A child accepts another binding table.

local open = ui.value(false)
local scale = ui.spring(function(): number
	return if open() then 1 else 0.9
end, { frequency = 7, damping = 0.75 })

local cleanup = ui.bind(screenGui, {
	Panel = {
		Visible = open,
		UIScale = { Scale = scale },
		Toggle = {
			Activated = function(): ()
				open(not open())
			end,
		},
	},
})

Call cleanup() when the UI is removed. Calling it more than once is safe. The bind also stops itself when its root Instance is destroyed.

Next

Read Reactive state for values and effects, or Motion for springs and tweens. The API tab contains the generated reference.