Xano as backend for a rental app
In this guide, you’ll learn how to set up and use Xano (a no-code backend service) together with a template available in toddle.
You’ll use Xano as your database — the place where your app's data is stored and you will use toddle to display the data from Xano.
🗄 Steps in Xano
Step 1
Go to xano.com and click “Get started for free”.
The frontpage of Xano.com
Step 2
Sign up for the FREE account, answer a couple of questions and name your workspace in Xano.
Go through the setup of your Xano workspace
Step 3
Start with a few database tables (think of Excel sheets) if you like. We will use a Xano template later that adds the tables automatically — so you don’t have to add any tables for now. Make sure to have the “Include C.R.U.D (Create, Read…) checkbox checked.
Start with a couple of databases if you like
Step 4
Select the “Free Instance” under “Instances”.
Start with a couple of databases if you like
Step 5
Find and select the “Rental Marketplace” template under “Marketplace”.
Start with a couple of databases if you like
Step 6
Click “Get template” and “Install template” afterwards (not shown below).
Start with a couple of databases if you like
Step 7
Now go to “Database” in the left sidebar. Here you will see the tables (”listings”, “reservations” and “user”) created by the template you just installed (templates in Xano are just data records).
Start with a couple of databases if you like
Step 8
To connect the data from Xano to toddle you will need to find your API key — a “password” that connects Xano with toddle. Go to “API” in the left sidebar and click the “rental marketplace” box in the bottom of the screen.
Start with a couple of databases if you like
Step 9
Copy the “API Group Base URL” shown in the top right corner.
Start with a couple of databases if you like
The next steps are within toddle.
👶 Steps in toddle
In toddle, you will need to select clone a template and connect Xano. In order to start playing with a template in toddle, follow the instructions below.
Step 1
Sign in to toddle and go to “Projects”.
Step 2
Click the “New project” button near the top of the screen.
Step 3
Select the “Rental App” template.
Templates visual
Step 4
Give your project a name (and an emoji) and click “Create project”.
Step 5
Create a new branch by clicking “New branch +” near the top of the screen.
Step 6
Give your new branch a meaningful name - for instance “xano-api-key-setup” and click “Create branch”.
Step 7
Click “Edit” next to your branch to open the toddle editor.
Step 8
Click “Data” in the left sidebar and then API called “Listing”. Make sure you are on the “HomePage” (see the grey bar at the top of the screen).
Rental Template
Step 9
Replace the URL with your API key (the one you copied from Xano) in the URL section. Click “Done”.
API request Example
Step 10
You should now be able to see the data from your Xano instance. Try and go to Xano and replace some of the details (add a new picture for instance). You should be able to see the changes in toddle right away.
Step 11
If you want to modify the design find the component “Listing” by clicking the top left box with your project and branch name. Open the component and feel free to create your own design.
To make your design flexible — use the “Attributes” shown under “Data” in the same way as the existing design. (1) is a heading with the attribute “Headline” (2) connected to it through a formula (3).
Image example
The formula looks like this:
formula example