React Studio

Lightspeed into modern web app production

Tear down the walls between design and development

A component design in React Studio...
...and the exported code in a programmers' editor.
Create app flows and components. Express their properties and data linkage visually. Get code immediately.
React Studio's code output is clean and complete ReactJS projects with nothing extra.
And that's not all —
you can also go the other way:
A standard React component created in code...
...can be used in React Studio as a design element with property UI and full roundtrip back to code.
React Studio lets you create components either visually or in code, then use them interchangeably in your designs.
Customize your components with advanced property UIs and dynamic previews in the editing canvas.
Compose simple components together into larger units at any depth you can imagine.
“ It's Rapid Application Development, Jim...
But not as we know it.”

One app to bind them all

Designers prototype because design is an iterative process, and using a prototyping tool allows us to go through those iterations without the delay and cost of coding.

But sooner or later, that prototype has to get implemented as code with real world data, and that's when our problems start. Maybe a text area needs to be bigger, or different screen sizes throw off your carefully crafted proportions. Sometimes the coders simply cannot implement exactly what we've designed, and then it is back to the drawing boards.

But what if we could prototype in code, and your designs came to life immediately with real data?

Coders want to create value by writing new features. We also like to write code that is reusable. We don't like special cases, glue, and boilerplate.

What if you had an easy way to package reusable code components so that designers could simply use them to assemble an app out of components that you wrote — and debugged — before the designer even started on a project?

And what if the output of the design assembly was still your code inside a clean React scaffolding (and not some weird framework by a GUI tool vendor trying to lock you into their solution)? What if it also integrated with Git for version control, so you know exactly which code came from the tool?

Testers and Operations want to use real data during design and test to minimize surprises in production.

What if ops could provide endpoints for data and change them as often as they needed to without triggering any code rewrites or regression testing?

Download for free now
For macOS 10.12 or higher

What makes a modern web app?

Dynamic & responsive

Users nowadays expect a first-class experience across a range of screen sizes from 4 to 40 inches. React Studio has an advanced visual layout engine that lets you create smart keylines, use relative sizes together with device-independent offsets, and position elements on screen relative to screen edges, keylines, or preceding elements. Instant multi-device previews make it easy to spot layout mistakes — all sizes you want to support are rendered at once, so you can see them at a glance.

Another aspect of modern web is dynamic data. It's not enough anymore to render on the server and expect users to press Reload. With React Studio, you can model dynamically updating lists, grids, data displays etc. Use either mockup data or actual data loaded from a web service — it's just one click to switch your screens to display real data.

Progressive Web Apps (PWA)

Google is heavily promoting the concept of "progressive web apps" as the next step forward. A PWA is a website designed to look and act as much like a native app as possible — fast loading, jank-free scrolling, etc. Using "service workers" and client-side data storage, a PWA remains usable even when connectivity is slow or unavailable.

PWAs are a win on every platform. On Android devices and Chromebooks, PWAs are rewarded by the browser prompting the user to install the PWA as an app on the home screen. On Microsoft platforms, you can install PWAs like native apps and even publish them to the Windows Store. Although iOS doesn't go quite so far, PWAs made in React Studio provide a smooth and familiar user experience on iPhone — and that's crucial for user engagement.

Why React Studio for web apps?

Development

The Design Compiler is an evolutionary leap beyond libraries and frameworks. On a quick glance at React Studio, you might think: “just another GUI builder”. But you’d be missing something essential. There is a whole level of metaprogramming capabilities in React Studio that makes it so much more!

Tell me more ⬇︎

You’ve probably seen code generators and declarative UI design tools before, but React Studio is neither. It combines features of both of those approaches into a single metaprogramming tool — an “application that writes applications” as guided by your inputs.

The code inputs to the Design Compiler are plugins. It's easy to create a plugin to represent a React component, a web service, a state transition... Each plugin has a UI which lets the designer modify aspects of the generated code — but only within the parameters you specified. Everything composes: if you want to make a component that lets the designer pick other components to be placed inside it, no problem.

Read more on our blog →
Design

React Studio is a rich design environment that gives you full control over high-level aspects of an app's design. In React Studio you don't draw a picture of a checkbox. You place a real checkbox, decide how it should fit in the layout, then connect it to some real data, make it interactive. In other words: create real apps, not just drawings of them.

Tell me more ⬇︎

It goes far beyond checkboxes. Making a list? Draw one item, and React Studio can repeat it and fill with real data. Making a menu? Again, draw just one item and its highlighted state, then let React Studio do the work. You can create deep interactions from these repeated items (e.g. user taps on a list item to edit in separate screen).

It's a bit more work than just drawing... But the results are so much deeper. And you can still keep using your favorite drawing tool: we have a powerful transfer plugin for Sketch that lets you control how layers are interpreted, so that e.g. a picture of a button in Sketch becomes a real button in React Studio.

Operations

Developing and maintaining apps for business means balancing two contradictory priorities: Business reputation and satisfaction depends upon stable operations, which in turn requires minimizing changes. Business competition requires as many changes as possible, as quickly as possible, which jeopardizes stability.

Tell me more ⬇︎

React Studio reconciles the two under a new paradigm. Designs and code will flow in both directions in a controlled way. Designers "assemble" apps out of code that has already been written, tested, and debugged. Endpoints can be changed for user acceptance testing on offline systems without rewriting code.

That means no surprises from last minute changes that introduce bugs and force 11th hour re-testing of previously tested deployments. Apps are effectively production ready as soon as the business and the designers are happy with them, and can be changed up until the last second before deployment without risk of destabilization.

“Your software has the perfect approach for designing apps, and the plugin structure is a killer.”
“Within a week of starting with React Studio it had become a vital part of my workflow.”
“Wondering why it's not more popular, it seems the best on the market. I evaluated 7 other similar apps.”
For individuals & small teams

Keeping up with the latest trends in web development is not easy. React Studio takes out the pain of learning React, and gets you started on any app project with immediate results and code you can modify at will.

You can think of React Studio as an extra developer on your team — one who does all the boring work of converting designs into React components! Thanks to the integrated Git version control support, it's super easy to bring React Studio's output into your source tree. (In fact, it's cleaner than the traditional method because you know that all UI changes are in the "reactstudio" branch.)

For freelancers, React Studio is the power tool that will lift your output to an entirely new sphere. You can deliver results that perhaps were previously out of reach — like complete Progressive Web App front-ends — or just do everything much faster and more structured thanks to visual tools and smart code output.

For enterprises & pro teams

Your company probably already has a web UI framework, design guidelines, coding standards... Bringing in new tools is not trivial.

Our solution takes the opposite approach: we adapt the software to your standards.

Get a fully customized edition of React Studio that exactly fits your people and their workflows. Our engineers will work together with your teams to make the code output looks like they want. (We'll even replace React with something else if you want!) Our UI team will add your design style directly into the software. There's no better way to make the corporate UI design standards and best practices come to life.

Contact sales@neonto.com and let's talk to discuss what you need.

Features

  • Fits into and optimizes existing workflow; doesn't require abandoning or changing any tools or investments.
  • Developers keep all existing tools and integrations. Project and code output is fully open, no vendor lock-in.
  • Gives developers an easy way to package new code for controlled drag-and-drop use by designers.
  • Drag-and-drop use existing React/npm packages, with npm dependencies preserved on export.
  • Integrated Plugin Editor with API verifier to ensure interface compatibility.
  • Export complete projects using Facebook's official “create-react-app” project structure.
  • Smart version control integration using Git branches.
  • Drag-and-drop web app creation using real React components.
  • Customizable interactive UIs for component properties.
  • Sophisticated, yet easy to use tools for responsive screen layout and design of interactions.
  • Use built-in drawing tools and/or continue to use tools such as Illustrator, Photoshop, and Sketch.
  • Import from Sketch — our advanced Transfer plugin lets you bring symbols as components, specify layers as dynamic elements, etc.
  • Mobile Preview — view your design immediately on any mobile device.
  • Publish to Web — get a permanent URL for your web app with one click.
  • Built-in Plugin Store lets you also sell your own plugins to other users.

Pricing

React Studio is free to use. Code export, design tools, plugins — everything you need to make great web apps is free.

Download it now
For macOS 10.12 or higher

The built-in Plugin Store offers free downloads of useful plugins.

You can also distribute your own creations on the Store (see instructions in React Studio's Plugin Editor).

Easy back-end with Firebase

Need a server back-end for your app? Check out the free Firebase plugin in React Studio's Plugin Store!

Creating a world class cloud back-end doesn't get easier. Read more about it in this blog post >

Enterprise customization

We provide custom version of React Studio for your web UI framework, design guidelines, and coding standards. Our solution engineers and UI team will make it fit like a glove for your team and existing workflows. We can also provide source code to guarantee your internal deployment capability of the toolchain.

Pricing depends on your requirements. Contact sales@neonto.com and let's talk — we think you'll be surprised at how convenient it can be.

Examples

These demos were published straight from React Studio. You can take a look at these project files in the app:
File menu > New from Template

(All the demos are responsive, so try resizing your browser window to a phone size too — or check it out on a phone too!)

Guides and tutorials

Sketch plugin

Community

For developers

Get React Studio for free

Download now
Copyright Neonto Ltd
Contact us