React Studio 1.2: Version control, Plugin Editor & Store, 3D previews — and free!

We’ve just released an update to React Studio. This one was in the works for a while, but we think it was worth the wait. There’s one big news item which is not really a feature, but changes many things: As of today, React Studio is free.

Download React Studio at reactstudio.com →

Yes, we’re giving up on the subscription pricing model. Your feedback was loud and clear — a lot of Mac users just don’t like subscriptions for individual software. Now React Studio is free to use, and it’s not a trial or limited edition either: there are no limitations on exporting capabilities or what you can do with your projects.

Instead of subscriptions, we’re now putting all our efforts towards building an ecosystem for plugins and components. We want to make React Studio a uniquely powerful tool for team workflows in building modern web apps, and the new features in this release are part of that goal. We’ve already notified current subscribers via email and we want to thank all early adopters for having supported us (we’re giving a special gift depending on how long you were subscribed).

Feature highlights in 1.2:

• Version control integration using Git
• Integrated Plugin Editor
• Create Plugin command (in Plugins menu)
• “Change component state” interaction
• 3D preview in editing canvas

We also fixed many bugs and UI inconveniences. Thanks so much to everyone who reported issues!

How to update

If you already have React Studio, just open the app and it should present you with the update. And if you don’t have it yet, download the app at reactstudio.com, of course!

3D Preview

This new “exploded” preview mode gives you a clearer idea of the layer groups in your design.

Click the “3D” button in the bottom-left corner of the design canvas:

3D Preview in editing canvas

In the above screenshot, you can see the Foreground, Scroll Flow and Background layer groups clearly separated. Much easier to understand what content is scrollable!

Project Map updates

“Clean” a messy project map with one button click

• “Clean” function. Rearranges a messy project map with a button click. (If you don’t like the auto-cleaned state, Undo will take you back.)
• Hover previews. Shows preview when you hover the project map nodes with mouse.
• Updated visual styling for connector lines.

Version control using Git

React Studio now automatically supports Git, a popular system for version control of source code.

Version control is really about two things: 1) managing your change history so you can go back to previous versions and don’t accidentally overwrite new changes, 2) cooperating with others so that you can combine your work easily. React Studio’s Git integration does both.

When you first do a code export in your React Studio project (using either the “Open in Browser” or “Export React Code” commands in the Toolbar), a Git repository is created. From there on, any exports you do of the same project will be stored in version control (“committed” in Git terminology) under that same repository.

If you make manual modifications in the exported code, React Studio will detect that when you next do an export. You’ll be presented with a dialog that asks you how to proceed:

This way, your manual changes are never accidentally overwritten.

There’s more to it. Thanks to a Git feature called branches, you can use this integration to easily work on the code both with React Studio and manual changes. Here’s how…

Workflow for combining React Studio exports with manual code changes

React Studio places all its commits in a Git branch called “react-studio”. This makes it easy to work on the code manually, and then merge between the branches.

Let’s assume you’re going to do manual code changes after doing some exports from React Studio. The workflow would be like this:

• Switch the git repo to a different branch. (There’s no strict rule for naming branches. It could be according to developer, e.g. “john-doe-changes”, or by features you are working on, e.g. “accounting-database-connection”.)
• Work on the exported code in a text editor.
• Go back to React Studio to do some design changes.
• Export from React Studio. At this point you get the warning about local modifications, so choose “Stash, export & commit”.

Now your manual code changes remain in branch “john-doe-changes” while latest changes from React Studio are in branch “reactstudio”. To continue manual editing, switch back to “john-doe-changes” branch, do a “git stash pop” to restore your modifications, then use “git merge” to pull in the changes from the “reactstudio” branch.

This way the version control change history stays very clear: everything from React Studio is always in a “reactstudio” branch, and any manual changes have been merged in their own branches. The merge points are clearly visible in git history, so it’s obvious which line of code came from React Studio and which from the programmer.

It’s like having an extra developer on your team — one who does all the boring boilerplate work of setting up UIs!

Plugin Editor

The new integrated Plugin Editor window is essentially a minimal JavaScript IDE that shows you the files contained within a plugin. Much easier to modify and test your plugins!

Find it in the Plugins menu:

Click Plugins -> Show Plugin Manager

Select plugin and click “Edit”

Modify Plugin and reload code directly in the editor view

Create Plugin

To get you started on plugins more rapidly, we’ve added this command that lets you choose a suitable template with a bunch of features already included.

In the Plugins menu, choose “Create New Plugin” and you’ll get to choose the name and type:

The plugin templates contain a starting point UI with all the available controls (checkboxes, input fields, etc.), so you can easily make your plugin’s control UI by just copy-pasting the provided examples.

“Change component state” interaction

Visually created component states are a powerful feature of React Studio. To make them more useful, we added an interaction type that lets you modify a component’s state with a button click.

In upcoming releases, we’ll expand this to let you do more with component states such as using them from inside the component itself, and also connecting state interactions to a state management plugin (think Redux, Mobx etc.)

New example project “Horoscope”

This project demonstrates how to use component states (including the “Change component state” interaction discussed just above).

It looks like this: Daily Horoscope demo

You can find this project in the File menu > “New from Template”

Updated button styles

The default style for buttons now matches the Material Design look: smaller text displayed in uppercase. We’re using MUI as the UI framework for exported projects, so the styling for buttons comes from there. (Note that you’ll soon be able to switch to another UI framework — we’ve always intended for this part of React Studio’s export and rendering to be easily modified by plugins.)

You can always override the button styles to something else. If you don’t want buttons to have uppercase text, there is a new setting “Uppercase text for buttons” available under App Styles (click on the App block in the Project map.

The Plugin Store

We have big plans for the Plugin Store — so big that it will warrant a blog post of its own! But honestly, it’s starting small. You can find it in both the Toolbar and the Plugins menu.

Plugins have a one-click install system. They become immediately available in React Studio. They can also include a PDF manual and sample project that shows how to use the plugin. There is also an auto-update system: when a plugin you own is updated by its author, you’ll be notified in React Studio.

You can also submit your own plugins and components to the Store and get paid. To submit a coded plugin, open the Plugin Editor in React Studio, then click “Submit To Store”.

You don’t have to be a programmer to make a plugin because React Studio’s component presets can be distributed on the Store too. To submit a component preset, right-click it in the “Your Presets” list and select “Submit To Store”.

The new Plugin Store is part of something much bigger. As part of making React Studio free to use, we have joined the Software Package Exchange (SPX). You can read more about SPX on their website (https://spx.exchange). In a nutshell, it is a crypto-token based marketplace where users of low-code and no-code tools like React Studio can share and discover packaged plug-ins. The token is called PackageCoin (PKC). Any purchases made on the React Studio Plugin Store are executed in PKC.

This way, plugins that you make for React Studio can become much more valuable. When you publish a plugin or component preset on the React Studio Plugin Store, it can also be shared with any other stores that join the SPX ecosystem. As an SPX package developer, you will then get paid conveniently and automatically in the PKC token: first as a fixed amount of bounty as soon as your plugin is reviewed and accepted, and subsequently as many times it is downloaded from the plugin store (you set the price in PKC).

The SPX company is preparing for a major launch before the end of the year. For now, React Studio is the proving ground for PackageCoin. Right now, PKC tokens are only available through the React Studio Plugin Store… But after SPX’s launch, you will be able to transfer PKC tokens from your React Studio account into a global blockchain. Interested? Check out the SPX website.

What’s next?

Some items on our roadmap that we expect to see realized soon:

• UI framework plugins. Lets you replace mui.css with Bootstrap, Zurb Foundation, or whatever you prefer.
• State management plugins. Connect your interactions to Redux, Mobx or whatever you prefer.
• Localization. It’s a big practical problem for real-world web apps, and we have the core solution worked out through data sheets in React Studio.

…But maybe you have other ideas? Is there something else that you see as a priority? Get in touch at [email protected], we’re listening!