Codify - Convert to TypeScript, Fusion, React, Lua

:information_source: Important information:
Codify v2 is no longer being maintained. Codify3 is in development and will supersede this version.

Learn more →

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 or Fusion, 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 Roblox Plugin Marketplace, Itch, and GitHub. 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

Don’t forget to leave a :thumbsup: like if you enjoy the plugin!

Free Version

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

Download free version →

*The free version supports vanilla Roblox Luau (Instance.new) only. Output configuration options are also preset in the free version. 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

Manual Installation

This is not recommended for most users, but you can clone this repository and build the plugin yourself. You’ll need to know how to compile model binaries using Rojo, and how to manually install local plugins in Roblox Studio.

Get it on GitHub

: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.

:warning: Disclaimer

The code snippets produced by Codify are not 100% perfect. You should consider the snippets as a starting point, and not a finished product. You should always review the code snippets before using them in your own projects. This still shouldn’t put you off from using Codify, though!


218 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.

8 Likes

I should update this to have a UI at some point, but just keep an eye on the output for now. Really shouldn’t take long if I make the UI using the plugin itself :grin:

Codify now runs from a single widget with a suite of toggles and customisations. This helps you customise the output to your preferences, and generate snippets from a user-friendly interface.

4 Likes

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

8 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.

4 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.

3 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

5 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.

2 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!

2 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?

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):

2 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:

4 Likes