Build an Astrology Birth Chart App on Bubble with No Code

About the author: Brett Calloway is a Developer Advocate and AI Integration Specialist with 12 years of experience building APIs and developer tooling, including three years focused on AI-native infrastructure for spiritual and wellness applications. He has led developer relations at two Series B SaaS companies and spoken at PyCon and JSConf on building context-rich AI agents using Model Context Protocol. His writing covers API integration patterns, AI agent architecture, and rapid prototyping with astrology, tarot, and numerology data.

Astrology apps are one of the most popular categories in the wellness space, but building a natal chart calculator from scratch requires serious domain knowledge. You need planetary ephemeris data, house system calculations, aspect geometry, and timezone handling. Most developers spend weeks wiring this together before they can show a single chart to a user.

What if you could skip all of that? With Bubble and a birth chart API, you can build a fully functional natal chart app without writing a single line of code. This guide walks you through every step, from installing the API Connector plugin to displaying planetary positions and zodiac signs on screen. By the end, you will have a working app that takes a birth date, time, and location, then returns a complete astrological birth chart with houses, aspects, and interpretations.

What you will build

This tutorial produces a Bubble app with a birth data form, a city search feature, and a natal chart results page. Users enter their birth date, birth time, and birth city. The app calls the RoxyAPI Location API to resolve the city into coordinates and a timezone offset. Then it sends those values to the Western Astrology API natal chart endpoint, which returns planetary positions in zodiac signs, house placements, aspects between planets, the Ascendant (rising sign), and the Midheaven. All of this data gets mapped to Bubble elements: repeating groups for planets, text fields for the Ascendant sign, and grouped lists for aspects. The finished app handles the full flow from user input to chart display, with no backend code or server configuration required.

Ready to build this? RoxyAPI Western Astrology API gives you natal charts, horoscopes, synastry, and transits in a single API. See pricing.

Prerequisites

You need two things before you start. First, a free Bubble account at bubble.io. The free tier includes the API Connector plugin and enough capacity to build and test your app. You do not need a paid Bubble plan for this tutorial. Second, you need a RoxyAPI API key. Visit the pricing page and choose any plan. Your API key is delivered instantly by email, and it works across all RoxyAPI endpoints with a single subscription. No separate activation is needed for the astrology or location endpoints. Make sure you have your API key ready before moving to the next step. You will paste it into the API Connector header configuration. Keep it private and never expose it in client-side code. Bubble handles this correctly when you use the "Private key in header" authentication method.

Step 1: Install the API Connector plugin

Open your Bubble app editor and navigate to the Plugins tab in the left sidebar. Click "Add plugins" and search for "API Connector" in the plugin store. This plugin is built and maintained by the Bubble team, so it appears near the top of results. Click Install. Once installed, the API Connector appears in your Plugins list. Click on it to open the configuration panel. You will set up two API services here: one for city search (location) and one for the natal chart calculation. Click "Add another API" to create your first service. Name it "RoxyAPI Location" for the city search calls. You will add a second service called "RoxyAPI Astrology" for the birth chart endpoint. Each service gets its own authentication and base URL configuration, which keeps your setup organized and easy to maintain.

Step 2: Configure the Location API call

Start with the location service. Under Authentication, select "Private key in header" and set the key name to X-API-Key. Paste your RoxyAPI API key in the value field. This ensures the key travels server-side and never appears in your Bubble app source code. Now add your first API call. Name it "Search Cities" and set Use as to "Data" since you want to display search results. Set the HTTP method to GET and enter this URL:

https://roxyapi.com/api/v2/location/search?q=[city_name]

The [city_name] part is a dynamic parameter. Bubble treats anything in square brackets as a parameter you can fill from your app. In the Parameters section below, you will see city_name listed automatically. Set its type to text and mark it as not private. Enter a test value like "London" in the value field. This test value is used only during initialization. Click "Initialize call" to test. You should see a JSON response with matching cities, each containing latitude, longitude, utcOffset, and city fields.

Step 3: Configure the Natal Chart API call

Now create the second API service. Click "Add another API" and name it "RoxyAPI Astrology". Set authentication to "Private key in header" with key name X-API-Key and paste the same API key. Add a new call named "Generate Natal Chart". Set Use as to "Action" since this call runs when the user clicks a button. Set the HTTP method to POST. Enter this URL:

https://roxyapi.com/api/v2/astrology/natal-chart

Under Headers, add a shared header with key Content-Type and value application/json. In the Body section, select JSON and enter this template:

{
  "date": "<date>",
  "time": "<time>",
  "latitude": <latitude>,
  "longitude": <longitude>,
  "timezone": <timezone>
}

Each value in angle brackets becomes a dynamic parameter. Set date type to text (format YYYY-MM-DD), time to text (format HH:MM:SS), and latitude, longitude, timezone to numbers. Enter test values: date 1990-07-15, time 14:30:00, latitude 40.7128, longitude -74.006, timezone -5. These match New York City, Eastern Standard Time.

Step 4: Initialize the call and verify the response

Click "Initialize call" on the natal chart configuration. Bubble sends the actual POST request to RoxyAPI and displays the response. A successful response returns a JSON object with these top-level fields:

{
  "birthDetails": {
    "date": "1990-07-15",
    "time": "14:30:00",
    "latitude": 40.7128,
    "longitude": -74.006,
    "timezone": -5
  },
  "planets": [
    {
      "name": "Sun",
      "longitude": 113.05,
      "sign": "cancer",
      "degree": 23.05,
      "speed": 0.95,
      "isRetrograde": false,
      "house": 8,
      "interpretation": {
        "summary": "Your Sun in Cancer in The Eighth House reveals how you express Self-awareness and ego with intuitive and emotional energy in the realm of transformation and crisis.",
        "detailed": "Sun represents Self-awareness and ego. In Cancer (Crab), this energy becomes intuitive, nurturing, protective...",
        "keywords": ["active", "awareness", "confidence", "intuitive", "emotional"]
      }
    }
  ],
  "houses": [
    { "number": 1, "longitude": 228.71, "sign": "scorpio", "degree": 18.71 }
  ],
  "aspects": [
    {
      "planet1": "Sun",
      "planet2": "Moon",
      "type": "TRINE",
      "angle": 120,
      "orb": 2.5,
      "isApplying": false,
      "strength": 75,
      "interpretation": "harmonious"
    }
  ],
  "ascendant": { "longitude": 228.71, "sign": "scorpio", "degree": 18.71 },
  "midheaven": { "longitude": 149.78, "sign": "leo", "degree": 29.78 },
  "summary": {
    "dominantElement": "Earth",
    "dominantModality": "Cardinal",
    "retrogradePlanets": ["Saturn", "Uranus", "Neptune", "Pluto"],
    "elementDistribution": { "Fire": 3, "Earth": 4, "Air": 2, "Water": 4 },
    "modalityDistribution": { "Cardinal": 7, "Fixed": 5, "Mutable": 1 }
  }
}

Bubble parses this automatically and creates a typed data structure you can reference anywhere in your app. If the call fails, check that your Content-Type header is set to application/json and that your API key is valid. Explore the API reference for the full response schema.

Step 5: Build the user interface

Switch to the Design tab in Bubble. Create a page called "birth-chart" and add these input elements: a Date Picker for birth date, an Input field for birth time (placeholder: "14:30:00"), and a Searchbox connected to your "Search Cities" API data source. The Searchbox is powerful here. Set its data source type to "Search Cities" from the API Connector. Map the search query to the city_name parameter. As users type a city name, Bubble fires the location API call and populates a dropdown with results. Configure the Searchbox to display city and country from each result. Add a Button labeled "Generate Chart" and a Group element below to hold the results. Inside the results group, add a Repeating Group for planets, text elements for the Ascendant sign and Midheaven sign, and another Repeating Group for aspects.

Step 6: Connect workflows and map response fields

Select the "Generate Chart" button and open the Workflow editor. Add a new event: "When Button Generate Chart is clicked". Add the action "Plugins > RoxyAPI Astrology - Generate Natal Chart". Map each parameter from your UI elements. Set date to the Date Picker value formatted as YYYY-MM-DD. Set time to the time Input value. Set latitude to the Searchbox selected city latitude field. Set longitude to the Searchbox selected city longitude field. Set timezone to the Searchbox selected city utcOffset field. After the API action, add a "Display data" action to send the response to your results Group. In the results Group, set the Repeating Group data source to "Result of Step 1 planets". Inside each cell, map text elements to name, sign, degree, house, and isRetrograde. For the Ascendant, set a text element to "Result of Step 1 ascendant sign". For the Midheaven, use "Result of Step 1 midheaven sign".

Common pitfalls and how to fix them

Several issues come up frequently when connecting APIs in Bubble. Note that zodiac sign values in the response are lowercase (for example, cancer not Cancer). If you display them in your UI, use Bubble's :capitalize text operator to format them. The most common error is forgetting the Content-Type: application/json header on POST requests. Without it, the server cannot parse your JSON body and returns a 400 error. Always add this as a shared header on any service that uses POST. Another frequent mistake is sending the birth time in HH:MM format instead of HH:MM:SS. The natal chart endpoint requires seconds, so always include them (use "14:30:00" not "14:30"). The X-API-Key header name is case-sensitive in some configurations. Make sure you type it exactly as shown. Finally, remember that timezone is a decimal number representing hours offset from UTC, not a timezone name. India Standard Time is 5.5, not 5:30 or IST. The location search endpoint returns this value as utcOffset, ready to pass directly to the natal chart call.

Frequently Asked Questions

Q: Do I need coding experience to build an astrology app on Bubble? A: No. Bubble is a visual development platform where you build applications by dragging elements and configuring workflows. The API Connector handles all communication with RoxyAPI. You do not write any code, parse any JSON manually, or manage any server infrastructure.

Q: What astrology data does the natal chart endpoint return? A: The POST request to /api/v2/astrology/natal-chart returns planetary positions with zodiac signs and house placements, all 12 house cusps, aspects between planets with orb and strength values, the Ascendant (rising sign), Midheaven, dominant element and modality, and retrograde status for each planet. Interpretations are included for each planetary placement.

Q: How does the city search connect to the birth chart calculation? A: The Location API search endpoint returns latitude, longitude, and utcOffset for each city result. These three values map directly to the latitude, longitude, and timezone parameters required by the natal chart endpoint. Bubble passes them from the Searchbox selection to the API call parameters in the workflow.

Q: Does Bubble expose my API key to users? A: Not when configured correctly. Use the "Private key in header" authentication method in the API Connector. This sends the API key from the Bubble server, not the browser. Never store API keys in Option Sets or page elements, as those are visible in client-side source code.

Q: Can I add horoscopes and compatibility to the same app? A: Yes. RoxyAPI covers daily, weekly, and monthly horoscopes, synastry compatibility scores, composite charts, transits, and more, all under the same API key. Add new API calls in the API Connector for each endpoint you want to use. One subscription covers all 120+ endpoints across 8 domains.

Next steps

You now have a working astrology birth chart app built entirely on Bubble with no code. The app takes birth details, resolves a city to coordinates, and returns a complete natal chart with planets, houses, aspects, and interpretations. From here, you can extend it with daily horoscopes, compatibility scoring, or transit tracking, all available through the same API key.

Start building with the Western Astrology API. Plans start at $39 per month with instant activation and no account required. Visit the pricing page to get your API key.