Hello Creators,
Our team has been hard at work since we launched the Next Gen Preview in July. There’s been numerous under-the-hood updates and fixes, many of which have been prioritized thanks to all of your feedback!
Today, we’re excited to roll out the alpha version of a new custom tabs system in Next Gen Studio. Below, we’ll walk through how to build custom tabs and provide other useful types.
How To Build Custom Tabs
First and foremost: make sure you have the “Next Gen Studio Preview” Beta feature enabled. This is a very barebones, JSON file-based workflow. We wanted to let you customize sooner so we can get your feedback.
Next year, we will be releasing an interface that will make it possible to visually customize your toolbars without ever editing text files.
1. Locate your Custom Tabs Directory
The custom tabs folder is in a location that won’t get affected by Studio updates.
Windows
%LOCALAPPDATA%\Roblox\<userID>\CustomRibbonTabs
MacOS
~/Documents/Roblox/<userID>/CustomRibbonTabs
2. Create a Custom Tab
In the CustomRibbonTabs directory, each JSON file represents a tab. The file can be named whatever you like. The “Name” must be unique from the other tabs being loaded. In the case of duplicate named tabs, we can’t guarantee which one will be loaded.
The Controls section is where you can specify buttons, separators, and even some simple layout options. We’ve made some example starter files that may be good starting points.
Blank Tab Example:
{
"Name": "Blank Tab",
"Controls": [ ]
}
3. Adding Controls
Let’s try adding some stuff to our blank tab!
This example combines a simple tool along with a 3rd party plugin:
{
"Name": "My Stuff",
"Controls": [
{
"Id": "UIVisibility",
"Type": "IconButton",
"Action": {
"PluginId": "UIVisibility",
"DataModel": "Standalone",
"Category": "Actions",
"ItemId": "Toggle"
}
},
{
"Id": "Autoscale",
"Type": "IconButton",
"Action": {
"PluginId": "1496745047",
"DataModel": "Edit",
"Category": "Actions",
"PluginType": "Cloud",
"ItemId": "AutoScale Lite_Scale Text"
}
}
]
}
To add controls to your tab, you will need to know the “Action” values for that control. We provide a simple “Print Actions” in the ribbon right-click context menu. This will dump all actions in the Output window.
Pro-tip: clear your Output window first and then copy/paste the actions into a file so it’s easier to navigate. If you use a code editor like VS Code, a quick “Format Document” will help even more.
When you find an Action you want to add to your tab
-
Create a new entry in the “Controls” array
-
Give it an “Id” that is unique within that file
-
Give it a “Type” field.
IconButtonis the most common so we’ll use it for this example -
Copy and paste in the Uri block
-
For an “IconButton” control, rename “Uri” to “Action”
-
Other controls have different options! More details below.
-
-
You can view your changes without reloading Studio by using “Reload Tabs” in the context menu
Other Control Types
Here’s a quick guide for the currently available controls.
| Type | Description |
|---|---|
| AvatarThumbnail | A circular avatar icon. This is what’s used in the collaborator UI |
| Button | A button displaying text only |
| Checkbox | A checkbox with text label |
| IconButton | A button with an optional text label |
| Option | Only valid in controls that are “Children” - used to represent entries in a dropdown menu |
| RibbonToggle | A toggle interface with text label |
| SegmentedButton | Button with multiple segments, only one is selectable at a time |
| Separator | Non-interactable line to separate controls |
| Spinbox | Numerical entry field with arrows to increase/decrease a value. |
| SplitButton | Button with a dropdown menu when small triangle is pressed |
| Text | A text label |
| Column | Layout control for arranging its “Children” controls |
| Row | Layout control for arranging its “Children” controls |
The Luau type definitions may also be helpful for understanding the valid options for each control: ControlTypes.luau (3.9 KB)
Advanced: Custom SplitButtons
SplitButtons are buttons that have a drop down menu of various children controls. Please note that the behavior of changing the top level button to match the drop down selection isn’t currently possible.
Here’s a simple example:
{
"Name": "Test Tab",
"Controls": [
{
"Id": "SimpleSplit",
"Type": "SplitButton",
"Action": {
"PluginId": "BuilderTools",
"DataModel": "Standalone",
"ItemId": "Scale",
"Category": "Actions"
},
"Children": [
{
"Id": "Rotate",
"Type": "Option",
"Action": {
"PluginId": "BuilderTools",
"DataModel": "Standalone",
"ItemId": "Rotate",
"Category": "Actions"
}
},
{
"Id": "Move",
"Type": "Option",
"Action": {
"PluginId": "BuilderTools",
"DataModel": "Standalone",
"ItemId": "Move",
"Category": "Actions"
}
}
]
}
]
}
Default / System Tabs
For more complex examples, the default tabs are helpful to look at and they are located in the following directory. Please note that these files are completely replaced with new Studio updates.
Windows
%LOCALAPPDATA%\Roblox\Versions- Open the newest directory in there
- Locate the RibbonConfig directory
MacOS
- In Applications, right click on RobloxStudio.app and select “Show Package Contents”
- Open Contents/Resources and locate the RibbonConfig folder
We plan to offer some customization and control over these tabs too. But keep in mind if you edit the files, they will get updated with any Studio releases (just like the old ribbon XML).
Known (and Unknown!) Issues
- Icons may not be available for all control sizes
- If your button is missing an icon, but otherwise works, that’s probably why!
- This is a system for customizing toolbars. It’s not meant to replace good ole’ Studio plugins.
- There’s a known issue with loading local plugins in custom tabs. We’ll fix it but it’s not a priority.
- This is an extremely new system with very limited testing. Customize with caution!
What’s Next for Next Gen Studio?
We are in the very early stages of designing and building the actual customization workflow and UI. Our goal is to let you build and manage your tabs completely visually.
There is good progress happening on the new play testing controls. We are combining the various ways of play testing your experiences into a single, persistent UI. The biggest challenge is making this intuitive, eliminating outdated workflows, and ensuring easy access to playing, testing, and debugging your experiences.
Besides those, we have a whole mountain of functional and visual improvements we want to make before the Beta feature switches over from its current opt-in state to an opt-out Beta feature. We hope to hit that early next year and then we’ll get our sights on the remaining priorities needed to make this the new default UI before the second half of 2025.
