Roact Visualizer (Develop Roact components in real-time)

[pa00]

Roact Visualizer

A plugin for the visualization and real-time development of Roact trees.

• Install
• Source

---

Overview

(Optional) What is Roact?

Roact is a declarative UI library similar to React. It is an open source project that is also currently officially supported by and upkept by Roblox internal engineers. To learn more about Roact, I would recommend viewing its documentation.

Roact allows you to create reusable UI elements entirely through code - this plugin exists to turn that code into visible UI elements in real-time as you work!

Tired of entering Play Solo every time you want to test a slight change when working on a Roact component? Roact Visualizer is designed to cut down on development time by providing a live preview window for your Roact elements that can even update in real-time as you work.

This plugin is designed to work with any version of Roact that your project may be using. This includes old versions and even private forks, as long as they contain the basic functionality of creating and mounting components.

Pictured is a TextBox Roact component being previewed inside the Roact Visualizer plugin. This plugin supports both Light and Dark theme.

Getting Started

Installation

1. Visit the plugin’s details page and purchase it to install it. Alternatively, you can install the plugin directly from the Toolbox in Studio, or if you have Rojo, you can build the plugin from its source and create a local version for yourself.
2. After installing and opening the plugin, open Studio and navigate to the Plugins → Manage Plugins interface. From here, you can grant the “script injection” permissions to the plugin. Do not grant these permissions to plugins you do not trust. Make sure you have a legitimate copy of the plugin before doing this! A legitimate copy can only be obtained via purchasing the plugin or building it from source.
3. After granting the necessary permissions, close and reopen the plugin to begin using it.

Locating Roact

After opening the plugin, it will prompt you to locate your local Roact install. This should point to the top-level ModuleScript named “Roact” - the same one that your component’s scripts require in order to access the Roact API. In most cases, this will be as simple as clicking “Auto Detect”. Once you have notified Roact Visualizer about your Roact install’s location, you won’t have to do so again for that place unless you move it.

The Interface

The core workflow of the Roact Visualizer is simply selecting the ModuleScript associated with whatever Roact component in your project you wish to visualize, then clicking Update as you work to instantly see how your script changes translate to the outputted UI elements.

In this video, I am editing a component’s script. I click the plugin to start looking for a component to visualize, and it auto-detects that I have a script open. I can then select the currently opened script, and it immediately renders the component inside the plugin.

In this video, I make a change to the component, then click Update. The viewport updates immediately to reflect my change.

Below you can see an overview of the purpose of each button in the plugin’s window:

Show Image

Show Details

1. Update: Click to update the component in the view window to reflect the latest changes to the component itself, its props, and/or the tree. If Auto Update is enabled, this button will be replaced with an Auto indicator.
2. Tree: Left click to open the Tree script (more details below). Right click to access more options.
3. Props: Same as Tree, but for the Props script.
4. Align: Click to toggle between centering the view or using the component’s actual position.
5. Settings: Click to access Auto Update and additional settings.
6. New: Click to open a new component for previewing.
7. Open Script: Click to open the current component’s script in the script editor.
8. Current Component: Displays the name of the current component being previewed.
9. Close Component: Closes the display of the current component.
10. About: Access information about the plugin and acquire a link to this forum post.

Auto Update

Auto Update can be toggled in the plugin’s settings menu. It allows you to see the effects of your script changes in real-time as you modify them.

In this video, I enable Auto Update in the settings menu. Then, when I make a change to the component’s script, the viewport updates automatically without any other inputs from me. Convenient!

• When Auto Update is off, you will have to manually click the Update button to see the script changes. This can be very useful when making large, sweeping changes to a component.
• When Auto Update is on, the script changes will be shown immediately after you stop typing for a short delay.
• The Auto Update delay can be adjusted in the settings. A shorter delay is more responsive, but can be laggier in large projects and will lead to more syntax error warnings as the scripts try to reload even if you haven’t completed a line of code.

Props and Tree

The Props and Tree buttons in the plugin allow you to open and modify two special inputs to the view window, which make the plugin highly customizable and able to visualize practically any Roact component you desire.

In this video, I click the Props button to open the props script, then modify it to return a value for the prop at “Text”. My component receives a prop named “Text”, so the view updates to reflect this change.

In this video, I right-click the Tree button to open the extra options menu, then load the preset tree “Send to New Window”. After the view updates, the tree is now sending the component to a new PluginGui, which I can drag and resize on its own.

• The Tree script returns a Roact component, which ultimately is what is visualized within the plugin’s viewport. As part of this tree, the component you selected to visualize is returned as an element. The default Tree simply returns the element and does nothing more. However, you can use this script to create context providers, portals to other UI containers, state changes, and any other items necessary to the functioning of your previewed component.
• The Props script returns a table which will be sent to the Tree component’s props. The default Tree component simply passes these props on to the component being visualized.
• Both the Tree and Props buttons can be right clicked to access a menu containing additional options. These menus allow you to save and load the scripts to the place for later access, as well as load packaged presets.
• Currently, the plugin comes with two preset Tree scripts, which allow the previewed component to be retargeted to the 3D view and to a separate PluginGui, respectively. It also comes with two presets that support both Horsecat and Hoarcekat-style stories.

Support Continued Development

Consider Donating

If you like the plugin and would like to contribute to its continued support (and more plugins like this one), consider buying me a coffee and your generosity will be appreciated. Either way, enjoy the plugin!

Plugin Link

Roact Visualizer - Roblox

[olpumes (PlayTowerProteccSim)]

yay visual coding, i’ll be using this when i start learning

[flamenco_687]

Damn, amazing. I just started developing a new game with Rojo and although I don’t know much about Roact I heard about it and I’m giving it a try.

The thing that most worried me about Roact was having to constantly check if the UI I wrote was right or not, but with this my worries disappear, thanks. ^^

[pa00]

New Selection Options

When testing the plugin, I found that one of the most frustrating things was having to navigate the Explorer to pick a module to visualize. I have updated the plugin today to add two new options that should streamline this.

To access the new options, right click inside the “Click here to start” window, or just click left click the “New” button.

ModuleScript List

A searchable list of all ModuleScripts in the place.

File Browser

Opens your operating system’s file browser, allowing you to select the module’s lua file. The plugin will automatically find the module associated with the script file. Very convenient if working in Rojo or other Studio/Filesystem syncing software!

[pobammer (HowManySmall)]

Just so you know, you included Cryo, but that’s unlicensed and that’s technically violating Roblox’s copyright. You might want to change that.

[pa00]

I appreciate the concern. I’ve been using Cryo in many of my plugins for a while now (some of which have been endorsed by Roblox), and the last major statement on using Built-In plugin code has been this as far as I know.

The builtin plugins come with source (note, this is different from “open-source”, we don’t have a finalized plan around that) which means community can study the source code, learn from it, change it to suit their needs, etc.

I asked a staff member in charge of the plugin marketplace and was told it was fine, but that was over a year ago. If a problem comes up, I can replace Cryo. It’s an extremely barebones library (in fact, it’s so simple it would be hard to build an alternative that wasn’t just the same code).

If you have further discussion on this we can take it to PMs to stop bumping/derailing this thread.

[VirtuaIPixI (VirtualPixl)]

This plugin doesn’t render in this Roact component coding style:

local Roact = require(game:GetService("ReplicatedStorage").Roact)

local Test = Roact.Component:extend("Test")

function Test:render()

return Roact.createElement("ScreenGui", {}, {

Roact.createElement("Frame")

})

end

return Test

[pa00]

This is because a ScreenGui instance does not render unless it is a direct child of PlayerGui. You would need to either just render the Frame component without the ScreenGui above it, or create a Portal to render the ScreenGui elsewhere.

[jakebball11]

What About Hoarcekat? Its a very similar plugin that does the same thing.

[pa00]

Yep. Both plugins accomplish the same thing. In fact, devs using either plugin can work on the same project because this plugin has support for Hoarcekat stories.

They do have a few different features from each other, but both serve the purpose of live feedback when developing UI.

Having alternatives is not a bad thing. Use whichever you prefer.

[KhanPython]

Could you elaborate the notable features that make yours different & perhaps more useful? Currently, it’s hard to buy into the idea knowing that it achieves the same thing as Hoarcekat. What has inspired you to create this? Perhaps it encourages a different & a more convenient workflow? Maybe a better UI?

[pa00]

I didn’t know hoarcekat existed until the day I released the plugin.

Here’s what makes this plugin different:

• Ability to view Roact components directly without creating stories for them. (This has been useful for me personally, because I didn’t know about the story workflow).
• Ability to edit a persistent tree above the previewed component, allowing you to do things like retarget your preview to other UI containers (such as the StarterGui 3D view or any UI object within it) or separate your providers from your stories.
• Search for components to visualize by active script, name, or the file browser rather than having to navigate a tree.
• Choose between manual and automatic update modes.
• Error handling which compresses Roact errors into an easy to read format (shows only the error and the script it came from, not the entire Roact stack) and can take you to the exact line in the script that is causing the error.
• Supports both Hoarcekat stories and Horsecat stories using the Tree feature. In general, being able to edit the Tree makes the plugin highly moddable, and the included default trees demonstrate this.

[sanjay2003 (Sanjay)]

I’ve been using this for a bit now. Definitely top 10 plugins I’d recommend to someone else. Having to keep pressing play/run to test a component is so bothersome. Having it done in real time is just loads better. Thank you so much for this.

[pa00]

I pushed an update today that fixes a few issues.

Fixes

• Fixed preview window scaling issues when using large components. Previously, a scroll bar would appear, and would not go away due to automatic scaling bugs. Now, the preview window does not scale in order to be more consistent.
• Components that encounter errors during unmount will no longer break the plugin until it is uninstalled and reinstalled. Instead, these errors are handled properly now.

How to Update

In Studio, navigate to Plugins → Manage Plugins, then click “Update” on the Roact Visualizer.

[murmanox]

This is really nice but I wish it was a bit faster to use. Would it be possible to remember the location Roact between sessions? I’m using roblox-ts, so my Roact file is located in ReplicatedStorage.rbxts_include.node_modules.roact.src.lua, which the plugin isn’t able to find on its own.

Would there also be a way to filter available ModuleScripts based on their name or return value to allow for fast selection, similar to Hoarcekat? This would be much better than searching my explorer for the component I want to load, or typing the name of it into the ModuleScript list.

[pa00]

If you select to load autosaved data on startup, it should remember where Roact is for any given place file. If it’s not doing that, that’s a bug I need to fix.

As for filtering by name or return value, do you mean the ability to find a script like “MainController” by typing “Controller” in the list?

[thyswedishviking (SwedishAeternum)]

Bro this is amazing! Glad I found this, I’m 100% using this.

[Devfourm_Idk]

This is very cool, I will use it

[AridFights1 (Arid)]

I don’t feel like this plugin even works anymore. It does not display any sort of UI, even if I use the code used in the videos.

[pa00]

Perhaps we can discuss your case over PMs? I just tested the plugin after reading your message and it is still working fine for me.