The Startup
Published in

The Startup

React Studio + Xano No-code Backend Builder = ❤️

We have some news that all you app builders are going to LOVE!

We’ve just launched a new integration with Xano, the no-code backend that lets you have a complete backend for your project within minutes.

Some highlights of this integration:

The essentials of Xano:

1. Lightning-fast development speed

2. Creates basic API endpoints automatically

3. Create business logic rules without code

4. Integrated with React Studio

So how does it work?

Open the React Studio app, create a new project and head to the Data tab.

You’ll see the Connect to Xano button. Click it and sign up for Xano. Their free plan lets you explore all the features. (Of course if you already have an Xano account, then simply login to your account.)

1. Click “Connect to Xano”
2. Sign up to Xano
3. Sign up is complete, and a template was created for you to experiment with.

After signup, a sample backend was created for you. You can find it in the Xano dashboard at

Now comes the part of linking your Xano backend with this React Studio project. This happens through the “Connect to Xano” window, as shown below.

To keep track of your backend projects and their access levels, Xano uses the terms “instance”, “workspace” and “API group”. Don’t worry if these seem unfamiliar at this point — just select the defaults.

4. Select Instance, Workspace and Api Group

Here you can also select some tables that you want to access in your app. The example backend project created for you contains the tables “restaurants” and “user”. (See screenshot above.)

Put a checkmark next to them, and click Ok.

The tables from Xano are reflected in React Studio as data sheets:

5. Studio generates Data sheets automatically from the selected Tables.

Red arrows in the above screenshot show how these generated data sheets are automatically linked with the Xano backend. For example, the “restaurants” sheet is linked to a Xano API endpoint called “/restaurants”.

Xano’s automatically generated API endpoints are powerful, as they support all standard database operations (Create / Read / Update / Delete, a.k.a. CRUD).

Custom endpoints

Accessing an entire table from the back-end is awfully convenient to set up, but often you need to get more specific about what data is accessed and how. Xano and React Studio play well together to let you define these fine-grained endpoints.

You can make a new data sheet in React Studio and link it with a Xano endpoint very easily. Click “Add Sheet”, then activate the Xano plugin for this new sheet (it’s under the heading “Live Data from Web Service”; you can see the setting in the above screenshot).

In the textbox titled “API endpoint”, you can enter a string that matches a custom endpoint in your Xano backend, like this:

API endpoint setting

Note that this endpoint string can be dynamic! In other words, the path used to access this data can change while your app is running, depending on data within your app. (Imagine a user selects an item, and then you want to load some further data about that item. That’s a very common use for this kind of dynamic API endpoint string.)

React Studio offers “data slots” for storing and accessing this kind of dynamic data. The current value of a data slot is “injected” into your API endpoint string. And presto — whenever the data slot value changes, the data for this endpoint will automatically get reloaded if needed. The above screenshot shows this in action with an endpoint string composed of “restaurants/” followed by the value of a data slot. (As you might guess, this setting fills out the sheet with the data for a specific restaurant.)

One thing to keep in mind when designing your Xano endpoints. To make the data easy to access in React Studio, the output JSON should be “shallow” (no nested arrays etc.). React Studio’s data sheets are not yet friends with the deeply nested JSON data but we’ll look into this matter in the near future.

Designing your backend in Xano is easy and fun once you know the essentials about keeping it Studio-friendly. We have a video series to help you get off the ground. Check out this “Getting started” episode:

Creating a restaurant catalogue app in React Studio connected + Xano backend.

Can I add Login and signup screens to your app?

Yes! However, at the moment React Studio’s Login Gate screen supports just only one of the signup options (regular email signup) offered by the Xano backend. We’ll dive into other authentication options in the near future.

Add a login gate to your Xano powered React Studio project

Can I upload files to Xano with app build with React Studio?

Yes you can!

Just use the Xano Upload plugin. Check out this video:

Upload files from React Studio project to Xano

Questions and feedback

Any questions about the Xano integration? Head to our forum at

We’d love to hear from you on how to make this backend magic as easy as possible to use for your projects.

Downloads and links

Download React Studio for free:
(Only for macOS)

Xano, the state-of-the-art no-code backend, is at:

Other interesting stories about React Studio



Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +768K followers.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
React Studio

The premium app design tool for the most advanced JavaScript UI library — React JS