Introduction of Lua Widgets

Updates Announcements
#1

Hey developers,

We are happy to introduce the newest feature to your development resources: Lua Widgets for Plugins. Previously, if a plugin had any UI elements, those had to be rendered in the 3d viewport. Now, using Lua Widgets developers can optimize their Studio experience with dockable Lua widgets, separate from the Studio viewport.

Here is a GIF which showcases the new functionality by using terrain tools as an example. Terrain tools are now accessible from the home and view tab.

Shared Lua Libraries for Consistent Studio Look & Feel

To help you use the PluginGui for your Lua widgets, we have created some code to create various GUI elements: buttons, checkboxes, radio buttons, etc. This code also includes common colors, sizes, spacing, etc. These widgets were used to make the new Terrain Tools, which are now hosted in a PluginGui.

The code is available on github:

Please keep the following in mind when using the new Lua Widgets:

  • Lua Widgets cannot be created by Hotswap and similar plugin virtualization at the moment (https://www.roblox.com/library/184216383/HotSwap-v1-1)
  • Lua Widgets have separate instances for “Edit” and “Play” mode
    From Studio code Point Of View, there’s two completely different DataModels: one when you’re editing, and then a copy of that when you’re running.
    Since Plugins (and therefore PluginGui and all contained GUI buttons, text labels, etc) all live in data model, it made sense to just keep that clean division.
    There are two completely separate Dock widgets associated with any plugin that creates a PluginGui.
    The “Edit” Dock widget exists/is available when editing, and the “Play” dock widget exists/is available when playing. The two widgets are unrelated: you may have toggled the “Edit” one to be visible, but the “Play” one will still be not-visible: you may have dragged the Edit one to dock on right side of screen while Play one docks on bottom, etc.
  • Lua Widgets don’t support UserInputService. You will need to listen to button and textbox events.
  • For debugging purposes, you can enable “Show Plugin GUI Service in Explorer” in Studio settings to modify the GUI in the explorer instead of just through scripts.

Check our documentation on the Developer Portal for more information:

Thanks,
The Roblox Team

123 Likes
UI Improvements [Slider, Checkbox, Radio buttons]
New Animation Editor Announcement
May Recap: Here's What You Might Have Missed in the Developer Community
#2

Does this mean we can make a plugin that makes the studio dark theme?

53 Likes
#3

T H A N K Y O U!

Glad to see this added. :slight_smile:

2 Likes
#5

Yeesssssesssesessssssssss I’ve been waiting so long.

1 Like
#6

please oh please, I have been a dark theme advocate for years

11 Likes
#7

That’s really useful people can use this to make plugins a lot better.

2 Likes
#8

It’s time to begin.

> opens studio
> starts scripting widgets

3 Likes
#9

Love the addition of the StudioWidgets repo!

7 Likes
#10

Oh here we go guys… I’m hyped!

2 Likes
#11

Starting using the feature just before this announcement (thanks @Maximum_ADHD for his quick edit plugin for popping up automatically).

Nonetheless, this is awesome!

1 Like
#12

Beyond thrilled for this! ^-^

1 Like
#13

Seems good, although I haven’t had time to read the full rundown yet nor look at GitHub. More than anything, I hope that @chesse20 is right and this leads to a studio dark theme, even if it’s a plugin and not an official feature.

2 Likes
#14

Time to make a widget to help make GUIs and scripts for them.

1 Like
#15

Are you going to make your datastore plugin a widget?

It’d be pretty useful because I’m constantly closing and re-opening it because the UI blocks the workspace.

3 Likes
#16

The ultimate practice for scaling UI.
Great feature addition! Studio is about to look a whole lot more professional.

3 Likes
#17

Really excited to cram all of my utilities into one little widget.
Also this example has a typo.

image
image1149Ă—479 21.2 KB

3 Likes
#18

Fixed!

4 Likes
#19

Yeah I’ll remake my datastore editor

14 Likes
#20

I have updated the DockWidgetPluginGuiInfo page to be a little more clear on what each field of the type does.
https://wiki.roblox.com/index.php?title=DockWidgetPluginGuiInfo

6 Likes
#21

I wanna use this so bad

1 Like