How to Integrate Retool with Realtor.com

Navigate to rapidapi.com and search for 'Realtor' in the marketplace search bar. You will find several results — look for the official Realtor.com Real Estate API or similar highly-rated listing APIs (there are multiple providers offering Realtor.com data). Compare pricing plans and data freshness claims. Select the API that fits your use case — the free Basic tier on most Realtor.com API listings provides several hundred monthly calls, sufficient for testing and low-volume internal tools. Click Subscribe to Plan on your chosen plan and confirm the subscription. After subscribing, click on the API's Endpoints tab to browse available endpoints: you will typically see endpoints for property search (for-sale listings), sold listings, property detail by property ID or MLS number, agent search, and market statistics. Click on the property search endpoint and find the Code Snippets panel on the right side of the page. Select the Shell or JavaScript tab. You will see two critical values: X-RapidAPI-Key (your account-wide API key) and X-RapidAPI-Host (the host for this specific API, such as realtor.p.rapidapi.com). Copy both values and also note the full request URL shown in the curl example — the base URL is the host with https://, and the path after the host is the endpoint path you will use in Retool queries. Test the endpoint directly in the RapidAPI playground by entering sample values and clicking the Test Endpoint button to see the live response structure.

In Retool, click the Resources tab in the left sidebar, then click Add Resource. Select REST API from the resource type list. In the Name field, enter Realtor.com API (or a more specific name like RapidAPI - Realtor.com to make it clear this goes through RapidAPI). In the Base URL field, enter https://realtor.p.rapidapi.com — replace with the actual host value if your chosen API uses a different host. In the Headers section, you need to add two headers that RapidAPI requires for every request. Click Add Header for the first header: set Name to X-RapidAPI-Key and Value to the API key you copied from RapidAPI. For security, store the API key as a Retool configuration variable first: go to Settings → Configuration Variables in the left sidebar, click Add variable, name it RAPIDAPI_KEY, paste the key as the value, and check Mark as secret. Then return to the Resource and set the X-RapidAPI-Key value to {{ config.RAPIDAPI_KEY }}. Click Add Header for the second header: set Name to X-RapidAPI-Host and Value to realtor.p.rapidapi.com (the plain domain, without https://). This host header is critical — it tells the RapidAPI gateway which API to route your request to. Do not add a default Authorization header; RapidAPI uses custom headers rather than standard Bearer auth. Click Save to save the Resource. You are now ready to create queries that target this Resource.

In your Retool app, open the Code panel and click Create new query. Select the Realtor.com API Resource you created. Set Method to GET. In the Path field, enter the endpoint path for property search — this varies by API but is typically /properties/v3/list or /for-sale. Check your specific API's endpoint documentation on RapidAPI for the exact path. In the URL Parameters section, add the parameters for the search. Most Realtor.com APIs require at minimum a location parameter — typically city and state_code, or a postal_code. Add the following parameters and set their values to reference Retool components: postal_code → {{ zipInput.value }}, price_min → {{ priceMinInput.value || 0 }}, price_max → {{ priceMaxInput.value || 5000000 }}, beds_min → {{ bedsSelect.value || 1 }}, property_type → {{ propertyTypeSelect.value || 'single_family' }}, limit → 50, offset → {{ (pagination.page - 1) * 50 }}. You will add the input components (zipInput, priceMinInput, etc.) to the canvas in the next step. Set Run this query on page load to off — it should only run when the user clicks a Search button. Add the query. The Realtor.com API response is deeply nested; the actual listings array is typically inside a path like data.home_search.results or data.properties — run the query with a test zip code to check the exact path, then build your transformer.

1// JavaScript transformer for Realtor.com property search results
2// Adjust property paths based on your specific API version's response structure
3const raw = data;
4
5// Common response paths — try each if results is empty:
6// data.data?.home_search?.results
7// data.data?.properties
8// data.properties
9// data.results
10const listings = raw?.data?.home_search?.results
11  || raw?.data?.properties
12  || raw?.properties
13  || raw?.results
14  || [];
15
16return listings.map(item => {
17  const desc = item.description || {};
18  const loc = item.location?.address || {};
19  const price = item.list_price || item.price || 0;
20
21  return {
22    property_id: item.property_id || '',
23    address: loc.line || item.address?.line || 'N/A',
24    city: loc.city || item.address?.city || '',
25    state: loc.state_code || item.address?.state_code || '',
26    zip: loc.postal_code || item.address?.postal_code || '',
27    price: price ? `$${Number(price).toLocaleString()}` : 'N/A',
28    price_raw: price,
29    beds: desc.beds || item.beds || 0,
30    baths: desc.baths || item.baths || 0,
31    sqft: desc.sqft ? Number(desc.sqft).toLocaleString() : 'N/A',
32    price_per_sqft: (price && desc.sqft)
33      ? `$${Math.round(price / desc.sqft).toLocaleString()}`
34      : 'N/A',
35    status: item.status || 'for_sale',
36    days_on_market: item.list_date
37      ? Math.floor((Date.now() - new Date(item.list_date)) / 86400000)
38      : 'N/A',
39    listing_url: item.href || `https://www.realtor.com/realestateandhomes-detail/${item.property_id}`,
40    thumbnail: item.primary_photo?.href || ''
41  };
42});

With the query working, build the search UI. At the top of the canvas, add a row of filter components inside a Container. Add a Text Input named zipInput with placeholder 'Enter zip code'. Add two Number Input components named priceMinInput (labeled 'Min Price') and priceMaxInput (labeled 'Max Price'). Add a Select component named bedsSelect with options for 1, 2, 3, 4, 5+ bedrooms. Add a Select component named propertyTypeSelect with options for Single Family, Condo, Townhouse, Multi-Family. Add a Button labeled Search Properties with an event handler set to Trigger query → propertySearchQuery. Below the filter row, drag a Table component onto the canvas. Set its Data source to {{ propertySearchQuery.data }}. Configure columns: Address (text), Price (the formatted price string), Beds (number), Baths (number), Sqft (number), Days on Market (number), Status (tag with green for active, yellow for contingent). Enable sorting on the Price and Days on Market columns. Add a Row click event handler on the Table set to Trigger query → propertyDetailQuery (which fetches full property details for the selected row's property_id). On the right side of the canvas, add a Container or Drawer for the property detail view. Bind it to show when {{ propertyTable.selectedRow !== null }}. Inside, add text fields for full address, description, agent information, and a Button labeled View on Realtor.com that opens {{ propertyTable.selectedRow.listing_url }} in a new tab. Add a Stat component above the Table showing the count of results: {{ propertySearchQuery.data.length }} listings found.

Enhance the dashboard by adding neighborhood market context alongside the listings. Check if your RapidAPI subscription includes a market statistics or neighborhood data endpoint — many Realtor.com API providers include endpoints for median list price, days on market average, and price per sqft trends by zip code. Create a second query targeting a market stats endpoint using the same zipInput.value. This query can be set to Run automatically when zipInput.value changes (with a debounce of 500ms to avoid firing on every keystroke) to update the market summary whenever the zip code changes. Add Stat components at the top of the dashboard showing: Median Price, Average Days on Market, Number of Active Listings — all sourced from the market stats query. For the comparison functionality, add a second Table below the main listings Table showing recently sold properties — create a third query targeting a sold listings endpoint with the same zip code filter. Add a Button labeled Export to CSV that triggers Retool's built-in CSV export on the listings table (Table component → Actions → Download CSV). For teams that need to combine this listing data with internal client preference databases or CRM records, configure a parallel PostgreSQL query that fetches active buyer profiles and their saved search criteria, then use a JavaScript transformer to flag listings that match any client's criteria with a highlight color in the Table's conditional formatting.

1// JavaScript transformer for market statistics from the API
2// Normalize market stats data for Stat components
3const stats = data?.data?.market_statistics
4  || data?.statistics
5  || data?.market_data
6  || {};
7
8return {
9  median_price: stats.median_list_price
10    ? `$${Number(stats.median_list_price).toLocaleString()}`
11    : 'N/A',
12  median_dom: stats.median_days_on_market
13    ? `${stats.median_days_on_market} days`
14    : 'N/A',
15  active_count: stats.active_listing_count
16    || stats.total_listings
17    || 'N/A',
18  median_ppsf: stats.median_price_per_sqft
19    ? `$${Math.round(stats.median_price_per_sqft)}/sqft`
20    : 'N/A',
21  month_supply: stats.months_supply
22    ? `${stats.months_supply} months`
23    : 'N/A'
24};