Getting Started
RoUI is a browser-based tool that helps you create Roblox UI components. Choose from 28 production-ready templates, customize visually or with AI, and bring your interface into Roblox Studio in seconds. You can start building immediately — no account, installation, or payment required. Sign in free during the public beta for unlimited exports, cloud project packs, community sharing, and cross-device access.
- 1
Open the editor & pick your mode
Click Launch App to open the editor. Work in Basic Mode for quick visual tweaks, instant theme palettes, smart actions, and fast exports — or switch to Advanced Mode when you want direct access to the instance tree hierarchy, Luau code, script tabs, and layout health tools.
- 2
Choose a template
Browse the template catalog with 28 built-in templates covering HUDs, menus, shops, and cartoon styles. Filter by category, genre, or style, or search by name to load any template into the live preview.
- 3
Customize
Apply 1-click Theme Palettes and Smart Actions (both run client-side at zero cost with no AI key needed), edit properties directly, or use the AI chat to describe changes in plain English.
- 4
Learn & inspect
Switch to the Learn tab to understand your UI structure. Enable annotated code mode to see inline explanations in the generated Luau, and hover over property labels for rich descriptions and tips.
- 5
1-click Studio drag & drop export
Export your UI as a .rbxmxfile and drag and drop it directly into Roblox Studio's Explorer window — no plugin or HTTP setup required. You can also copy Luau scripts, React Lua, or Fusion components to the clipboard.
Template customizations, theme palettes, and API keys are stored and processed locally in your browser. When you use AI, your key is sent transiently through RoUI's proxy to your selected provider and is not persisted by RoUI. Signed-in projects are saved to the cloud for cross-device access.
API Key Setup
RoUI provides zero-cost client-side Theme Palettes and Smart Actions with no API key required. If you want to use natural language AI chat to generate or rewrite elements, you can optionally connect an OpenRouter API key (BYOK).
Supported Provider
OpenRouter
Free & Paid ModelsSupports free models (OpenRouter Free), smart routing (Auto Router), and premium models with one single key.
Get your OpenRouter API key →No credit card is required to use OpenRouter's free models pool. You only pay if you choose to route to paid premium models.
How to add your key
- 1
Open Settings
Click the gear icon in the editor toolbar, or press Ctrl + ,
- 2
Paste your OpenRouter key
Enter your OpenRouter key (starts with sk-or-v1-).
- 3
Select your model
Choose from free models or auto-routed models from the dropdown list.
- 4
Start building
Switch to Advanced Mode to use the AI chat sidebar.
Your API key is persisted only in your browser's localStorage. It is forwarded only when you run an AI request, through RoUI's proxy to your selected provider. RoUI never persists your key on the server.
Templates
RoUI comes with 28 professionally designed templates covering the most common Roblox UI patterns, including a dedicated cartoon series. Each template is a complete, production-ready component tree. Templates can be filtered by category (HUD, Menu, Shop, Social, Utility), game genre (General, Classic, Simulator, Anime, FPS, RPG, Tycoon, Obby), and style (Cartoon or Classic).
Health Bar
Player health display with gradient fill and text label
Inventory Grid
Grid layout for items with slots and selection states
Shop Menu
Purchasable items with prices, categories, and buy buttons
Dialog Box
NPC-style dialog with character name, text, and response buttons
Settings Panel
Game settings with toggles, sliders, and section headers
Notification Toast
Pop-up notification with icon, title, and message
Minimap
Minimap frame with player indicator and compass markers
Kill Feed
Kill/event feed display with scrolling entries
Main Menu
Full-screen main menu with play button, title, and background
Classic Stud HUD
Retro Roblox-style HUD with health and player info
Simulator HUD
Modern simulator game HUD with stats and currency
Leaderboard
Player ranking display with scores and avatars
Toolbar / Hotbar
Bottom toolbar with numbered item slots
Loading Screen
Full-screen loading screen with progress bar
Navbar Buttons
Top navigation buttons with icon badges
Cartoon Inventory
Chunky panel inventory with bright slot styling
Cartoon Shop
Playful shop menu with bold product cards
Cartoon Stats
Rounded stat bars with colorful progress fills
Cartoon Settings
Friendly settings menu with toggle rows
Cartoon Quests
Quest list panel with progress and rewards
Cartoon Daily Rewards
Daily reward panel with streak highlights
Cartoon Codes
Promo code modal with redeem input
HUD Elements
Multi-stat HUD with health, stamina, level, and currency trackers
Game Shop Menu
Tabbed in-game shop with featured item cards and game passes
RPG Inventory
RPG gear slots, bag grid, and stat summary panel
Global Leaderboard
Ranked podium leaderboard with player avatars and badges
Radar Minimap
Circular radar minimap with blips, coordinates, and zoom controls
Game Settings Panel
Tabbed settings window with audio, graphics, and keybind tabs
Templates serve as starting points. Every property can be modified — colors, sizes, positions, text, fonts, gradients, and more. Use the AI chat or the Properties panel to customize them. Star your favorites to pin them to the top of the template list.
Request a Template
Have a specific UI pattern or component in mind that you would like to see as a RoUI template? New templates are added directly to the codebase to ensure quality and consistency across the platform.
If you have a Studio GUI you would like to contribute as a template, or if you have an idea for a new template, reach out on Discord (@mackaye) to discuss adding it to RoUI.
AI Customization
The AI chat lets you describe UI changes in plain English. The AI understands Roblox GUI properties and generates valid instance tree modifications. Changes stream in real-time and update the preview as they generate.
For the most consistent structured output, OpenAI and Anthropic models are usually the most reliable. OpenRouter free routes are excellent for testing and may need occasional retries.
Example prompts
AI Chat Features
Starter Prompts
When the AI chat is empty, suggested prompts appear to help you get started quickly. Click any prompt to send it instantly. Four random prompts are shown from a pool of eight.
Streaming Preview
AI responses stream in real-time so you can see the preview update as the response generates, rather than waiting for the full result.
Stop Generation
Click the stop button (or press Escape) while the AI is generating to cancel the current response. Useful if you see the AI heading in the wrong direction.
Clear Chat
Use the clear button in the chat header to reset the conversation history and start fresh with a new context.
Explain Changes
After the AI modifies your UI, an “Explain changes” link appears below the response. Click it to get a plain-English breakdown of what was modified and why.
The AI modifies the instance tree directly. Changes appear instantly in the preview and code editor. You can undo any AI change with Ctrl + Z.
Features
RoUI includes a number of features designed to make UI building faster and more intuitive.
Template Favorites
Star your favorite templates to pin them to the top of the sidebar. Favorites are saved in your browser and persist across sessions.
Full Undo & Redo
Every change — whether from AI, property edits, or tree modifications — is tracked in a full history stack. Undo with Ctrl + Z and redo with Ctrl + Shift + Z.
Copy, Duplicate & Paste Instances
Quickly duplicate UI elements with Ctrl + D, or copy and paste them as children of another instance with Ctrl + C / Ctrl + V.
Style, Genre & Category Filters
Filter templates by UI category (HUD, Menu, Shop, Social, Utility), game genre (Simulator, RPG, FPS, Tycoon, and more), and style (Cartoon or Classic) to quickly find the right starting point.
Import .rbxmx Files
Drag and drop an existing .rbxmx file into RoUI to import it as an editable instance tree. The parser validates the file format, enforces a 5 MB size limit, and shows a preview of the root class and instance count before importing.
Cloud Projects
Sign in to save projects to the cloud with automatic 2-second debounced auto-save. Manage projects from the sidebar — rename, duplicate, delete, or Save As to create copies.
Community Gallery
Share your UIs publicly and browse creations from other developers. Fork any gallery project with one click to use it as a starting point for your own designs.
Learning Tools
RoUI is designed to help you learn Roblox UI development, not just build it. Several features are built specifically for understanding how Roblox GUIs work under the hood.
Annotated Code Mode
Toggle the book icon in the Code tab toolbar to enable annotated code mode. Every property in the generated Luau code gets an inline comment explaining what it does — perfect for learning how Roblox GUI properties map to visual results.
Property Explainers
Hover over any property label in the Properties panel to see a rich description including what the property controls, practical tips for using it, common values, and links to related properties. Over 60 properties have detailed explanations.
Class Descriptions
Each instance class in the Properties panel has a “What is {ClassName}?” expandable section that explains what the class is used for and how it fits into the Roblox UI hierarchy.
Learn Tab
The Learn tab in the right panel provides a structured overview of your UI: a visual structure summary, a breakdown of every class used with descriptions, and the full instance hierarchy.
Explain This UI (AI explainer)
Click “Explain This UI” in the Learn tab to get an AI-generated explanation of your entire UI tree. The AI describes the purpose of each component, how they fit together, and what patterns the UI uses. Requires an API key.
Explain Changes
After the AI modifies your UI, click the “Explain changes” link to get a plain-English summary of what was changed and why. Helps you learn from the AI's modifications rather than just applying them blindly.
All learning features work without an account or API key, except for “Explain This UI” and “Explain Changes” which use your AI provider to generate explanations.
Accounts & Projects
You can use RoUI without an account, but signing in unlocks unlimited cloud-saved projects, cross-device sync, and sharing during the public beta.
Sign In
Create an account with email and password or sign in with Google. Your account is managed through Clerk and your credentials are never stored by RoUI directly.
Cloud Projects
Once signed in, any template you customize can be saved as a project. Projects are stored in the cloud and accessible from any device, with no project cap during the public beta.
Auto-Save
Changes are automatically saved 2 seconds after your last edit. A save indicator in the toolbar shows the current save status.
My Projects
The sidebar includes a “My Projects” section listing all your saved projects. Click any project to load it into the editor instantly.
Project Management
Rename projects by double-clicking the name in the toolbar or sidebar. Use the three-dot menu on project cards to rename, duplicate, or delete. Save As lets you create a copy with a new name.
Anonymous users keep the same localStorage-based experience as before — no account is ever required to use the editor, customize templates, or export files.
Sharing & Gallery
Gallery is a remix hub built on top of RoUI templates. Share your best remixes and discover what other creators are building.
Share Your Projects
Click the Share button in the editor toolbar to open the sharing popover. Toggle “Public” to make your project visible in the Gallery. Public sharing is available for projects that start from built-in RoUI templates. A shareable link is generated automatically that you can copy and send to anyone.
Community Gallery
Browse publicly shared UIs at /gallery. The page is split into Featured (official curated builds) and Community Remixes (template-based user projects). Each card shows a live preview, creator, description, and instance count.
Remix from Gallery
Found a UI you like? Click “Remix” on any gallery project to create your own copy. The forked project is saved to your account and opens in the editor, ready to customize. You need to be signed in to fork projects.
Sharing is opt-in. Projects are private by default and only appear in the Gallery when you explicitly toggle them to public and the project is template-based.
Public Beta Access
RoUI is free during the public beta. There is no paid plan or subscription required, and every signed-in creator gets the complete product.
What is included
- Unlimited cloud-saved projects
- Unlimited items in each project pack
- Unlimited reusable template drafts
- Unlimited exports for signed-in creators
- All 28 templates
- AI customization with your own provider key
- Import, Gallery sharing, and remixing
Using RoUI without an account
You can explore templates, customize UI, and export up to 3 times without an account. Anonymous projects stay in your browser. Sign in free for unlimited beta exports, cloud saves, cross-device access, sharing, and remixing.
Public beta access may evolve as RoUI grows. If paid plans return later, they will be announced clearly before any limits change.
Editor & Properties
RoUI provides two tailored editing modes: Basic Mode for rapid visual styling and instant exports, and Advanced Mode for deep instance tree inspection, Luau code editing, and script management.
Basic Mode vs. Advanced Mode
Basic Mode
Optimized for quick visual tweaks without navigating complex instance trees.
- Zero-cost 1-click Theme Palettes
- Smart Actions (auto-fit, contrast, rounding)
- Streamlined property sliders and pickers
- 1-click instant .rbxmx export
Advanced Mode
Full technical control for power users, scripters, and UI engineers.
- Full Roblox Instance Tree hierarchy
- Live Luau code with Monaco Editor
- LocalScript and ModuleScript tabs
- UI Health audits & preflight verification
Zero-Cost Theme Palettes & Smart Actions
Theme Palettes and Smart Actions run entirely in your browser on the client side at zero cost — no AI provider keys, API tokens, or credits needed. Instantly recolor any of the 28 templates with curated palettes, or apply Smart Actions to automatically polish border radiuses, touch targets, and contrast.
Properties Panel
Select any instance in the preview or instance tree to see its editable properties. The Properties panel supports inline editing for all Roblox property types. Properties with explainer icons show detailed descriptions, tips, and common values on hover.
Open the Health tab to audit fixed-size elements, touch targets, scaled text, layout containers, and responsive constraints. Safe findings include one-click fixes so you can convert sizing or add constraints, and restore keyboard/gamepad selection before testing in Studio's Device and Controller Emulators.
Use the “+ Add Property” button at the bottom of the Properties panel to add new properties that are valid for the selected instance class. The dropdown shows only properties not already set, with sensible defaults.
Auto-fit frame tools (beta)
Roblox UI sizing does not automatically adapt across phone, tablet, and desktop. The Auto-fit tools convert frame geometry into scale-first values so layouts are more resilient across device sizes.
Frame
Converts only the selected Frame by inferring `AnchorPoint` and rewriting `Position` and `Size` to scale-first values.
Subtree
Runs the same conversion on the selected Frame and descendant Frames in one action, with skip-reason summaries for confidence.
Safety rules intentionally skip risky cases (such as layout-managed, rotated, or AutomaticSize frames) to avoid visual drift.
Instance Tree
The Tree tab shows the full hierarchy of your UI component. Each node shows the instance icon, name, and class. You can add children or delete instances with inline buttons, and access more actions via right-click context menu: edit properties, rename, duplicate, move up/down, and delete.
Navigate the tree with arrow keys: Up/Down to move between visible nodes, Left to collapse or move to parent, Right to expand or move to first child. Press F2 to rename the selected node, or Enter to toggle expand/collapse.
Resizable Panels
Drag the panel dividers to resize the left sidebar and right panel. The layout adjusts to your preference.
Export & Import
RoUI offers multiple ways to get your UI into Roblox Studio. Signed-in creators have unlimited exports during the public beta. Anonymous users can export up to 3 times before a free sign-in is required. See Public Beta Access for details.
.rbxmx File Export (1-Click Studio Drag & Drop)
Downloads a native .rbxmx (Roblox Model XML) file preserving the full instance hierarchy, properties, and scripts.
Download the .rbxmx file from the export menu.
Drag and drop the file directly into Roblox Studio's Explorer window (into StarterGui or Workspace) — no plugin or HTTP setup required!
React Lua & Fusion 0.3
Copy a readable framework component from the Export menu. Both formats preserve the Roblox instance hierarchy and reuse extracted style tokens. Update the generated package path to match your project before mounting the component. You can also copy a matching UI Labs story for isolated viewport testing in Studio.
Opt-in Roblox Styled Mode
Generate a native StyleSheet installer with semantic tokens, stable tag selectors, recoverable property fallbacks, and viewport-rule support. Standard .rbxmx and Luau exports remain portable. Run the copied module's install(screenGui) function after the UI exists; it verifies the hierarchy before any direct properties are handed over to Roblox UI Styling. Before copying, you can rename token bindings or merge and split roles per property.
Copy Luau Code
Copies the generated Luau script to your clipboard. Paste it into a LocalScript or Script in Studio to create the UI programmatically at runtime.
Studio Bridge Plugin
Install the RoUI Studio Bridge plugin to import public share links directly into StarterGui with safety preflight and script trust confirmation. For manual install, keep the filename ending in .plugin.lua. See the Plugin page for installation instructions.
Import .rbxmx Files
Import existing Roblox UI files by clicking the Import button in the editor toolbar. Drag and drop a .rbxmx file or click to browse. RoUI validates the file format and size (max 5 MB), shows a preview of the root instance class and child count, then loads it into the editor for customization.
Verify & Preflight Audits
RoUI Verify is a deterministic preflight workspace that audits your Roblox UI across devices, screen orientations, safe-area insets, and input methods before you bring it into Roblox Studio. It runs entirely in your browser with zero AI key requirements.
Deterministic Rules
Catches missing constraints, unconstrained TextScaledlabels, undersized touch targets (<44px), and gamepad selection barriers automatically.
Device & Input Matrix
Simulates Phone (iPhone 14/15/16 Pro), Tablet (iPad 11"), Desktop (1080p), and Console/TV viewports with Touch, Mouse/Keyboard, and Gamepad input profiles.
1-Click Safe Fixes
Preview exact property diffs before applying non-destructive fixes directly to your UI hierarchy.
Standalone Audit Reports
Export full HTML verification reports and revision receipts to review or share with your team.
- 1
Open Verify or hand off from Build
Access /verify directly, or click Run preflight from the Health tab / Export dialog in the editor.
- 2
Select a source
Audit any built-in template, a saved cloud project, or drag-and-drop an existing
.rbxmxfile. - 3
Run preflight & switch viewports
Click Run preflight to evaluate the layout. Switch between phone, tablet, and console viewports to observe how UI elements scale and respond to safe insets.
- 4
Review findings & apply fixes
Select any finding to see its exact path and inspectable evidence. Click Preview fix to see before/after property diffs, then click Apply fix to resolve the issue instantly.
- 5
Download report & export to Studio
Download an HTML receipt or copy your verified UI directly into Roblox Studio via the Studio Bridge plugin.
RoUI Verify findings are 100% deterministic and reproducible. While browser preflight estimates catch common sizing and input failures early, Roblox Studio Device Simulation remains the ultimate source of runtime truth.
Keyboard Shortcuts
RoUI supports keyboard shortcuts to speed up your workflow. On macOS, use Cmd instead of Ctrl. Arrow key shortcuts are active when the Tree tab is selected.
| Shortcut | Action |
|---|---|
Ctrl+Z | Undo last change |
Ctrl+Shift+Z | Redo last undone change |
Ctrl+S | Save project / Save As |
Ctrl+Shift+S | Copy Luau code to clipboard |
Ctrl+, | Open settings |
Cmd/Ctrl+K | Open docs search |
Ctrl+D | Duplicate selected instance |
Ctrl+C | Copy selected instance |
Ctrl+V | Paste as child of selected instance |
Delete | Delete selected instance |
Escape | Clear selection |
F2 | Rename selected instance (Tree tab) |
↑ | Select previous visible tree node |
↓ | Select next visible tree node |
← | Collapse node or move to parent |
→ | Expand node or move to first child |
Enter | Toggle expand/collapse (Tree tab) |
Changelog
Release notes for RoUI. Newest releases are shown first and can be expanded on demand.
- Added RoUI Verify as a dedicated workspace for deterministic browser preflight checks without an AI key.
- Added template, saved-project, and .rbxmx verification sources with phone, tablet, desktop, and console contexts.
- Added versioned findings with stable fingerprints, inspectable evidence, local dismissals, and reviewable safe fixes.
- Connected the editor Health panel and Export dialog directly to Verify with revision receipts and downloadable HTML reports.