Codify - Convert to TypeScript, Fusion, React, Luau, Vide, Rojo

Purchase on Roblox Purchase on Itch.io

Codify v2 converts Roblox Instances into code snippets in a flash. Whether you use vanilla Roblox Luau, TypeScript JSX, or a framework like React/Roact, Fusion, Vide or Rojo, Codify’s got you covered!

Codify supports all Instances available in Studio. This means you can generate code snippets for anything from GUI to models.

:inbox_tray: Installation

Codify v2 is available on the Creator Store and Itch.io. You can find the links below:

Creator Store

The Creator Store is the easiest way to install Codify v2. You’ll get access to automatic updates, and you’ll be able to use the plugin anywhere you have Roblox Studio installed.

Get it on Roblox

Demo Version

If you’d like to try out Codify on a limited basis*, a free demo version is also available from the Creator Store.

Download demo version →

Download demo version via Itch.io →

*The demo version supports vanilla Roblox Luau (Instance.new) only. Output configuration options are also preset in the demo. Please purchase the full version to customize settings and access additional framework options.

Itch

Currently, there’s no way to automatically install and update plugins purchased through Itch. You’ll need to manually download and drop the plugin file into your Studio plugins folder every time there’s an update. You’ll also have to repeat this process for every device you want to use the plugin on.

Get it on Itch.io

:framed_picture: Gallery

:shield: Permissions

HTTP Requests

Codify requires the ability to make HTTP requests to fetch metadata about the Instances you’re converting.

Domain Required Reason
s3.amazonaws.com :white_check_mark: Studio metadata and API dump

Script Injection

Script injection is a completely optional permission. You won’t be prompted to give access to this until using the Save to Device feature. This feature allows you to save your code snippets to your computer.


:bulb: Tips and Tricks

Here’s some helpful tips and tricks to ensure you get the most out of Codify.

Framework Settings

Some settings are on a per-framework basis. Switching between frameworks on the Settings tab will reveal different options specific to the selected framework.

Roact

Although Codify only shows React in the framework dropdown, it is still compatible with Roact.

Select Roact from the framework dropdown and head to Settings → Generation → Create Method. Set this value to Roact.createElement (or whatever you require if aliasing with a variable).

Using RbxUtility.Create?

Using an Create-like library? i.e. any library using the following syntax:

local textbox = Create "TextBox" {
    ClearTextOnFocus = false,
    BackgroundColor3 = Color3.fromHex("#1a1a1a"),
    TextColor3 = Color3.fromHex("#fafafa"),
    PlaceholderText = "Enter message",
    Parent = PlayerGui.ScreenGui,
    Text = "",
}

Switch your active framework to Vide, and change the Create Method setting to “Create”. This will allow you to generate RbxUtility compatible code.

Fusion Scopes

Fusion v0.3 and later employs a greater focus on manual memory management via the use of scopes.

You can quickly configure your installation to produce scoped components by going to Settings → Generation → Create Method and entering scope:New (replacing “scope” with the variable you are using for your scope, if required).

Codify may produce inaccurate results. Always review generated content for accuracy.

More Plugins
Codify | Matswap | Surface Tool

Additonal Resources
Markdown buttons

233 Likes

I’m not someone who’s really ever used Roact before for the one reason that it’s extremely time consuming in order to create one UI components that I could create normally in so much less than that. I’ll be sure to try this out.

9 Likes

I’m starting to design all my UIs with Roact. This is simply a must have, great work! Saved me hours of work!

9 Likes

Very useful, thank you so much.
Is there a reason why ScreenGui and BillboardGui are “invalid selections”?
I tried to convert a BillboardGui to a Roact element, but it got cancelled. However, I found a workaround by parenting the BillboardGui to a Frame then Roactify the Frame.

5 Likes
Old Reply

I think the logic behind it was that you’d render into a ScreenGui (or other LayerCollector), and so it seemed unnecessary to allow “Roactifying” those.

I do plan on updating this plugin though to include a proper UI (probably using the plugin itself to build it), so I will take that feedback on board and ensure you can do that in the updated version.

Codify is now capable of turning anything into code—Not just UI elements! This gives you the freedom to turn anything from UI to models into a snippet of code and drop it in where you need it.

4 Likes

I was curious on weather or not it is normal to get an error titled “string too long”.

18:25:46.385 - String too long

18:25:46.386 - Stack Begin

18:25:46.386 - Script ‘cloud_4749111907.Roactify.Plugin’, Line 196

18:25:46.387 - Script ‘cloud_4749111907.Roactify.Plugin.Loader’, Line 17

18:25:46.387 - Stack End

I just tried converting a huge UI and I presume it is not meant for this.

1 Like

It’s intended for smaller individual components. There is a limit to the length of a script’s source, so converting an entire UI would generate a string far bigger than the script can store.

Codify will warn you when attempting to convert a large amount of objects to UI. You should try to split down components where necessary to help you keep your code clean and more easily maintainable.

Large snippets may also get truncated due to Roblox’s TextBox character limit. If you’re hitting this limit, either consider splitting your components down into smaller parts, or export the snippet—while Codify can’t display the full snippet within the widget, it keeps your snippet in-memory, so it can be exported at a larger size.

...

I will make sure to add this to my to do list when I get round to updating, and see if I can automate splitting UIs into smaller components somehow.

This plugin is honestly not well made or currently being maintained though. I may update it in future to be more user friendly, but for now it works.

3 Likes

This is awesome! I’ve tried to learn Roact recently and this sure saves a lot during the process. Looking further to the development of this project. Thank you for making this.

3 Likes

How do I select a module as I don’t see a way of doing that

Old Reply

click the roact module in your explorer, and then the destination folder/container for your generated roact component to live in (one at a time, not multi select). finalise your selections by clicking on workspace.

it processes your current selection and is honestly a terrible design for users, but it’s something that should really be improved at some point. since this was just a small utility I made for myself, I never made it user friendly. sorry!

Codify no longer depends on Roact. Just copy-paste direct into your scripts, or export the snippet. It’s up to you to manage dependencies.

2 Likes

This module is awesome. It saves me a ton of time to convert UI elements to Roact. Thanks for your time making this.

3 Likes

I’m currently delving into the wonderful world of Roact and all of the benefits it has to offer. My biggest and most detrimental concern was the fact that I’d have to spend hours manually creating my UI instead of easily piecing it together in Studio, and this amazing plugin has remedied my concerns entirely!

Thank you very much for making such a useful and applicable plugin!

:clap:

2 Likes

Super helpful plugin; only issue I’ve run into is it doesn’t seem to like UIGradients’ ColorSequence type color property.

image

6 Likes

You’re a lifesaver. This plugin lets me use Roact → lets me dev more effectively. I’m sorry for bumping this, but also not – more people need to see this.

4 Likes

Roactify has been updated with a new UI (well, it didn’t have one before)! This should make it easier and more intuitive to use. I hope you enjoy using the new Roactify!

3 Likes

Small patch published:

image

  • Numbers were previously fixed to three decimal places; they will now truncate to their most significant decimal place (up to three places); e.g. 0.5 will now be output as 0.5 and not 0.500, but 0.529 will still output as 0.529
5 Likes

Is there a github repo for this?

1 Like
Old Reply

currently not, but I’m more than happy to publish the source once I have my GitHub actions configured to automate the publishing process for this plugin!

for the time being, consider using a browser extension or inserting the plugin to a blank Studio project via the command bar:

Edit: This will no longer work as Codify is now a paid plugin on Roblox. Consider downloading via Itch.io if you’d rather not pay for the plugin, or build it from source (available via GitHub).


for reference, the following URLs are accessed by this plugin (all requests are unauthenticated):

3 Likes

Patch:

  • Snippets are auto-selected when clicking on the snippet
  • Copy hint is displayed when snippet is selected
  • Added PluginAction to allow “Generate Snippet” to be assigned to a keyboard shortcut

@JoelBrd GitHub repo is now live here:

5 Likes

Release v1.1.0

Roactify now has syntax highlighting and an update to the “About” section of Settings that displays a list of contributors. Thanks to @boatbomber for these amazing changes!

image

Keep a lookout for future updates to Roactify :eyes:

Syntax highlighting is provided by @boatbomber’s Highlighter module:

What’s Changed

HTTP Permissions

You may be prompted to allow requests to GitHub. This is purely used to download the list of contributors. You are free to decline this request without negatively impacting the plugin.

New Contributors

Full Changelog: 1.0.0…1.1.0

6 Likes