Codify Plugin | Convert anything to code! (+Roact, Fusion)

Resources Community Resources
, , , ,
#1

Codify Cover Image

Get it on Roblox Get it on Itch

Codify converts your pre-existing Roblox UI, models and more into code snippets in a flash. Whether you use vanilla Roblox Luau, or a framework like Roact or Fusion, Codify has you covered!

:inbox_tray: Installation

Codify is available from the Roblox Plugin Marketplace for 350 Robux, or can be downloaded for free via GitHub (self-build) or its Itch.io store page (optional donation).

Plugin Marketplace

The Creator Marketplace is the easiest way to install Codify. You’ll get quick and easy access to updates via the Plugin Management window, 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!

Itch.io

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

Manual Installation

If you don’t want to use the Plugin Marketplace or Itch.io, you can clone the plugin source from GitHub. You’ll need to compile the plugin binary yourself using a tool like Rojo, and you’ll also be responsible for keeping the plugin up to date.

This might be a great option for you if you want to modify the plugin source code, or if you’re concerned about security. However, this method sacrifices convenience of installation and updates.

Get it on GitHub

:bug: Found a Bug?

If you think you’ve found a bug, please report it! Here’s all the places you can report bugs:

:shield: Overview of Permissions

HTTP Requests

Codify requires the ability to make HTTP requests to keep the plugin and Studio in-sync. The table below shows an overview of the domains Codify will make requests to, and why (and if) they’re required.

Domain Required Reason
s3.amazonaws.com :white_check_mark: Studio metadata and API dump
api.github.com :x: List of contributors who helped make Codify possible

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.

This permission is exclusive to the Save to Device, and is not required for any other feature. Save to Device is great for exporting snippets longer than the TextBox character limit, or for accessing your snippets outside of Roblox Studio.

Save to Device will create a temporary ModuleScript in order to export your snippet. The ModuleScript is unarchivable, meaning it won’t be saved to your place during publishing/(auto-)saving. The ModuleScript is also deleted immediately after the snippet is exported.

:framed_picture: Screenshots

Screenshots

:thinking: Plugin Limitations

Codify does not support Instance properties which accept another Instance as its value. This means properties such as Adornee or ObjectValue.Value are not supported; however, Codify will try its best to link the Parent property to the Instance it’s referencing, as long as it’s in the tree.

Roblox’s TextBoxes are also subject to a character limit. This means you may find large snippets of code are truncated. You can use the Save to Device feature to export your code to a ModuleScript, which is subject to a much larger character limit. However, if you’re reaching these limits, you may want to consider reviewing your components/models, and seeing how you can split them down further. This will help you with maintainability and keep your codebase clean.

:package: Open Source Projects

:mega: Shoutout to @boatbomber for their help with expanding Codify’s scope to include more than just Roact. You should check out their Itch.io store for more of their work, and how you can support them!

Codify is built on top of a few open source projects. Here’s a list of the projects Codify uses:

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

183 Likes
Using Roblox-ts, Roact and JSX to create and manage UIs
Pract - A Declarative UI Library That's Just Practical!
What are you working on currently? (2020)
Test post for tutorial
Instance to ModuleScript Converter | Convert any instance into an array of data!
ME LUA (New Elements To Code Plugin)
Surface Tool - Bring Back Studs!
How to get studio-themed plugin UI elements?
Instance to ModuleScript Converter | Convert any instance into an array of data!
Make the character unlocked and archivable
Feedback on my UI
Gui To Lua Plugin (that actually works)
#2

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.

7 Likes
[Deprecated] Client Dump Parser
#3

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.

2 Likes
#4

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

6 Likes
#5

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.

3 Likes
#6
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.

2 Likes
#9

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
#10

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.

2 Likes
#11

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
#12

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

#13
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
#14

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
#15

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
#16

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

image

4 Likes
#17

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
#18

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
#19

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
4 Likes
#20

Is there a github repo for this?

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

1 Like
#22

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