Getting started

You can start without any project files. Use the built-in Quick Start example.

1. Open the Playground and wait for the Lua editor to load.
2. In Script mode, choose Quick Start from the Example menu.
3. Click Run above the editor. The UI appears on the right. You can enable Auto preview to rerun the script as you edit it.
4. Try clicking the UI. Change the Lua and run it again. The Console below the editor shows printed messages and errors.

Use Workspace when your project has multiple Lua files, including files loaded with require(). For a single script, use Files.

1. Click Workspace and select your Lua project folder. The folder can have any name.
2. Click a file in the tree to edit it. Use the separate Preview selector to choose which script's OnStart() should run.
3. Click Run. The Playground loads any local modules referenced through require().
4. If you change files in another editor, click Refresh. Where supported, Auto refresh can pick up those changes for you.

MyProject/
├── UI Controllers/
│   └── Main UI.lua
├── Game UI/
│   ├── Inventory Page.lua
│   └── Inventory Data.lua
└── MiliUI/
    └── init.lua

If your project contains MiliUI/init.lua, enable Use folder MiliUI to test that version instead of the published one.

1. Switch to Builder in the top bar and start a Blank or Settings Page template.
2. Use Components to insert a Row, Column, Text, Button, Card, or other available component.
3. Use Hierarchy to select, move, duplicate, or remove components. You can insert a component inside a container or before or after another component.
4. In Properties, change the text, size, layout, or alignment. Use flexible sizes if your UI needs to work on different screens.
5. Open Code to view the generated Lua. You can copy it, export it, or open it in Script mode.

Viewport sets the resolution your Lua script sees. This is different from the size of the preview panel on your screen.

When comparing screenshots with Test Play, use the same canvas size reported by game.GetUICanvasSize(). Two screens can both be 16:9 and still produce different layouts.

If you built your UI in the Miliastra editor, you can import its .gia file into the Playground. You don't need to use MiliUI for this.

1. Export your UI as a .gia file in Miliastra. In the Playground, open Script → Preview tools → Templates and choose Import .gia.
2. Expand the file in the Templates panel. Find the Client root marked Template ID. You can expand controls to see their children and IDs.
3. Use that ID with game.InstantiateClientUIControl(), then click Run. Check Hierarchy or use Inspect to see the imported controls.
4. If you export the UI again, re-import the new .gia. IDs may change between exports. The Playground may also ask you to re-import after an importer update.

function OnStart()
    local menu = game.InstantiateClientUIControl(
        1073742342,
        script.object
    )

    menu:SetActive(true)
    menu:SetVisible(true)
end

The Playground doesn't run your game's server scripts. You can use the Signals tab to test what your client UI does when it receives a server signal or a custom variable update.

local function refreshClass()
    local currentClass = game.GetGlobalCustomVariableValue(
        Enum.CustomVariableEntityType.PlayerSelf,
        "Current Class"
    ) or "None"

    print("Current Class: " .. currentClass)
end

function OnStart()
    script:RegisterCustomVariableChangedHandler(
        Enum.CustomVariableEntityType.PlayerSelf,
        "Current Class",
        refreshClass
    )
    refreshClass()
end

To try it, set the entity to Player, the name to Current Class, the type to String, and the value to Warrior. Click Apply Change and check the Console. Reapplying the same value also calls the handler. If a script registers more than one handler for the same entity and variable, only the first one runs.

You can use String, Integer, Float, Boolean, List, Dictionary, and Struct values. For List, Dictionary, and Struct, enter JSON such as ["Warrior","Tank"] or {"health":100}. Lua receives these as tables. JSON null isn't supported. Values remain set when you click Run, but they are cleared when you reload the browser page.