# Loom > Render a roblox-ts UI tree as a live web DOM preview, driven by Vite. - Docs: https://docs.astra-void.xyz/loom/ - Source: https://github.com/astra-void/loom - Full text: https://docs.astra-void.xyz/loom/llms-full.txt - Every page below is also served as Markdown at its own URL with `.md` appended. ## Overview - [Loom](https://docs.astra-void.xyz/loom/index.md): Render a roblox-ts UI tree as a live web DOM preview, driven by Vite. ## Getting started - [Installation](https://docs.astra-void.xyz/loom/getting-started/installation.md): Add loom to a project — the two packages, their peer requirements, the WASM layout engine, and what a source checkout needs instead. - [Your first preview](https://docs.astra-void.xyz/loom/getting-started/first-preview.md): Point the loom CLI at a roblox-ts project with no config, and understand what it generates. - [Scope and status](https://docs.astra-void.xyz/loom/getting-started/scope-and-status.md): What loom renders faithfully, what it recognizes but ignores, and what it will never be — read this before trusting a preview. - [How it works](https://docs.astra-void.xyz/loom/getting-started/how-it-works.md): The path from a roblox-ts component to DOM nodes — Scene IR, the WASM layout engine, the incremental renderer, and the four things the Vite plugin rewrites. ## Guides - [Vite integration](https://docs.astra-void.xyz/loom/guides/vite-integration.md): Add loomPreview() to your own Vite project — the dependencies, the zero-config default, the options, your own HTML entry, static builds and gallery mode. - [Advanced Vite setup](https://docs.astra-void.xyz/loom/guides/advanced-vite-setup.md): The three things that bite once loomPreview() is in a real workspace — import specifiers, unbuilt source checkouts, and sharing a Vite config with a React app. - [Gallery targets](https://docs.astra-void.xyz/loom/guides/gallery-targets.md): Browse many scenes at once with *.loom.tsx targets — the preview export contract, discovery globs, loom.config.ts, and per-target error containment. - [Animation](https://docs.astra-void.xyz/loom/guides/animation.md): Three ways to move a preview — bindings, TweenService, and the @rbxts/ripple springs — and why an animation costs zero React renders. - [Fonts and text metrics](https://docs.astra-void.xyz/loom/guides/fonts.md): The preview loads the engine's own typefaces and measures text the way the engine does — which families ship, how to register the proprietary ones, why TextSize is not a font size, and where a line breaks. - [The debug panel](https://docs.astra-void.xyz/loom/guides/debug-panel.md): What a preview is actually doing — the mounted target's timings, the logical viewport, the live instance tree, which typefaces really loaded, and a stage inspector that reaches click-through frames. - [Static builds and embedding](https://docs.astra-void.xyz/loom/guides/static-builds-and-embedding.md): Bundle a gallery into a hostable SPA with loom build, then deep-link one scene per iframe using the target/chrome/theme URL contract. - [Previews on a phone](https://docs.astra-void.xyz/loom/guides/mobile-previews.md): What a preview does on a 390px screen — the stage is the viewport and the scene reflows, the ?base= opt-out for a wide composition in a narrow frame, pointer coordinate mapping, touch scrolling, and the gallery chrome on a narrow viewport. - [Next.js integration](https://docs.astra-void.xyz/loom/guides/nextjs-integration.md): Serve the loom gallery from a Next.js app with withLoomGallery() — a live proxied gallery under next dev, an automatic static build under next build, and scene iframes in any page, Fumadocs included. - [TypeScript setup](https://docs.astra-void.xyz/loom/guides/typescript-setup.md): Make the editor happy without breaking your roblox-ts build — ambient globals, JSX intrinsics, path mappings, and why none of it affects what renders. - [Package compatibility](https://docs.astra-void.xyz/loom/guides/package-compatibility.md): What loom does with the @rbxts packages your tree imports — the automatic source redirect, the built-in adapters, and the shims option for everything else. - [Troubleshooting](https://docs.astra-void.xyz/loom/guides/troubleshooting.md): The failures you will actually hit — blank previews, missing globals, React duplication, resolution errors — and what each one really means. ## Reference - [CLI](https://docs.astra-void.xyz/loom/reference/cli.md): Complete reference for loom preview and loom build — every flag, its parsing rules, config precedence, and exit behavior. - [Vite plugin](https://docs.astra-void.xyz/loom/reference/vite-plugin.md): Everything loomPreview() contributes — its options, the plugins it returns, every alias, the config it merges, the page it generates, and which hooks run in serve versus build. - [Supported instances and properties](https://docs.astra-void.xyz/loom/reference/supported-properties.md): The per-property support matrix — what loom renders, what it accepts and silently ignores, and what will not typecheck at all. - [Services](https://docs.astra-void.xyz/loom/reference/services.md): The Roblox services loom implements for the browser — what each one provides, and why importing an unimplemented one is an error rather than a stub. - [Luau globals](https://docs.astra-void.xyz/loom/reference/luau-globals.md): The Luau standard library a previewed roblox-ts tree runs against — table, string, math, os, bit32, utf8, debug, buffer — where it is 1-based, where it is deliberately forgiving, and what is missing on purpose. - [Packages](https://docs.astra-void.xyz/loom/reference/packages.md): The @loom-dev scope — what each package owns, which ones you install, and the boundaries between them.