When you work with Declarative UI Libraries like Roact Fusion
Allows you to preview your UI code instantly without running your game.
Features a Hot-Reloader that updates your changes in real-time.
Provides a Sandboxed environment for your code to run in, you dont have to worry about reverting all your changes.
Native support for Fusion, Roact, React, Vide and Iris
Support for Generic Stories allowing you to adapt the stories to your own Library or Framework
Find the documentation
Find the plugin free in Roblox Marketplace
Find the Utilities Package : This is not required
Find the Plugin open sourced (written in roblox-ts)
94 Likes
Finally we have a devforum post for this lol.
Anyways, it is an AMAZING plugin and I’d recommend this plugin over hoarcekat and flipbook.
3 Likes
2jammers
August 9, 2024, 2:02pm
#3
way better than other options, my team has been using it for weeks with no issues (and it looks great)
2 Likes
uvic1rn
August 12, 2024, 9:13pm
#4
The docs are empty. How do I use this?
3 Likes
The docs are not empty, the api reference is. it’s work in progress
This plugin is useful for programmers using react/fusion. It might be also very useful for executing some arbitrary code in edit mode. (like InCommand)
What would be your usecase?
3 Likes
Hey, I don’t use Fusion nor Roact, I have my own Custom UI framework so would I be able to use this?
1 Like
tyridge77
August 14, 2024, 2:51am
#7
Hoarcekat lags out studio so as long as this doesn’t do that it’s already better
1 Like
Sure, you can use Hoarcekat Stories as they are supported here.
And if you want to have controls too, you probably wanna take a look at Generic Stories
2 Likes
I havent got that problem, but I also dont use hoarcekat a lot so I wouldnt know.
But this one shouldnt, if you have any problems let me know
2 Likes
tyridge77
August 14, 2024, 5:21am
#10
everyone has that problem, it just might not be noticeable depending on what you’re doing. But hoarcekat slows down studio even when it’s not opened
Issue is it connects to DescendantAdded for most big services
And then calls this function for it and all its descendants
local function isStoryScript(instance)
return instance:IsA("ModuleScript") and instance.Name:match("%.story$")
end
Even when the plugin is closed
2 Likes
I see, The only passive proccess UI Labs has is scanning for stories which shouldnt be problematic. and this only happens if it’s open.
I think hoarcekat doesnt stop when you close the window, UI Labs has a stop button that stops the entire plugin
1 Like
This update introduces a lot of QOL features and tools
Vide Stories
Iris Stories
Fullscreen Mode
Invert Background button
Shortcuts
Plugin settings saving
Controls are kept between reloads (optional)
Control ordering
Measure Tool
Select Elements Tool
Outlines Highlighter
Mouse Rules
New UI Labs redesign
Primitive theme switcher (placeholder)
Dark theme + Catppuccin themes
Regenerate storybooks button
Reload all stories button
Stories now uses the latest View On Viewport state
Clear output on reload option
Reset all controls button
Fusion scoped key added, for passing it with Fusion.scoped() along with the Fusion lib
Story now unmounts before re-mounting
Story panel clears children when story is reloaded
Fixed slider control always starting at 0.5
Summary now uses TextWrapped
Fixed number control flickering
Better types for the UI Labs package for LUAU
Choose/EnumList controls dropdown now has a max height, and will use a scrolling frame
On Widget/On Viewport overlay now respects the pinned button
Choose/EnumList controls now cannot have repeated values, (values that are strict equal ==)
Find the documentation
Find the plugin free in Roblox Marketplace
Find the Utilities Package:
Find the Plugin open sourced (written in roblox-ts)
2 Likes
xChris_vC
September 29, 2024, 7:37am
#13
wow this looks really good!! high-effort while still open-sourced, thank you!
I’ve been using Hoarcekat, but that required me to write different stories for literally every component (& some additional hurdles for Iris)
Adopting this immediately, can’t wait to try it out!
2 Likes
Thank you!. fwiw, hoarcekat stories are still supported here, so migration can be easier
1 Like
Thanks for making this plugin. It’s been a huge help. I’m curious though, how do I go about actually playtesting the UI made in UILabs?
UI Labs just like any other storybook-like plugin is only used for testing your components.
So you shouldnt create your components inside stories, stories are only used to require those components and render them.
As a rule, you should never require story files anywhere in your code and stories shouldnt also require eachother, these should only be required by UI Labs.
Example:
Correct
-- story
local component = require(...) -- requires is the component
return function()
component()
end
Wrong
-- story
function component() -- creates the component
...
end
return function()
component()
end
1 Like
This update introduces some QOL improvements, studio mode, and require by string cxmeel
Studio Mode. Reloads stories only when the window is focused, this prevents ui labs to reload multiple times if you script inside Roblox Studio
Removed UI Labs stacktraces in error warnings (let me know if it’s removing important information)
Protection for yielding
Even better error warnings
Middle click to close a story preview
Toolbar shrinks when the controls panel covers it
Controls panel cannot resize larger than the canvas
More toolbar shortcuts with modifier keys (CTRL, SHIFT)
Primitive support for string requires
Defered Hot-reloading (This should improve ui labs freezing when you change multiple files with rojo)
Added scoped key for fusion stories to pass to Fusion.scoped(Fusion, ...scoped)
UI Labs theme is saved
target is also exposed in the props for react/roact
Now you can return the story instance in fusion, and it will automatically parent it to the target, this matches vide
Vide springs connection is now disconnected on unmount
Find the plugin free in Roblox Marketplace
Find the Utilities Package:
Wally: pepeeltoro41/ui-labs
NPM: @rbxts/ui-labs
pesde: pepeeltoro41/ui_labs
Model: Github Releases
Find the Plugin open sourced (written with roblox-ts)
2 Likes
athar_adv
January 28, 2025, 8:49am
#19
Very nice and sleek, love that it isn’t laggy like hoarcekat
1 Like
