[Alpha] Next Gen Studio Update: Custom Tabs

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.

image2

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

  1. Create a new entry in the “Controls” array

  2. Give it an “Id” that is unique within that file

  3. Give it a “Type” field. IconButton is the most common so we’ll use it for this example

  4. Copy and paste in the Uri block

    • For an “IconButton” control, rename “Uri” to “Action”

    • Other controls have different options! More details below.

  5. You can view your changes without reloading Studio by using “Reload Tabs” in the context menu

image1

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.

297 Likes

This topic was automatically opened after 11 minutes.

This is awesome, thanks to the team

27 Likes

Thats Very Cool! i love it!!!

17 Likes

Cool. I’d totally use once the UI is improved.

18 Likes

Good update!! This will help me alot with organizing my buttons and to help me add my own buttons for building/scripting.

9 Likes

This day is a crazy day so many feature are dropping! Ty for ur work ur making the engine and roblox better!

9 Likes

I really love the idea of custom tabs, but I think implementation of this could be better and more user friendly.

There should be a way to create a tab from inside studio and drag or add buttons or menus rather than having to edit a JSON Config file. (They’re already making one, I just can’t read)

This is still super cool, but I think this could take this one step forward in regards to being user friendly by making this an in-studio process.

9 Likes

I already made some custom tabs will it be possible in the future to open and close widgets when navigating to tabs

7 Likes

When the ribbon bar is fully shipped, can we have plugin APIs to have the full range of controls in the ribbon bar, rather than just a button.

14 Likes

May we please see an option that lets us change whether the category buttons are on the left rather than the middle?

7 Likes

There comes a interface next year

6 Likes

Could we have a simpler way to make this? Like a UI in studio where you can drag and drop menu buttons and plugins, that would be much better.

EDIT: Just saw this.

Opinion about it down here :point_down:
Next-gen UI is pretty nice, custom tabs are even better for improving workflow - which is much better then the old studio UI because you couldn’t make custom tabs on the ribbon (afaik)

10 Likes

Great to finally have an explanation of how it works! Cant wait for the UI, since this can get a little complicated to make by text.

Will we be able to use Checkboxes, Spinboxes and SplitButtons in plugins at some point? Right now there doesnt seem to be any point to adding them to a tab.

6 Likes

Yeah I think that’s a reasonable expectation. We will need to expose the new “settings” system. If you take a peek at the Home tab, you can get an idea of how we’re doing it for the things like the snapping controls with checkbox and spinbox…

{
    "Type": "Column",
    "Children": [
        {
            "Id": "MoveGridSize",
            "Type": "Spinbox",
            "Setting": {
                "PluginId": "BuilderTools",
                "DataModel": "Standalone",
                "ItemId": "MoveGridSize",
                "Category": "Settings"
            }
        },
        {
            "Id": "RotateGridSize",
            "Type": "Spinbox",
            "Setting": {
                "PluginId": "BuilderTools",
                "DataModel": "Standalone",
                "ItemId": "RotateGridSize",
                "Category": "Settings"
            }
        }
    ],
    "Tags": "X-ColumnSpace100"
}
10 Likes

Yes we fully plan to make a visual editing workflow for this.

3 Likes

And… Vinegar? Anyways great work!!

2 Likes

This is really cool and I’m super excited for this to be official! Will we see an option for running custom Lua though? I’d love to be able to run custom workflows with a button click without making a plugin.

2 Likes

Yeah… not being a programmer… it looks scary trying to figit with a JSon file.
I was excited for a moment… but then set it back to the old UI :frowning:
Think I will be waiting till next year like most… unless others comment converting with ease.
We’ll see :slight_smile:

4 Likes

Awesome, now everyone can make his own little Roblox Studio with this great customization.

1 Like