Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Roblox/roact/llms.txt

Use this file to discover all available pages before exploring further.

Roact brings declarative, component-based UI development to Roblox Lua. Inspired by Facebook’s React, it lets you describe your UI as a function of state — Roact handles creating and updating the underlying Roblox Instances efficiently through a virtual tree reconciliation process.

Installation

Install Roact via model file or the filesystem, and get it into your project

Hello, Roact!

Write your first Roact component and mount it to the PlayerGui

Core Concepts

Learn about elements, components, state, lifecycle methods, and events

API Reference

Complete reference for every function, component, and constant Roact exposes

​
Why Roact?

Roact makes it dramatically simpler to build and maintain complex Roblox UIs by applying the same declarative patterns that make React productive on the web.

Declarative UI

Describe what your UI should look like — Roact figures out how to make it happen. No more manual Instance management.

Component-Based

Encapsulate UI logic into reusable components. Compose them together to build full-featured interfaces.

Efficient Reconciliation

Roact’s reconciler diffs virtual trees and makes only the minimal necessary changes to real Roblox Instances.

React-Familiar API

If you know React, you already know most of Roact. Components, props, state, lifecycle, context — it’s all here.

​
Quick Example

LocalScript
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Players = game:GetService("Players")

local Roact = require(ReplicatedStorage.Roact)

-- A simple function component
local function Greeting(props)
  return Roact.createElement("TextLabel", {
    Text = "Hello, " .. props.name .. "!",
    Size = UDim2.new(0, 400, 0, 50),
  })
end

-- Mount the component tree to PlayerGui
local tree = Roact.mount(
  Roact.createElement("ScreenGui", {}, {
    Label = Roact.createElement(Greeting, { name = "Roblox" })
  }),
  Players.LocalPlayer.PlayerGui,
  "MyApp"
)

​
Get Started

1

Install Roact

Download the .rbxm model from the GitHub releases page and place it in ReplicatedStorage, or copy the src directory into your project and sync it with Rojo.
2

Require Roact

In a LocalScript, require Roact from wherever you installed it:
local Roact = require(game.ReplicatedStorage.Roact)
3

Create elements and mount

Use Roact.createElement to build a virtual tree, then Roact.mount to turn it into real Roblox Instances.
4

Build with components

Organize your UI into reusable function or stateful components. Use state, lifecycle methods, bindings, and context as your app grows.
Roact is inspired by React but is not a direct port — some behaviors differ. This documentation covers Roact’s specific API and Roblox-specific patterns.

Build docs developers (and LLMs) love

Get started for freeTalk to us