vide/docs/index.md

layout	next	hero	features
home	text link Introduction /tut/crash-course/1-introduction	name tagline image actions Vide A reactive UI and state library for Luau. src /logo.svg theme text link brand Crash Course /tut/crash-course/1-introduction theme text link alt API Reference /api/reactivity-core	title details Reactive State Management Built upon Solid and makes building reactive applications simple. title details Declarative and simple syntax Syntax designed to be minimal while also being easy to understand. title details Fully Luau typecheckable Luau's typechecker catches type errors before you even begin testing.

Quick Look

Store your state to be used by UI in Sources which can be changed by any code:

-- We can create some new state.
local health = source(100)

-- and read and write to it like a function
print(health()) --> 100
health(50)
print(health()) --> 50

You can use sources to compute new derived values with functions:

local health = source(100)
local maxHealth = source(100)

-- We can use a function to derive new data from some state
local function percentageHealth()
    return `{ health() / maxHealth() * 100 }%`
end

print(percentageHealth()) --> 100%
health(50)
print(percentageHealth()) --> 50%

Use effects to react to changes to the sources used:

local health = source(100)
local maxHealth = source(100)

-- We'll create a new scope for handling effects.
local destroy = root(function()
    -- We can create an effect that will re-run whenever it's values change.
    effect(function()
        print(`{ health() / maxHealth() * 100 }%`)
    end)
end)

-- Effects will respond to any changes in the state it reads from.
health(50) --> effect prints 50%
-- Destroys the scope and the effect preventing it from running again.
destroy()

You can use sources to build instances that will react to these sources:

-- We create a scope that will mount the UI to Players.LocalPlayer.PlayerGui
mount(function()
    local health = source(100)
    local maxHealth = source(100)

    local function percentageHealth()
        return health() / maxHealth()
    end

    -- This will create a Frame with the given properties.
    return create "Frame" {
        Name = "Health",
        Size = UDim2.new(1, 0, 0, 24),
        BackgroundColor3 = Color3.fromHex("#000000"),

        -- We can add children directly to another object.
        create "Frame" {
            Name = "Fill",
            -- ... and we can set properties to effects which automatically update the property.
            Size = function()
                return UDim2.fromScale(percentageHealth(), 1)
            end,
            BackgroundColor3 = Color3.fromHex("#ff0000"),
        }
    }
end, Players.LocalPlayer.PlayerGui)

Install

Vide can be installed via Wally and Github. There is currently no official Vide rbxm.

:::tabs == Wally

Make sure you have wally installed on your computer.
Add the following line to your wally.toml and then re-install your packages

[dependencies]
vide = centau/vide@0.3.1

== Git

Make sure you have Git installed on your computer.
Run the following command in the directory you want to have Vide installed at

git submodule add https://github.com/centau/vide.git

== Build

Download vide onto your computer

git clone https://github.com/centau/vide.git & cd vide

then use a syncing tool to build Vide into a rbxm

rojo build -o build.rbxm

which you can then insert into Roblox Studio

:::