We announced React Studio in October 2016 and shipped an alpha version to preorder customers in early December. Today we’re very pleased to let you know that the first public beta is available to everyone.
If you signed up for the waiting list, you should have received your download link already. If you’re new to React Studio, you can go sign up now and you’ll receive the download shortly. No more waiting!
Now the really hard work begins for us. The software is already functional, but we need your feedback to make it shine. We want to understand your needs better. Please check out the beta, experiment with the examples and features, and let you know what you think using either one-to-one chat or the Slack channel. We’ll even be giving out some “thank you” prizes among beta testers — see below for details!
Wait, you ask, what is React Studio? The answer depends a bit on your point of view…
If you are a designer
React Studio is the web design tool for the era of modern web apps. Everything is responsive and “mobile-first” by default. You can export component designs and app flows into clean HTML/JavaScript code using ReactJS, the cutting-edge web framework created by Facebook. To make your work easier, we have a high-quality Sketch plugin that lets you turn artboards into working React code. Finally, we have super-easy “mobile preview” and “publish” features so you can view and publish your creations.
If you are a web developer
React Studio is a GUI that creates complete React projects using Facebook’s “create-react-app” template. Unlike some other “WYSIWYG” style tools, we strive to make your life easier as a developer. The exported JavaScript is clean and modern, includes only the necessary code to represent the visual design, and respects ReactJS concepts. React Studio can be used for entire mobile-friendly SPA flows, or simply to design individual components — it’s up to you. The code generator is highly configurable using inline scripts or plugins, so you can even switch major components like CSS framework and state management by simply switching a plugin (see below for more).
If you are a project manager
React Studio is the missing link between your designers and developers. It’s not just a prototyping tool: React Studio gives you real, usable code from visual designs. Your team can model responsive web designs and get high-quality ReactJS code instantly. React is an amazingly convenient way to do front-end development for web apps, and now any web development team can easily adopt React’s advanced techniques thanks to React Studio.
Download the Public Beta
Go ahead, visit reactstudio.com and get the first beta!
(Sorry Windows and Linux users — React Studio is only for macOS at present. It’s a real native Mac app because we want to offer the best user experience.)
Example projects
The following three web sites were exported straight from React Studio:
https://neonto.cloud/u/examplelaplandadventures/https://neonto.cloud/u/examplecomments/https://neonto.cloud/u/exampleindieartist/
Want to see how these were made? It’s super easy to check out these projects for yourself. In React Studio, open the “Templates” tab in the Welcome screen (or choose “New from Template” in the File menu).
Demo video
Watch a short video of React Studio in action:https://www.youtube.com/watch?v=GBBLj2gn6J8
The Sketch plugin
Sketch is a great tool for UI designs… But having to rewrite your designs into HTML/CSS/JavaScript is never much fun.
With React Studio’s Sketch plugin, you can go from artboards into working React code and assets within minutes.
To install, drag the plugin file onto the Sketch application icon in your Dock.
The plugin will convert your Sketch layers into React Studio elements as faithfully as possible. This means that text will remain editable, vector graphics remain scalable, etc. (However for special element types such as text fields, the plugin can’t guess your intent from the Sketch design alone. In this case you can just delete the imported elements in React Studio and insert real text fields in their place.)
The plugin can also place your layers automatically in React Studio’s “scroll flow” group. This way you can determine which elements should stay fixed on screen and which should be part of scrolling content. To make a Sketch layer part of the scroll flow, just add “SF_” in front of the layer’s name.
Plugins and developer info
In React Studio’s exported code, we strive to offer sensible defaults and current React.js best practices. At the same time, we realize that one size does not fit all, and your projects will have specific needs that may evolve over time.
To address this, we are making most aspects of React Studio’s code generation customizable via plugins. You’ll be able to override any project-level decisions and provide custom components to your designers.
We want React Studio to be on the developer’s side, not against you! We’re calling this approach “Design-Accelerated Development”. Quite simply, it means reducing your development workload on trivial things (such as converting designs into components), and letting you focus on higher-level decisions and critical business logic.
The image below shows React Studio’s plugin structure:
React Studio concepts
Beta test rewards
When React Studio 1.0 ships in Spring 2017, we’re going to give out prizes among everyone who participated in the beta.
To join the raffle, all you need to do is join the Slack channel, or send us your feedback privately, or submit a bug or feature request. The following prizes will be offered:
- One (1) mid-range Android phone, for testing your mobile web apps
- Five (5) free React Studio licenses (12 months of updates and support)
- Ten (10) React Studio baseball caps!
Winners will be contacted by email. You can be from anywhere in the world, we’ll ship the prize to you.
We’re incredibly excited to work with you on finishing React Studio!