Introduction

RSML (Roblox Style Markup Language) is a declarative language for defining styles.

Example

./button.rsml

@derive "attributes";

.Button {
    @priority 50;
    AutomaticSize = :XY;
    TextColor3 = $ColorText;
    FontFace = $FontFace;
    TextSize = $TextSize;

    .Primary {
        BackgroundColor3 = $ColorPrimary;
    }

    .Secondary {
        BackgroundColor3 = $ColorSecondary;
    }

    .Destructive {
        BackgroundColor3 = $ColorDestructive;
    }

    .Disabled {
        BackgroundTransparency = .4;
        Interactable = false;
    }

    ::UIPadding {
        PaddingLeft = 10px;
        PaddingRight = 10px;
        PaddingTop = 10px;
        PaddingBottom = 10px;
    }

    ::UICorner {
        CornerRadius = 10px;
        CornerRadius = 50px;
    }
}

./attributes.rsml

$FontFace = font ("BuilderSans", "SemiBold");
$TextSize = 14;
$ColorText = tw:slate:50;
$ColorPrimary = tw:blue:700;
$ColorSecondary = tw:slate:700;
$ColorDestructive = tw:rose:700;

Integrations

RSML Luau

A package designed to convert stringified rsml inside .luau and .ts files into Instances in the DataModel at runtime. Also exposes a lexer and parser.

• Documentation
• Github Repo
• Wally Package
• NPM Package

RSML Rojo

A Rojo fork which converts .rsml files to Roblox instances in the DataModel.

• Documentation
• Github Repo

RSML CLI

A codegen CLI which converts .rsml files to .luau files in the local file system.

• Documentation
• Github Repo

RSML Rust

A crate designed for lexing and parsing RSML.

• Documentation
• Github Repo
• Crates.io

IDE Support

VS Code Extension

Adds syntax highlighting to .rsml files. Also adds highlighting to luau and typscript strings prefixed with the --!rsml (or --[=*[rsml!]=*]) sigil.

• Github Repo
• VS Marketplace