UI Labs - Modern Storybook Plugin for Roblox

Resources Community Resources
, ,
#1

UI Labs is a storybook plugin for roblox.

When you work with Declarative UI Libraries like Roact or Fusion , creating User Interfaces with code becomes challenging when you try to preview them. UI Labs aims to solve this problem:

  • 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 and React
  • Support for Generic Stories allowing you to adapt the stories to your own Library or Framework

image
image1513×908 144 KB

Find the documentation

Find the plugin free in Roblox Marketplace

Find the Utilities Package: This is not required (wally package is planned)

Find the Plugin open sourced (written in roblox-ts)

34 Likes
# | best posts - free/paid | #
#2

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

way better than other options, my team has been using it for weeks with no issues (and it looks great)

#4

The docs are empty. How do I use this?

#5

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?

1 Like
#6

Hey, I don’t use Fusion nor Roact, I have my own Custom UI framework so would I be able to use this?

#7

Hoarcekat lags out studio so as long as this doesn’t do that it’s already better

#8

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

1 Like
#9

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

1 Like
#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

1 Like
#11

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