Loom · Docs

Loom takes the @rbxts/react (or vide) UI tree you already ship to Roblox and renders it in a browser, with Roblox layout semantics rather than CSS ones. UIListLayout, UIPadding, AutomaticSize, UISizeConstraint and text measurement are computed by a Rust layout engine compiled to WASM. The result is painted into plain DOM nodes. Clicks, keyboard input and hover route back through UserInputService and instance signals, so a preview is interactive, not a screenshot.

The delivery mechanism is Vite. One plugin, loomPreview(), does all of it. It aliases @rbxts/react, @rbxts/react-roblox and @rbxts/services onto browser adapters. It installs the Roblox datatype globals such as UDim2, Color3, Enum and game, plus the Luau standard library, before your entry evaluates. It rewrites roblox-ts import X = require(...) statements to ESM. And it resolves packages whose main points at uncompiled Luau straight to their TypeScript source. There is no roblox-ts build step in the loop — esbuild transpiles the same TSX, and HMR works.

It generates the page too, so a roblox-ts source tree needs no index.html and no entry wiring:

import { loomPreview } from "@loom-dev/preview/vite";
import { defineConfig } from "vite";

export default defineConfig({ plugins: [loomPreview()] });

Or skip the config file entirely with loom preview . — the CLI is the same plugin with a server around it.

import { loomPreview } from "@loom-dev/preview/vite";
import { defineConfig } from "vite";

// Aliases @rbxts/react, @rbxts/react-roblox and @rbxts/services onto the
// loom adapters, installs the Roblox globals, and sets the automatic JSX
// runtime — a roblox-ts source tree then runs unmodified in the browser.
export default defineConfig({
  plugins: [loomPreview()],
});

Your source, unmodified

No roblox-ts compile step. esbuild transpiles the same TSX Studio gets, and a Vite plugin swaps @rbxts/* for browser adapters.

Roblox-accurate layout

UIListLayout, constraints, AutomaticSize and text measurement run in a Rust layout engine compiled to WASM — not in CSS flexbox.

One contract, any frontend

@rbxts/react and vide both lower to the same Scene IR, so the layout engine and DOM renderer never learn about a framework.

Guides

Wire it into a project.

Vite integration

`loomPreview()` in your own Vite project — dependencies, options, your own HTML entry, gallery mode.

Advanced Vite setup

Import specifiers, unbuilt source checkouts, and sharing a Vite config with a React app.

Gallery targets

Browse many scenes at once — the `preview` export contract, discovery globs and error containment.

Animation

Three ways to move a preview — bindings, TweenService and springs — at zero React renders.

Fonts and text metrics

Which families ship, how to register the proprietary ones, and why `TextSize` is not a font size.

The debug panel

Timings, the logical viewport, the live instance tree, loaded typefaces, and a stage inspector.

Static builds and embedding

Bundle a gallery into a hostable SPA, then deep-link one scene per iframe.

Previews on a phone

What a preview does on a 390px screen, and the `?base=` opt-out for a wide composition.

Next.js integration

Serve the gallery from a Next.js app with `withLoomGallery()` — proxied in dev, static at build.

TypeScript setup

Ambient globals, JSX intrinsics and path mappings — none of which affect what renders.

Package compatibility

The automatic source redirect, the built-in adapters, and the `shims` option for everything else.

Troubleshooting

Blank previews, missing globals, React duplication and resolution errors — what each one means.

Reference

Every flag, alias, and export.

CLI

`loom preview` and `loom build` — every flag, its parsing rules, and config precedence.

Vite plugin

Everything `loomPreview()` contributes — options, plugins, aliases, merged config and the generated page.

Supported instances and properties

The per-property support matrix — rendered, accepted and ignored, or not typed at all.

Services

The Roblox services loom implements, and why the rest fail at the call rather than the import.

Luau globals

The Luau standard library a previewed tree runs against, and what is missing on purpose.

Packages

The @loom-dev scope — what each package owns, which ones you install, and the boundaries between them.

A preview tool, not a runtime.

Nothing loom produces ships to Roblox. It renders your UI tree in a browser so you can iterate without a Studio round-trip, and its fidelity is deliberately partial — UIScale, UIPageLayout and UITableLayout are not implemented. Read the scope before you trust a preview as ground truth.

Scope and status →