Bubble (opens in a new tab) is one of the oldest and most comprehensive low-code app-building platforms on the market. You can connect a Cube deployment to Bubble using Cube’s REST API.

Here's a short video guide on how to connect Bubble to Cube.

Use REST API in Cube

Don't have a Cube project yet? Learn how to get started here.

Cube Cloud

Click the "How to connect" link on the Overview page, navigate to the REST API tab. You will see your connection credentials, the REST API URL and the authorization token:

Self-hosted Cube

For a Cube instance publicly available at a specific HOST, the REST API URL would be HOST/cubejs-api/v1. Please refer to the REST API page for details.

You will also need to generate a JSON Web Token that would be used to authenticate requests to Cube.

Please check the Security page to learn how to generate a token. We suggest generating a long-lived JWT that won't expire soon.

Add an API connector plugin to your Bubble app

Navigate to the plugins. Select and install the API connector plugin.

Create a new API in Bubble

Click "Add another API".

Next, set the "Authentication" as "Private key in header", and copy and paste Cube's Authorization token. Additionally, make sure to add a shared header for all calls by setting content-type to application/json.

Create a POST request in Bubble

Click "Add another call".

Copy and paste the Cube REST API, including the /load path, in the API field. Make sure to select "Use as: Action", and use the JSON "data type" and "body type".

Get your Cube query in the JSON query format ready. You can copy it from Cube’s Playground or compose manually.

Paste the JSON query in the Body. Make sure to add a query parameter for your JSON query.

Next, hit "Initialize / Reinitialize call".

Create a workflow in Bubble

First, add a "Page is loaded" event. Add an action that uses the API connector plugin. Next, add another action to set the state of an element. Select the index element, and create a new custom state. In this example I named the custom state OrdersByMonth and selected the data field of the API response. Make sure to toggle the "This state is a list" checkbox as well. While setting the state's value you will need to select "Result of step 1" and the data field.

Display the data in Bubble

Bubble has an amazing feature where you can drag and drop UI components into the design dashboard.

Once you added a chart, you configure the data points. More specifically, the series categories and series data. For the series categories and series data you need to select the index and OrdersByMonth state followed by the data point you want to use in order to populate the chart.

Once you open the "Preview" you'll see your nicely rendered charts.