Everything you need to know about using RoUI to create and learn about Roblox UI components with AI.
RoUI is a browser-based tool that helps you create Roblox UI components. You can start building immediately — no account, installation, or payment required. Everything works for free. Sign in to save projects to the cloud (up to 5 on the free tier), share with the community, and sync across devices.
Open the editor
Click Launch App or navigate to the editor from the navigation bar.
Choose a template
Browse the template panel on the left. Filter by category or game genre, or search by name. Click any template to load it into the preview and code editor.
Customize
Edit properties directly in the Properties panel, use the AI chat to describe changes in plain English, or modify the instance tree to add and reorganize elements.
Learn
Switch to the Learn tab to understand your UI structure. Enable annotated code mode to see inline explanations in the generated Luau. Hover over property labels for rich descriptions and tips.
Export
When you are happy with your UI, export it as a .rbxmx file or copy the Luau code to paste into Roblox Studio.
RoUI works entirely in your browser. API keys and template customizations are stored locally. When signed in, projects are also saved to the cloud for cross-device access — but an account is never required.
RoUI uses a Bring Your Own Key (BYOK) model. To use AI customization features, you need to provide your own API key from one of the supported providers. This means no subscriptions and you only pay for what you use.
Open Settings
Click the gear icon in the editor toolbar, or press Ctrl + ,
Select your provider
Choose between OpenAI or Anthropic using the toggle buttons.
Paste your API key
Enter your API key in the input field. Keys are stored in your browser's local storage and never leave your machine.
Start chatting
Close settings and use the AI chat panel to describe UI changes.
Your API key is stored only in your browser's localStorage. It is sent directly to the AI provider's API — RoUI never stores or logs your key on any server.
RoUI comes with 14 professionally designed templates covering the most common Roblox UI patterns. Each template is a complete, production-ready component tree. Templates can be filtered by category (HUD, Menu, Shop, Social, Utility) and game genre (General, Classic, Simulator, Anime, FPS, RPG, Tycoon, Obby).
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
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.
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.
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.
AI responses stream in real-time so you can see the preview update as the response generates, rather than waiting for the full result.
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.
Use the clear button in the chat header to reset the conversation history and start fresh with a new context.
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.
RoUI includes a number of features designed to make UI building faster and more intuitive.
Star your favorite templates to pin them to the top of the sidebar. Favorites are saved in your browser and persist across sessions.
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.
Quickly duplicate UI elements with Ctrl + D, or copy and paste them as children of another instance with Ctrl + C / Ctrl + V.
Filter templates by UI category (HUD, Menu, Shop, Social, Utility) and by game genre (Simulator, RPG, FPS, Tycoon, and more) to quickly find the right starting point.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
You can use RoUI without an account, but signing in unlocks cloud-saved projects, cross-device sync, and sharing. Free accounts can save up to 5 projects — upgrade to Pro for unlimited.
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.
Once signed in, any template you customize can be saved as a project. Projects are stored in the cloud and accessible from any device. Free accounts are limited to 5 saved projects — the toolbar shows a usage indicator so you always know where you stand.
Changes are automatically saved 2 seconds after your last edit. A save indicator in the toolbar shows the current save status.
The sidebar includes a “My Projects” section listing all your saved projects. Click any project to load it into the editor instantly.
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.
Share your creations with the RoUI community and discover UIs built by other developers.
Click the Share button in the editor toolbar to open the sharing popover. Toggle “Public” to make your project visible in the Gallery. A shareable link is generated automatically that you can copy and send to anyone.
Browse publicly shared UIs at /gallery. Each card shows a live preview of the UI along with the creator name, description, and instance count. Pro users display a Pro badge next to their name on gallery cards. Use the search bar to filter by name, description, or creator.
Found a UI you like? Click “Use This Template” 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.
RoUI is free to use — no account required. When you sign in, you get cloud projects and sharing with generous free-tier limits. If you need more, the Pro plan removes all limits.
| Feature | Free | Pro |
|---|---|---|
| Saved projects | 5 | Unlimited |
| Exports per day | 10 | Unlimited |
| All 14 templates | Yes | Yes |
| AI customization (BYOK) | Yes | Yes |
| Import .rbxmx files | Yes | Yes |
| Share to Gallery | Yes | Yes |
| Fork gallery projects | Yes | Yes |
| Pro badge | No | Yes |
Each .rbxmx file download and each Luau code copy counts as one export. The daily limit resets at midnight UTC. Anonymous users (not signed in) are never rate-limited — limits only apply to signed-in free-tier accounts.
Free-tier users see usage bars in the editor toolbar showing their current project count and daily export count. When you reach a limit, an upgrade prompt appears with a link to the Pricing page.
Pro is $4.99/month or $39.99/year (33% annual discount). Visit the Pricing page for full details and to upgrade.
You never need to pay to use RoUI. The free tier covers most workflows. Pro is for power users who save many projects or export frequently.
The editor has three main panels: the template/chat sidebar on the left, the visual preview in the center, and the code/properties/tree/learn panel on the right.
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.
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.
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.
Drag the panel dividers to resize the left sidebar and right panel. The layout adjusts to your preference.
RoUI offers multiple ways to get your UI into Roblox Studio. Signed-in free-tier users can export up to 10 times per day (each .rbxmx download or Luau copy counts as one). Pro users and anonymous users have no export limits. See Plans & Pricing for details.
Downloads a .rbxmx (Roblox Model XML) file that you can drag directly into Roblox Studio's Explorer panel. This preserves the full instance hierarchy with all properties.
Copies the generated Luau script to your clipboard. Paste it into a LocalScript or Script in Studio to create the UI programmatically at runtime.
Install the RoUI companion plugin in Roblox Studio for streamlined import. See the Plugin page for installation instructions.
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.
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 |
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) |