# How to integrate an RSS reader in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

You can fetch and display RSS feeds in your Bubble app using the API Connector to call an RSS-to-JSON conversion service. This tutorial walks through configuring the API call, parsing feed items, displaying them in a Repeating Group, and scheduling automatic refreshes so your content stays current without manual updates.

## Overview: Integrating an RSS Reader in Bubble

This tutorial shows how to pull RSS feed content into your Bubble app. Since Bubble cannot parse raw XML natively, we use an RSS-to-JSON service (like rss2json.com) via the API Connector to convert feeds into JSON that Bubble can understand. You will learn to display feed items in a clean list, store them locally, and keep them updated automatically. This is ideal for content aggregators, news dashboards, or any app that curates external content.

## Before you start

- A Bubble account with an app
- An RSS feed URL you want to display (e.g., a blog or news site RSS)
- The API Connector plugin installed
- Basic understanding of Repeating Groups and Data Types

## Step-by-step guide

### 1. Set up the RSS-to-JSON API call in the API Connector

Go to the Plugins tab and open the API Connector (install it if you have not already). Click Add another API and name it RSS Feed. Add a new API call named Get Feed. Set the method to GET and the URL to https://api.rss2json.com/v1/api.json?rss_url=[feed_url]. The [feed_url] part is a parameter — Bubble will automatically detect it. Set feed_url as a URL parameter with a default value of a real RSS feed URL for initialization (e.g., https://feeds.bbci.co.uk/news/rss.xml). Leave it unchecked as Private so you can set it dynamically.

```
GET https://api.rss2json.com/v1/api.json?rss_url=[feed_url]

Sample Response:
{
  "status": "ok",
  "feed": {
    "title": "BBC News",
    "link": "https://www.bbc.co.uk/news",
    "description": "BBC News RSS feed"
  },
  "items": [
    {
      "title": "Article Title",
      "pubDate": "2026-03-28 10:00:00",
      "link": "https://www.bbc.co.uk/news/article-1",
      "description": "Article summary text...",
      "thumbnail": "https://image-url.jpg"
    }
  ]
}
```

> Pro tip: The free tier of rss2json.com allows 10,000 requests per day. For higher volume, sign up for their paid plan or self-host an RSS parser.

**Expected result:** The API call is configured and initialized, and Bubble can read the feed title and items from the response.

### 2. Display feed items in a Repeating Group

Go to the Design tab and add a Repeating Group to your page. Set its Type of content to Get Feed's item (the nested item type from the API response). Set the Data source to Get data from an external API → RSS Feed - Get Feed, and set feed_url to the RSS feed you want to display. Inside the Repeating Group cell, add a Text element for the title (Current cell's Get Feed item's title), another Text for the publication date, a Text or HTML element for the description, and an Image element for the thumbnail. Add a link or button that opens Current cell's Get Feed item's link in a new tab.

**Expected result:** Your page displays a list of RSS feed articles with titles, dates, descriptions, and thumbnails pulled live from the feed.

### 3. Store feed items in your database for faster loading

Create a new Data Type called FeedItem with fields: title (text), link (text), description (text), thumbnail (text), pub_date (date), feed_source (text), and external_id (text — use the link as a unique identifier). Create a backend workflow called store-feed-items that accepts a list of items. In the workflow, use Schedule API Workflow on a List to iterate through the items, checking if the link already exists before creating a new FeedItem. On your page, replace the API data source with Do a search for FeedItems sorted by pub_date descending.

> Pro tip: Use the link field as a unique identifier to avoid duplicate articles. Before creating a new FeedItem, add an Only when condition: Do a search for FeedItems where link = this item's link is empty.

**Expected result:** Feed items are stored in your database and displayed from local data, loading faster than live API calls.

### 4. Schedule automatic feed refreshes

Create a backend workflow called refresh-feeds. In this workflow, call the RSS Feed - Get Feed API action for each feed source you want to refresh. Then iterate through the returned items and create new FeedItem records for any that do not already exist. To schedule this, go to Settings → API and enable the Workflow API. Then create a recursive schedule: at the end of the refresh-feeds workflow, add Schedule API Workflow to run refresh-feeds again after your desired interval (e.g., Current date/time + hours: 1 for hourly refreshes). Add a termination condition to prevent infinite loops.

**Expected result:** Your app automatically fetches new RSS items at regular intervals without any manual trigger.

### 5. Add feed management for multiple sources

Create a Data Type called FeedSource with fields: name (text), url (text), category (text), and is_active (yes/no). Build a simple admin page where you can add, edit, and deactivate feed sources. Update your refresh-feeds backend workflow to iterate through all active FeedSources (Do a search for FeedSources where is_active = yes) and fetch each one. On the reader page, add a Dropdown or tab bar that filters FeedItems by feed_source.

**Expected result:** You can manage multiple RSS feed sources from an admin page, and users can filter articles by source or category.

## Complete code example

File: `Workflow summary`

```text
RSS READER WORKFLOW SUMMARY
===========================

API CONNECTOR SETUP:
  API Name: RSS Feed
  Call Name: Get Feed
  Method: GET
  URL: https://api.rss2json.com/v1/api.json?rss_url=[feed_url]
  Parameter: feed_url (URL, not private, dynamic)
  Use as: Data

DATA TYPES:
  FeedSource
    - name (text)
    - url (text)
    - category (text)
    - is_active (yes/no, default yes)

  FeedItem
    - title (text)
    - link (text)
    - description (text)
    - thumbnail (text)
    - pub_date (date)
    - feed_source (text)
    - is_read (yes/no, default no)

PAGE ELEMENTS:
  - Dropdown: Filter by feed source
  - Repeating Group: FeedItems
    Data source: Do a search for FeedItems
      Constraint: feed_source = Dropdown's value (ignore empty)
      Sort: pub_date descending
  - Cell contents: title, pub_date, description, thumbnail, link

WORKFLOW 1: Mark as Read
  Event: When article link is clicked
  Action: Make changes to Current cell's FeedItem
    is_read = yes

BACKEND WORKFLOW: refresh-feeds
  Triggered: Recurring schedule (every 1 hour)
  Step 1: Search for FeedSources where is_active = yes
  Step 2: For each source, call RSS Feed - Get Feed
  Step 3: For each item, check if link exists
  Step 4: If new, Create a new FeedItem
  Step 5: Schedule self to run again in 1 hour
  Termination: Always runs (managed by schedule)

ADMIN PAGE:
  - Add/edit FeedSource form
  - Toggle is_active
  - View item count per source
```

## Common mistakes

- **Trying to parse raw RSS XML directly in Bubble** — Bubble's API Connector only processes JSON responses, not XML. Raw RSS feeds return XML which causes initialization to fail. Fix: Use an RSS-to-JSON conversion service like rss2json.com or feedparser APIs that return JSON format.
- **Not checking for duplicate articles before storing** — Without deduplication, every feed refresh creates duplicate records in your database, wasting storage and confusing users Fix: Before creating a FeedItem, check if one with the same link already exists using an Only when condition.
- **Calling the RSS API directly from the Repeating Group data source on every page load** — Live API calls are slow and count toward your external API rate limits. They also fail if the service is temporarily down. Fix: Store feed items in your database and display from there. Refresh data in the background using scheduled backend workflows.

## Best practices

- Store RSS items in your database rather than fetching live on every page load for better performance
- Use a unique identifier like the article link to prevent duplicate entries during refresh
- Schedule backend workflows to refresh feeds automatically at regular intervals
- Add a feed_source field so users can filter articles by source
- Limit your Repeating Group to 10-20 items per page with pagination for better performance
- Handle API errors gracefully — if the RSS service is down, display cached items from the database
- Strip HTML tags from feed descriptions before displaying to avoid rendering issues

## Frequently asked questions

### Can Bubble read RSS feeds directly without a conversion service?

No. Bubble's API Connector only processes JSON responses. RSS feeds are XML, so you need an intermediary service like rss2json.com to convert the XML to JSON before Bubble can read it.

### How often should I refresh my RSS feeds?

For most apps, refreshing every 1-2 hours is sufficient. News-heavy apps might refresh every 15-30 minutes, but be mindful of API rate limits and workload unit consumption.

### Will fetching RSS feeds cost workload units?

Yes. Each API call and database write costs workload units. Storing items locally and reading from the database is more efficient than calling the API on every page load.

### Can I display RSS feeds from any website?

You can display any valid RSS or Atom feed. Not all websites offer RSS feeds — look for an RSS icon or check if /feed or /rss appended to the URL returns XML content.

### How do I handle feeds that include HTML in descriptions?

Use Bubble's HTML element instead of a Text element to render HTML content. If you want plain text only, use the :stripped operator on the text to remove HTML tags.

### Can RapidDev help build a more advanced content aggregator?

Yes. RapidDev can help build sophisticated content aggregation platforms with AI-powered categorization, personalized feeds based on user preferences, and integrations with multiple content sources beyond RSS.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/integrate-an-rss-reader-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/integrate-an-rss-reader-in-bubble