Plugin to toggle built-in UI Editor on the fly

EDIT Jan 2019: Roblox has updated the UI editor such that this plugin is mostly not needed anymore to improve usability.

Tired of the UI Editor getting in the way of your work, and the fact that Roblox has not implemented a toggle for it in a timely manner?

Introducing the UI Editor Toggle Plugin:


Features:

  • Clicking the image button now has a new meaning: instead of hiding/showing UI, it toggles the Roblox UI Editor instead!

  • While the editor is disabled, do what you have always done in Studio:

    • You can select items in workspace that are behind UI elements once again (UI elements do not steal/sink input when the editor is disabled).
    • You can use the standard move/drag/scale tools through UI elements, no input or selection is stolen.
    • You can still see and edit your UI elements through Explorer while the editor is off, and it will update properly, as well as highlight any currently selected UI elements.
  • The plugin remembers you preference for the UI Editor being on/off and persists your preference throughout Studio updates. No more need to delete the UI Editor’s files in the installation folder of Studio to get it to go away, you just press the button and it’s gone forever.

  • If you do need to hide UI entirely (since that functionality is overridden by this plugin), you can set up a shortcut for this through the plugin:

    • Go to File > Advanced > Customize Shortcuts...
    • Look for the following entries:
      image
    • Set “Toggle UI Visibility” to whatever is convenient for you! I bound it to space bar on my setup, so I can press space to easily hide/show the UI.

Minor caveats:

This plugin has almost no side-effects, just the following two things:

  • Keep in mind that StarterGui.ShowDevelopmentGui now determines whether the Roblox UI Editor is active, not whether UI is shown, while the plugin is installed. If ShowDevelopmentGui = false, you can use Studio as if the UI Editor does not exist. You will need to set up a keybind if you want to show/hide all UI as described above.
  • Minor inconvenience: StarterGui element names are grayed out when the UI Editor is toggled off, because this plugin needs to do some things with StarterGui.ShowDevelopmentGui in order to work properly.

Shown in action:

With the UI Editor on, I cannot select the parts in the gif behind the UI element. By toggling the UI Editor off with this plugin, I can now work normally again and still have the UI elements shown. (Also useful for transparent UI elements that you are not always aware of!)

EDIT: sorry about the green bits at the end of the .gif, I just show that the editor works again if I re-toggle it there.


Feedback welcome!

Please let me know if you have any suggestions or if something strange happens while using this plugin.

Happy developing and I hope this helps you as much as it has helped me!

79 Likes

Very nice work, I hope your plugin gets immortalized into Roblox Studio since this should be how Studio works by default. 10/10

7 Likes

Sad that this had to be done, but thank you for doing it!

18 Likes

Indeed, I really hope they add another little button next to the “UI <eye>” one at some point, or a proper plugin toolbar with an enabled/disabled switch, or some kind of hotkey to toggle it. Any of those can work for me, they just need to give us something

5 Likes

No pls. I brought this up during my internship – if we keep adding buttons to that bar, it takes up space from where script tabs can be displayed. On smaller laptop screens, currently they can fit 4 – adding more to the tab squishes that to 3, and continual additions will make it unusable.

13 Likes

Thanks for adding this feature into Studio!! So happy to have this :heart:

6 Likes

Amazing work! Glad someone found a solution to this that doesnt involve deleting or editing the built in plugin.

Though, I’m still in awe that it has been months and Roblox has not officially addressed this themselves. Your solution is great, but man the hoops this plugin has to jump through to disable the editor are ridiculous. This problem really shouldn’t exist.

Anyways, thanks a lot for this!

1 Like

I’m curious, how does the plugin disable the UI editor?

1 Like

I assume it disables ShowDevelopmentGui on StarterGui.
It makes a clone of the gui inside of CoreGui

Screenshot_28

Screenshot_27

1 Like

Yeah, it makes a copy of each element in StarterGui and tracks changes to it. It also transforms certain objects (TextBox, TextButton, ImageButton, etc) to TextLabels/ImageLabels so that it doesn’t highlight / steal input when you hover over them, since items in CoreGui can normally be interacted with through mouse events. Other than that, it also manually needs to put selection boxes into these elements when you select them in StarterGui.

Probably some more hoops that I’ve forgotten about. I still consider it to be a fairly clean solution all things considered.

It’s convenient that the “UI” button actually is just a toggle for ShowDevelopmentGui. That’s why you are able to “turn off” the UI editor with that button with this plugin, I don’t actually override the functionality of that button or anything.

1 Like

Very smart.

3 Likes

Looks awesome

2 Likes

what do you use to view coregui?

3 Likes

This has been updated: @Maelstronomer noticed that the UI was showing twice when running in Accurate Play Solo mode.

This has now been adjusted, just update the plugin and you’ll have the fix.

2 Likes

Thanks. This also fixed it in the separated server/player window test mode too.

2 Likes

Just as a heads up, the UI Editor was updated in such a way that it now has some weird behaviour that I cannot prevent with a plugin without causing side effects on selection which I don’t want to do. As long as you are not manually selecting UI elements in the explorer though, you should not run into any issues.

See here:
https://devforum.roblox.com/t/improvements-to-ui-editor/192383/19

You should change how this works, I made a plugin myself to toggle the UI Editor, because I didn’t like this one, what it does is that in CoreGui there is a folder for the UI Editor, to deactivate the UI Editor you set the Parent of the folder to nil, and to activate it you put it back in CoreGui, it’s a much more efficient method.

EDIT: I’m not sure if when you created the plugin you could see that folder.

Yeah, this is exactly what doesn’t work, because it doesn’t cancel all of the side effects of the editor. It will still steal selection once you have a UI object selected and click on the space where another UI element is. Moreover, this makes it harder for people to use because they can’t use the eye icon in the top right of the viewport to toggle it.

You can and should absolutely make your own version if you don’t like this one, but I want this one to reflect what most people will find convenient.