PcoWSkbVqDnWTu_dm2ix
We use cookies on this site to enhance your user experience

Building Studio Widgets

Building Studio Widgets

10 min

Roblox Studio gives you the power to create custom widgets and use them as Studio tools and extensions. These widgets behave as custom windows/panels in Studio and they can be docked inside your interface or floated as separate windows.

Creating a Widget GUI

All Studio widgets begin as DockWidgetPluginGui objects which can be filled with text labels, buttons, and more. To create an empty widget GUI, call the Plugin/CreateDockWidgetPluginGui|CreateDockWidgetPluginGui() function, passing in an ID and a DataType/DockWidgetPluginGuiInfo|DockWidgetPluginGuiInfo object. After it’s created, you can optionally assign a title to the widget by setting its PluginGui/Title|Title property.

For the DataType/DockWidgetPluginGuiInfo|DockWidgetPluginGuiInfo object, the acceptable properties are as follows, and Plugin/CreateDockWidgetPluginGui|CreateDockWidgetPluginGui() expects them in this specific order:

Property Type Description
InitialDockState enum One of the enum/InitialDockState|InitialDockState enumerations.
InitialEnabled boolean The initial enabled (visible) state of the widget GUI.
InitialEnabledShouldOverrideRestore boolean If true, the value of InitialEnabled will override the previously saved enabled state.
FloatingXSize integer The initial width of the GUI when InitialDockState is set to Enum.InitialDockState.Float.
FloatingYSize integer The initial height of the GUI when InitialDockState is set to Enum.InitialDockState.Float.
MinWidth integer The minimum width of the GUI, with some platform-specific variations.
MinHeight integer The minimum height of the GUI, with some platform-specific variations.

Customizing the GUI

Once created, a widget GUI can be customized with GUI objects like informative TextLabel|TextLabels, interactive ImageButton|ImageButtons, and more. For example, this code adds a basic TextButton to the GUI window:

User Input in Widgets

UI elements such as TextBox and TextButton work as normal in Studio widgets and you can build interfaces just like you normally would on Roblox. However, UserInputService and ContextActionService will not work since these services expect the main game window to be in focus.

One workaround for generic input events is to create a transparent Frame and overlay it over the entire screen. When the user clicks on the frame, keyboard input will be captured in the GuiObject/InputBegan event on the frame until the user clicks away. Below is a sample code snippet that creates such a frame:

Working With Studio Color Themes

Effective Studio widgets should ideally match the Studio theme setting and dynamically adjust if the theme is changed. For instance, if a developer is using “Dark” theme, the widget’s background color, images, and text labels should look nice alongside Studio’s native theme colors.

The following addition uses a syncGuiColors() function which is initially called along with a table of GUI objects to sync. Inside the function, a nested setColors() function loops through the objects and syncs specific aspects of them using StudioTheme/GetColor|GetColor() with enum/StudioStyleGuideColor|StudioStyleGuideColor enums. On line 36, this setColors() function is immediately run to sync the Studio theme, then it’s connected to the Studio/ThemeChanged|ThemeChanged event to detect future theme changes.