⌘K

The Reactive Roblox Framework

Build reactive, component-based user interfaces with Rex—a declarative UI framework inspired by React/VueJs patterns, designed specifically for Roblox and Luau.

Get started Quick Start See API

Why Rex?

Rex brings modern web development patterns to Roblox, making UI development faster, more maintainable, and less error-prone.

Lightning Fast

Rex uses efficient reconciliation algorithms and batched updates to ensure optimal performance. Only elements that actually changed are updated, providing smooth 60+ FPS experiences even with complex UIs.

Declarative & Reactive

Build your UI using a simple, declarative syntax with automatic reactivity. State changes automatically update the UI without manual intervention, eliminating common bugs.

Zero Dependencies

Rex is completely self-contained with no external dependencies. Built specifically for Luau and Roblox, it integrates seamlessly into any project without bloating your game.

Simple, Declarative Syntax

Rex lets you build UI with readable, maintainable code—no complex hierarchies or boilerplate.

local Rex = require(game.ReplicatedStorage.Rex)

local function Counter()
  local count = Rex.useState(0)
  
  return Rex("Frame") {
    Size = UDim2.fromScale(1, 1),
    BackgroundColor3 = Color3.fromRGB(30, 30, 40),
    children = {
      Rex("TextLabel") {
        Text = count:map(function(value)
          return "Count: " .. tostring(value)
        end),
        Size = UDim2.new(1, 0, 0, 50),
        TextColor3 = Color3.new(1, 1, 1),
        BackgroundTransparency = 1
      },
      Rex("TextButton") {
        Text = "Increment",
        Size = UDim2.fromOffset(120, 40),
        Position = UDim2.new(0.5, -60, 0, 60),
        BackgroundColor3 = Color3.fromRGB(70, 130, 255),
        onClick = function()
          count:update(function(current) 
            return current + 1 
          end)
        end
      }
    }
  }
end

Rex.render(Counter, game.Players.LocalPlayer.PlayerGui)

How it works

Components: Functions that return Rex elements, promoting reusability and organization.
State: Rex.useState creates reactive values that automatically update the UI.
Reactive Properties: Use :map() to derive values from state that update automatically.
Event Handling: onClick and other events use camelCase naming for consistency.
Rendering: Rex.render mounts your component tree to Roblox's GUI system.

See Rex in Action

Watch how Rex automatically updates the UI when state changes. No manual DOM manipulation required.

Click the button above or let it auto-increment every 2 seconds

Counter.luau

local function Counter()
  local count = Rex.useState(0)
  local color = Rex.useComputed(function()
    local value = count:get()
    if value < 5 then
      return Color3.fromRGB(70, 130, 255)
    elseif value < 10 then
      return Color3.fromRGB(255, 165, 0)
    else
      return Color3.fromRGB(255, 70, 130)
    end
  end, {count})
  
  return Rex("Frame") {
    Size = UDim2.fromScale(1, 1),
    BackgroundColor3 = Color3.fromRGB(30, 30, 40),
    children = {
      Rex("TextLabel") {
        Text = count:map(function(value)
          return "Count: " .. tostring(value)
        end),
        Size = UDim2.new(1, 0, 0.4, 0),
        TextColor3 = Color3.new(1, 1, 1),
        TextScaled = true,
        BackgroundTransparency = 1
      },
      Rex("TextButton") {
        Text = "Click Me!",
        Size = UDim2.fromOffset(200, 60),
        Position = UDim2.new(0.5, -100, 0.6, 0),
        BackgroundColor3 = color,
        TextColor3 = Color3.new(1, 1, 1),
        TextScaled = true,
        onClick = function()
          count:update(function(current) 
            return current + 1 
          end)
        end
      }
    }
  }
end

Live Preview

Interactive Demo

Count: 0

Current State:

count: 0

Key Features

🎯 Type Safety

Built for Luau with comprehensive type definitions and intellisense support.

🔄 Automatic Updates

UI automatically stays in sync with your application state through reactive bindings.

🧩 Component System

Build reusable components with props, state, and lifecycle hooks just like React.

⚡ Smart Reconciliation

Efficient key-based diffing ensures only necessary elements are created, updated, or removed.

Modern Development Patterns

Context & State Management

Share state across your component tree with Rex's Context API. No prop drilling, just clean, maintainable code.

Global state management with Context

Computed values with automatic dependency tracking

Async state handling with loading and error states

-- Global theme context
local ThemeContext = Rex.createContext("dark")

local function App()
  local theme = Rex.useState("dark")
  
  return Rex.Provider {
    context = ThemeContext,
    value = theme,
    children = {
      Header(),
      MainContent(),
      Footer()
    }
  }
end

-- Use anywhere in the tree
local function ThemedButton()
  local theme = Rex.useContext(ThemeContext)
  
  return Rex("TextButton") {
    BackgroundColor3 = theme:map(function(t)
      return t == "dark" 
        and Color3.fromRGB(70, 130, 255)
        or Color3.fromRGB(240, 240, 240)
    end)
  }
end

Ready to modernize your Roblox UI?

Join developers who've already made the switch to Rex for cleaner, more maintainable, and more powerful user interfaces.

Get Started Quick Start Guide

Search Documentation