Supported instances and properties

Scope and status answers “is text done?” at the area level. This page answers “does AutomaticCanvasSize work?” at the property level.

Everything below describes loom 0.12.0 — the JSX intrinsics in @loom-dev/react, the DOM mapping in @loom-dev/renderer, and the Rust layout engine in crates/loom-layout.

How to read this

Accepted is the row that costs you time, so it is spelled out. Those props exist so real component code, which sets them for the Roblox build, runs under the preview without edits.

Instances

GuiObject properties

Shared by every visual class.

ScreenGui properties

Text properties

AutomaticSize on text

Auto-sizing text is measured browser-side. Font metrics do not exist inside the WASM engine. The adapter runs a canvas measureText() with the font the renderer paints, and hands the result over as TextBounds. Which typeface that is, and why it is worth pinning, is Fonts and text metrics.

TextWrapped is honoured, and runs are laid into lines at word boundaries. One function decides every wrap. Measurement asks it how many lines a label needs, and the text layer asks where the breaks go. The advances behind it are the engine’s.

The wrap width is the nearest ancestor with a width of its own, less every UIPadding in between — not the immediate parent. A parent that is itself AutomaticSize was sized by the label, so wrapping against it never wraps.

The re-wrap settles inside the paint that caused it. The first measurement after a container narrows is against the old width. The adapter re-lays-out until the two agree, up to four passes before deferring to the next frame. It patches the DOM once.

A RichText string is measured run by run in the font its tags ask for, so a bold run does not clip. An empty TextBox is measured against its PlaceholderText, or an AutomaticSize.Y input would collapse to zero height.

Both adapters do this, so the same scene lays out identically through vide and react.

The wrap width also carries the UIPadding insets in between, including scale ones. A scale inset resolves against the node’s own width where its X axis is real, and against zero where the axis is automatic. Otherwise the width would set the padding, which would set the width.

TextSize is a face height, not a font size

TextSize means different things to the two renderers. Roblox fits the whole face into it, ascender to descender. CSS font-size sets the em square, and a face’s ascent plus descent runs well past 1em.

Loom divides by the face box rather than painting font-size: TextSize straight through, which would draw every glyph too big. LineHeight sets the line box in pixels off TextSize. The ratio is calibrated per family — see TextSize is not a font size.

The clip rect carries the overhang the browser’s taller line boxes need, and padding hands the content box its original height back. Otherwise a paragraph’s last line loses its descenders. Nothing about the layout moves, and a label still clips its text at its left and right edges.

AutomaticSize is bounded by the parent

Roblox bounds automatic growth: an AutomaticSize object grows up to the maximum its parent allows, and a TextWrapped label grows to that maximum and only then wraps.

Every auto-sized node carries the ceiling its parent leaves, inherited through the padding in between. Size remains the floor even past it, and a wrapping UIListLayout wraps against the same ceiling. Content that still does not fit overflows, as it does in the engine.

A ScrollingFrame is the exception. Its children get no ceiling on an axis carrying AutomaticCanvasSize or a CanvasSize of 0. A CanvasSize giving the axis a real extent is still a ceiling.

Image properties

Shared by imagelabel and imagebutton. The image paints in a layer beneath the text, as a background-painted element rather than an <img>. A sprite window and a 9-slice both place a region of the source.

Two combinations are not reproduced, and say so rather than painting something wrong:

• ScaleType.Tile with an ImageRect window. CSS backgrounds cannot repeat a region, so the whole image tiles and loom warns once, naming the node.
• A SliceCenter measured against a window rather than against the whole image. The slice insets are read from the source’s natural size.

TextBox properties

ScrollingFrame properties

Layout and modifier properties

UIListLayout and UIGridLayout report AbsoluteContentSize back after layout, gated on real change. A control that sizes itself from Change={{ AbsoluteContentSize }}, such as a dropdown, gets a real number instead of collapsing to zero height.

SortOrder defaults to Name

Every UIGridStyleLayout defaults SortOrder to Name, the engine’s own default — so a list whose children carry distinct Names flows alphabetically, not in source order. The sort is stable, so a tree that never sets Name is unaffected.

Loom defaulted to LayoutOrder until 0.7.0. If a list reordered itself when you upgraded, it was already ordering that way in Studio. Set SortOrder={Enum.SortOrder.LayoutOrder} to get source order back.

UITableLayout

The layout’s siblings are the table’s lines: rows, or columns under MajorAxis.ColumnMajor. Each line’s own children are the cells:

<frame Size={UDim2.new(1, 0, 0, 120)}>
  <uitablelayout Padding={UDim2.new(0, 8, 0, 4)} FillEmptySpaceColumns={true} />
  <frame Name="Row1">
    <textlabel Text="Region" Size={UDim2.fromOffset(120, 26)} />
    <textlabel Text="Players" Size={UDim2.fromOffset(100, 26)} />
  </frame>
</frame>

A column is as wide as its widest cell, and a row as tall as its tallest. Both are measured against the table’s content box, so a 0.25 scale cell is a quarter of the table, not of its row. A line spans the whole table on its minor axis. Its own Size is ignored, as is any UIPadding on it, which would otherwise slide its cells off the columns they define.

FillEmptySpaceColumns and FillEmptySpaceRows scale the tracks proportionally so the table spans its container. It works in both directions, so a table whose natural width overruns is squeezed by the same rule. A hidden cell takes neither a track nor a gap.

UIPageLayout

Pages keep their own Size and sit one container-plus-Padding apart along FillDirection, so a parent with ClipsDescendants shows exactly one. Which page that is, is state — changed by method call as in Roblox, through a ref:

const pager = useRef<{ Next(): void; CurrentPageIndex: number }>();

<frame Size={UDim2.new(1, 0, 0, 90)} ClipsDescendants={true}>
  <uipagelayout
    ref={(instance) => { pager.current = instance as never; }}
    Padding={UDim.new(0, 16)}
    Circular={true}
  />
  {/* …pages… */}
</frame>;

JumpToIndex(i), JumpTo(page), Next() and Previous() all work and fire PageLeave → PageEnter → Stopped. Circular decides whether Next and Previous wrap at the ends.

Instance API

Every mounted object is a real instance with Roblox’s reflection surface on it, not a React element with a Roblox-shaped name. So a ref behaves the way a ref does in a place.

WaitForChild does not yield. The runtime is synchronous, so it returns the child if it is already there and otherwise warns rather than blocking the frame. Code that waits on a child built later in the same render needs restructuring, not patience.

A property read before it is written answers with a typed default, the way Roblox reflection does rather than with undefined. That is 0 for a number, "" for a string, and the class’s own default for a datatype. A UI that reads frame.BackgroundTransparency before setting it used to get undefined and propagate a NaN through whatever it computed.

Attributes

The second namespace on every instance, and the one an app owns outright, landed in 0.11.0. It behaves as it does in a place. An attribute is not readable as a property, does not fire Changed, and reaches neither the renderer nor the Scene IR. Writing one paints nothing and schedules no flush.

const player = Players.LocalPlayer;

player.GetAttributeChangedSignal("ColorScheme").Connect(() => {
  print(player.GetAttribute("ColorScheme"));
});

player.SetAttribute("ColorScheme", "dark"); // fires
player.SetAttribute("ColorScheme", "dark"); // unchanged — silent, as in Roblox
player.SetAttribute("ColorScheme", undefined); // removes it, and still fires

GetAttributes() hands back a snapshot rather than the live store. Names are validated the way the engine validates them: up to 100 alphanumerics and underscores, with the RBX prefix reserved. A name a real place would refuse throws here rather than working in the preview and failing in Studio.

Input

Pointer and keyboard input route through the real runtime, not DOM shims. Activated, MouseButton1Click, InputBegan / InputChanged / InputEnded, UserInputService, focus and TextBox editing all behave as in Roblox, input-sinking included.

0.12.0 closed the gap where the rest of the mouse events were connectable but never dispatched, which is worse than absent. A handler attached to one silently did nothing. MouseButton1Down, MouseButton1Up, MouseButton2Click and MouseMoved fire now. Keyboard input reaches the runtime too, so UserInputService.IsKeyDown and a KeyCode comparison answer what the user actually pressed. Enum.KeyCode gained its digits, modifiers and gamepad buttons in the same release, which is what a keyboard-driven UI was missing to match against. Only TextButton, ImageButton, TextBox, ScrollingFrame and anything with Active = true sink pointer input — a transparent Frame is click-through, exactly as in Roblox.

Active governs sinking, not hearing. A plain Frame with an InputBegan handler, such as a slider handle, is hit-testable whether or not it is Active. A frame with no listeners stays click-through, so a transparent positioning layer does not swallow clicks.

What this list is not

It is a description of loom 0.12.0, not a compatibility promise. The project is pre-1.0 and rows move — an Accepted here is a gap someone can close without a breaking change. When a preview and Studio disagree and the property is not on this page, treat Studio as correct and file it.