Build a Bubble.io App from Google Sheets

Bubble.io is a no-code platform that lets you build fully functional web apps with a visual editor. Its API Connector plugin supports any REST API, which means you can connect SheetsAPI to Bubble in minutes and turn a Google Sheet into the data layer for your entire app.

Prerequisites

• A Bubble.io account (free tier works)
• A Google Sheet with a header row
• A SheetsAPI account and a YOUR_USER_KEY key from the dashboard

1. Install the API Connector plugin

1. In Bubble, open your app and go to Plugins → Add plugins.
2. Search for API Connector (by Bubble) and install it.

2. Configure the SheetsAPI connection

1. Go to Plugins → API Connector.
2. Click Add another API, name it SheetsAPI.
3. Set Authentication to Private key in header.
4. Key name: Authorization, Key value: Bearer sk_your_api_key_here.
5. Leave the base URL blank - you'll put the full URL in each call.

For public sheets (no API key needed), skip steps 3–4 and leave authentication as None.

3. Add a List Products call

1. Click Add another call inside the SheetsAPI connector.
2. Name the call List Products.
3. Use as: Data (returns a list).
4. Method: GET.
5. URL: https://sheetsapi.gkit.mreshank.com/api/spreadsheets/YOUR_USER_KEY/Products
6. Add URL parameters:
   • limit → 20 (mark as dynamic)
   • offset → 0 (mark as dynamic)
   • sort → name (mark as dynamic)
   • search → `` (blank, mark as dynamic)
7. Click Initialize call - Bubble fetches one response and detects the schema.
8. Expand the data key and mark it as a list.

4. Build the repeating group

1. Add a Repeating Group element to your page.
2. Set Type of content: List Products → data.
3. Set Data source: Get data from an external API → SheetsAPI - List Products.
   • Set limit → 20, offset → 0, sort → name.
4. Inside a cell, add a Text element bound to Current cell's List Products data's name.
5. Add more Text elements for price, category, etc.

5. Add a search input

1. Add an Input element, type Text, placeholder Search products….
2. In your Repeating Group's data source, set search to:
   • Dynamic value → "name:" & Input SearchBox's value
   • Leave blank when the input is empty: When Input SearchBox's value is empty → "" (Bubble's conditional logic)
3. Set the Repeating Group to refresh on Input SearchBox's value changes.

6. Pagination

1. Add two Button elements: Previous and Next.
2. Create a Custom State on your page: page_index (number, default 0).
3. Next button workflow:
   • Only when: page_index * 20 < List Products's meta total
   • Action: Set state page_index = page_index + 1
4. Previous button workflow:
   • Only when: page_index > 0
   • Action: Set state page_index = page_index - 1
5. In the Repeating Group's data source, set offset to page_index * 20.

7. Show total count

Add a Text element bound to: "Showing " & Repeating Group List's count & " of " & List Products's meta total & " products"

8. Tips for production

Store the API key safely

In Bubble, go to Settings → API and add SHEETS_API_KEY as a server-side environment variable. Reference it in API Connector calls as [SHEETS_API_KEY] - Bubble never exposes server-side keys to the browser.

Enable caching

In the API Connector call settings, enable Cache this call with a TTL of 60 seconds. Bubble stores the response in its CDN, so repeated searches for the same query are served instantly.

Use a POST call to add rows

1. Add a new call: Add Product.
2. Method: POST.
3. Body type: JSON.
4. Body: {"name": "<name>", "price": "<price>", "category": "<category>"} with each value marked dynamic.
5. Trigger this call from a Form element's submit workflow.

What you built

Feature	Bubble element
Data list	Repeating Group + API Connector
Search	Input → search URL param
Pagination	Custom State + offset param
Total count	Text bound to meta total
Add rows	Form + POST workflow

The complete setup takes under 20 minutes with zero backend code - SheetsAPI handles authentication, pagination, search, and sorting.