Quick Start
Build your first reactive Handle in under five minutes.
This guide walks through the minimal setup for a working reactive Handle. By the end you will have a button that displays a live click counter.
Prerequisites
Complete Installation before starting this guide.
Create the UI
In Roblox Studio, build the following hierarchy inside a ScreenGui named HUD:
PlayerGui/
└── HUD/
└── Counter/
└── TextButtonCreate the Handle
Inside your Handles/ folder, add a ModuleScript named CounterHandle.
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Fragment = require(ReplicatedStorage.Fragment)
local Handle = Fragment.newHandle("Counter", { "HUD", "Counter", "TextButton" })
return Handle(function(element: TextButton)
local count, setCount = Handle:bind(0)
element.Text = `Clicks: {count()}`
Handle.Connect("Click", element.Activated, function()
setCount(count() + 1)
end)
end)Load it
Make sure FragmentLoad.client.luau points to your Handles folder.
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Fragment = require(ReplicatedStorage.Fragment)
Fragment.load(script.Parent.Handles)Press Play — the button shows Clicks: 0 and increments on each click.