Major update to React Studio — Importing JSON data etc..

We’ve released a major update (Version 1.5.7)to React Studio. Update should come up when you open the app. If you don’t already have the app you can download it from here:

Update includes experimental UI features for linking Data to properties and lot’s of bug fixes.

Whats new!

  • Import JSON file to Data sheet
  • Convert nested JSON structures to “readable” Data sheet view
  • Screen states setting
  • Connect properties to elements by dragging and dropping
  • Reload plugins -button
  • Clear placeholder data from Data sheets on export
  • Various Bug fixes to Studio and CSS export

Import JSON data to Data sheet

Import JSON data from file or JSON data plugin to data sheet.

We’ve added new “import JSON” button next to “Add mockup data” button into Data sheet inspector panel. You can also use generic JSON data plugin for fetching JSON data.

If JSON data contains nested JSON objects or array’s you can simply click that cell and Studio will open new Sheet view filled with the nested data.

You can bind elements to nested JSON objects simply by using ”” notation in element’s data runtime linkage options.

Note that nested JSON structures and objects are “Read only” so you cannot modify and save the data inside nested structures.

Screen states

Change screen state based on the value in Data slot

Some times you need to have multiple UI-states for a screen; e.g. one version is shown for admin users and another one for regular users. To achieve this you can simply create multiple states to screens and change the state based on Data slot value.

Find screen “State” settings from inspector panel on the right when selecting screen from project map.

New Property data binding options

Connect component properties directly from Design canvas

This is an experimental feature for bringing component property creation and data binding to Design canvas. Simply drag selected property name on top of element and select which setting the property is bind to.

Reload plugins

When Plugin developer edits plugin code the plugins need to be reloaded to Studio. Previously it required to restart the studio but now we’ve added “Reload Plugins” feature to Plugins menu.

Interested about the update details? Check out release notes video from below ⬇.

React Studio Update 1.5.7