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 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:
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!)
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
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.
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.
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.
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.
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.
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.
button now has a new meaning: instead of hiding/showing UI, it toggles the Roblox UI Editor instead!
button now has a new meaning: instead of hiding/showing UI, it toggles the Roblox UI Editor instead!
