Rest API

Our REST API datasource lets you connect to virtual any platform, database, or service. If your datasource is not supported directly by Softr, there’s a good chance you can still connect it to Softr using our REST API connector. This allows you to do things like:

To add a REST API connection, navigate to Datasources from your Softr dashboard and click on Connect data source in the top right corner.

Select REST API from the list of data sources, then click Continue.

If the API you’re trying to connect to is supported as an API template, you can choose one of those options (A), otherwise, select Add Manually (B). For the purposes of this document, we will choose the Stripe template so you can easily see how the setup works.

Most REST APIs require some parameters to be placed in the header of the API call. You can add or remove as many headers as you need in the Softr setup, but here they should be headers that apply to all API endpoints. Headers that are only required for certain endpoints should be left out of this step - they can be added later on if needed.

In our Stripe example, the only required header is the Authorization header that contains our Stripe API Key:

Resources are the different endpoints of an API and they currently support GET and POST endpoints. In our Stripe template, we already have two resources setup - one to get a list of customers from the customers endpoint in the Stripe API, and one to get a single customer. Now let’s setup one to get a list of invoices. To add a resource, click on Add Resource.

On the Add Resource screen, you’ll notice a variety of fields and options to fill out or select. At minimum, this step needs a name (A), the HTTP Method (B), and a URL endpoint to call (C). See below for more details on each section.

After you have setup all required fields for the API Resource and have received a successful response from the API, you can click the Add button to add it to the REST API Connection. This makes it easy to collect all the endpoints of a single REST API into a single connection that you can use in all of your Softr apps.

You can edit or delete any API Resource by clicking the ellipses (three dots) icon on the Resource:

The headers tab makes it easy to add in additional headers that may be needed for a specific endpoint (in addition to the headers you setup in Step 2 above).

In the URL parameters section you can add parameters to the call that will be appended to the URL. Of course you can also add them to the URL field directly, but it’s better to add them here since it’s possible that not all calls will need certain URL Params. You should add these as key/value pairs (Name and Value). You’ll need to search the REST APIs documentation to find these keys and also what types of values you can send here. In the example below, we are using a customer query parameter to tell the Invoices endpoint to get the invoices of a specific customer. Check out the Stripe docs below and how we use the query param in the call:

You can send static or dynamic values in URL params. In the above example, the customer that we need to get invoices for will likely change based on who is logged in so we’re using a Placeholder {LOGGED_IN_USER: StripeID} to tell Softr that this value will change and should be determined by the StripeID field of whoever is logged into the app. More about Placeholders below:

Placeholders are a great way to send variables or dynamic data to and from the REST API. Sending static parameters to an API will typically always yield a similar result. By putting in placeholders, we can send data that is based on user actions, selected records, or logged-in user data. In the example below, you can see that the {LOGGED_IN_USER: StripeID} placeholder we used in the previous step is now shown as a placeholder name where we can put in some sample data to test with. In the live app, this static value of cus4hJudnpo56 won’t be used, it’s just for setup purposes.

You can also use placeholder to filter a list detail or list by a certain field value by using {filter.<FIELD NAME FROM API>} This is incredibly helpful for allowing people to filter a REST API with search and filtering in Softr blocks, or for setting static conditional filters. For example:

You can use the body tab when your HTTP Method is set to POST to send data to an API endpoint. This is really helpful when using an Add Record button on list blocks. Suppose we have a list of Stripe Invoices in our app and we want people to be able to create a new invoice directly via the Stripe API. We might use the Stripe documentation to come up with a body to send as a part of a POST request like this:

Most APIs will return a limited number of records, but there will often be many more records than can be returned. You can use the Pagination tab to define what parameters to use to get the next page of results. All APIs work differently, so this will vary widely across REST APIs, but in general the standard fields here will work. In the event that they do not, you can write a transformer function to handle this for you (more on Transformers below). In our Stripe example, we are using Stripe’s next_page parameter to cycle through the Invoices and the limit parameter to tell the Stripe API how many invoice records it should send us each time we call it.

You can use the transformer tab to write vanilla Javascript for manipulating and refining the response you get back from the API. This is really helpful for extracting nested JSON objects from a response or even performing numerical calculations and adding them to the final response as a new field. (We’re a big fan of using AI to help write these functions!)

After you click the Execute button and get a response from the API, a new pane will appear in the bottom part of the window (you may need to scroll down). Here we have several tabs where we can monitor what the API responses are and how we handle them in Softr. Don’t forget, you need to Execute a test call in order to see these options!

Once you’ve gotten a response from the JSON, you can check the schema (structure) of the response in the Schema tab. You also have several options for setup here

This field will display the final JSON that is created by any Transformer functions you have setup in the API call. Any JSON displayed here is used to determine what you see in the Schema tab.

This tab displays the JSON from the response from the API just as it comes, without any transformers or modification from Softr. The Raw JSON is very helpful in determining what Transformers to write, if any. For most use cases, this should be the first tab that you check. Compare the result in the screenshot below with the result in the screenshot above. Notice how in this example, we are using dot notation in a Transformer function to extract the data key from the response since it contains an ARRAY of objects that are invoices.