Lesson 01 of 05
Reactive UI
Declare UI as a function of state. The path to maintainable interfaces.
Reactive UI means: your UI is a function of your data. When data changes, the UI updates automatically. You never manually update labels — you update data and the system handles the rest.
Fusion (open-source by Elttob) brings this to Roblox. Three core primitives:
- Value(x) — a mutable state container
- Computed(fn) — a derived value that updates when its dependencies change
- New
ClassName{} — declarative instance creation with reactive bindings
luau
1local Fusion = require(game.ReplicatedStorage.Fusion)
2local New, Value, Computed, OnEvent = Fusion.New, Fusion.Value, Fusion.Computed, Fusion.OnEvent
3
4-- State
5local coins = Value(0)
6local level = Value(1)
7
8-- Derived state
9local displayText = Computed(function()
10 return string.format('Level %d | %d coins', level:get(), coins:get())
11end)
12
13-- Reactive UI: auto-updates when coins or level changes
14local hud = New 'TextLabel' {
15 Text = displayText,
16 Size = UDim2.new(0, 200, 0, 32),
17 Font = Enum.Font.GothamBold,
18 TextSize = 16,
19 TextColor3 = Color3.new(1, 1, 1),
20 BackgroundTransparency = 1,
21 Parent = playerGui.HUD,
22}
23
24-- Update state anywhere in your code:
25coins:set(coins:get() + 100) -- HUD auto-updates
26level:set(level:get() + 1) -- HUD auto-updates
READY · 26 lines