How to build a weather forecast app in Bubble

You build a weather forecast app in Bubble by creating a page where the user enters a city, calling a real weather API (like OpenWeather) through the API Connector, and displaying the returned data (temperature, conditions, icon) in text elements or repeating groups. The core is: set up the API call, expose it as “Get data from an external API”, then bind the returned fields on the page.

What You Need

• A Bubble page with an Input for the city name
• The API Connector plugin installed
• An API key from a real weather service (OpenWeather is simple)

Set Up the Weather API

In the API Connector, create a call. This is a real OpenWeather example for current weather:

{
  "method": "GET",
  "url": "https://api.openweathermap.org/data/2.5/weather?q=<city>&units=metric&appid=YOUR_API_KEY"
}

In Bubble, define as a shared header/parameter using “q” as a key. Mark the call as Use as: Data so you can reference it directly on the page.

Build the UI

• Add an Input City.
• Add a Button “Get forecast”.
• Add Text elements for temperature, humidity, description.

Run the API and Display Data

Create a workflow on the button:

• Action: Display data in group. The data source of the group: Get data from an external API → your weather call with q = Input City’s value.

Inside the group, set text elements to fields from the API response, like Current Weather’s main.temp or weather:first item.description.

Optional: Show Forecast

• Use OpenWeather’s forecast endpoint (5‑day/3‑hour).
• Return a list of items and display them in a Repeating Group.

{
  "method": "GET",
  "url": "https://api.openweathermap.org/data/2.5/forecast?q=<city>&units=metric&appid=YOUR_API_KEY"
}

This gives you a fully working weather app: user enters city, Bubble calls the API, and the page displays live weather info.