UI Previewer Plugin

Do you wish it was possible to preview any UI, regardless of what folder it’s in? :dna: :file_folder:
Are your StarterGui’s ScreenGuis getting in the way of development? :see_no_evil: :hammer:

Well do I have the plugin for you!

:sparkles: :tada: Introducing UI Previewer, a plugin that allows you to preview UI elements in a plugin widget :tada: :sparkles:

Description

Select an element to preview by clicking the Selection button, and selecting a valid GUIObject. You should see a clone of this element¹ and its children in the Plugin widget :women_with_bunny_ears:

All changes you make to your UI elements should be reflected in the preview window :tada:

loadingthingy

To clear the selection, press the :x: button next to the name of the top level element.
To make a new selection, click the Selection button again and select a new one, much like how you would set an adornee.

updateselection

Hot off the press :newspaper: :loudspeaker: Get your UI Previewer here :shopping:

:construction: Please report any bugs you find² in the thread, or in a DM! :bug: :ant: :spider: :construction:
:face_with_monocle: If you have any feature requests or other feedback, please share in the comments :cactus: :bulb:

Testimonials

“This plugin feels illegal to use, it’s that good :exploding_head: I love how it allows you to isolate components and preview ratios!” - @Wsly
“It’s pretty dope” - @aaron_mccoy
“Wait what is this quote for” and “An absolute UNIT of a plugin” - @Dev_Anthony
“holy macaroni it’s something I’m probably actually going to use” - @PeZsmistic

¹ If you select a LayerCollector, this element is not cloned. The plugin’s ScreenGui takes on some of the properties of it, and the plugin should handle any new children and also if the element is deleted.
² There are definitely bugs, and I really appreciate any bug reports! UI is complicated and peoples behaviors are all different. The plugin is forgiving though, so if anything ever gets out of sync, just re-select the current element and things should look better.

125 Likes

nice plugin, i will definitely install and try it out now! :smiley:

4 Likes

This should honestly be a part of Roblox Studio! It’s kind of annoying when I have to keep re-enabling it’s visibility to see how the UI looks. This will make things a lot easier.

6 Likes

Amazing plug-in
@Bitwise You are really becoming the best Roblox staff :slight_smile: Keep the great work up

2 Likes

Really sick for making changes to UI when the organizational scheme for UI management keeps StarterGui clear. This is a great plugin that opens the door for more ways of approaching the developer experience by eliminating barriers fundamental to the basic set-up of Studio. This is awesome!


Just tested, the resolution display is a really neat feature as well!

1 Like

What’s stopping u from just enabling the ui and seeing it?

In a literal sense, nothing, but here’s some reasons why that might not be optimal

  • If you keep all your UI in StarterGui, but keep some enabled and some disabled, you might forget to disable a UI that you enabled for testing/visualization purposes

  • If you don’t keep your UI in StarterGui, you have to physically move UI over to StarterGui to visualize/test - which is extremely tedious for making small visual tweaks (like adjusting size and trying to make sure the flow isn’t weird post-change). An example of this
    image

  • UI often overlaps. Ex:


    If you want to view/make edits to the obscured UI, something like this is very helpful (for the same reasons as points 1-2)
    Ex: obscured UI when using this plugin

That’s not to say this plugin is essential for all developers - it’s not necessarily. If you create all your UI via code, then this obviously has 0 practical usage. However, there are lots of reasons for a developer to want to use this.

11 Likes

This is beautiful and I appreciate this so much!

1 Like

I haven’t tried it yet, but from what I’ve seen so far I only have one thing to say to this: YES.

1 Like

Seemed like a good plugin, which it is now I’m using it, but I just wish you could zoom in and out because I can barely see the UI.

1 Like

Hello @BitwiseAndrea , nice plugin you got there, but speaking of folders, can you fix this annoying glitch of which you can’t move gui objects in a folder? (Not in plugin) if you do, thanks.

nice plugin, tho i wish the welcome text would become bigger if you resize the widget

also wish that it would auto-preview elements when you select them in studio, having it like this isn’t really intuitive:

Hello,

It’s time for me to start using this plugin for my UI

-TheDevDoge

1 Like

Sounds like something really useful (especially for making plugins at some times), would definitely download it when I have time.

1 Like

I can absolutely make the welcome text bigger on a bigger screen! thank you for the suggestion :slight_smile:

As for the second one - what do you mean auto-preview?

When you select another GUI, it will change preview to the other GUI selected.

2 Likes

I love it! I’ll absolutely be using this :slight_smile:

1 Like

Got it! Funny enough, thats how i had the original implementation :stuck_out_tongue: But I found it to be less useful to me when working on a large system. I could add a “lock” or “unlock” button that makes the preview update with any new GUI selected, does that support your use case?

2 Likes

Yeah that’s actually a great idea

Wait what something actually useful??

Thank you for this! It’s a huge pain to just disable, reenable, and reposition things.

2 Likes