How to Integrate Retool with Binance API

Log into Binance and navigate to your Profile → API Management. Click 'Create API'. Choose 'System generated' for key type. Name the API key descriptively (e.g., 'Retool Portfolio Dashboard'). On the next screen, configure permissions: 'Enable Reading' is required for all dashboard use cases, 'Enable Spot & Margin Trading' is needed only if you want to place or cancel orders from Retool. For security, enable IP access restriction and add your Retool server's IP address — if using Retool Cloud, add Retool's IP ranges (35.90.103.132/30 and 44.208.168.68/30 for US region). Binance displays the API Key and Secret Key once. Copy both immediately — the Secret Key cannot be retrieved after leaving this page. Store them in Retool's configuration variables marked as secrets. For read-only dashboards, never enable withdrawal permissions on API keys used by Retool.

Create a REST API Resource in Retool for Binance's public market data. Go to Resources → Create New → REST API. Set the Base URL to 'https://api.binance.com'. Under Headers, add: 'X-MBX-APIKEY' with value '{{ retoolContext.configVars.BINANCE_API_KEY }}'. This API key header is required even for market data endpoints. The secret key is NOT added to the resource header — it is only used to generate HMAC signatures in JavaScript queries and should never appear in headers or URLs. Name the resource 'Binance API' and save. Test the connection by creating a temporary GET query to '/api/v3/ping' — a successful response returns an empty JSON object {}. Then test market data with GET '/api/v3/ticker/price?symbol=BTCUSDT' which returns the current BTC price.

1{
2  "Base URL": "https://api.binance.com",
3  "Headers": {
4    "X-MBX-APIKEY": "{{ retoolContext.configVars.BINANCE_API_KEY }}"
5  }
6}

Private Binance endpoints require HMAC-SHA256 signing. The signature is computed by concatenating all query parameters as a string and signing it with your Secret Key using HMAC-SHA256. The timestamp parameter is mandatory and must be within 5000ms of Binance's server time. In Retool, create a new JavaScript query (no resource needed) that builds the signed request. The query uses Retool's built-in utils.hmac() function (available in newer Retool versions) or the CryptoJS library available in JavaScript queries. The signature is appended as a 'signature' query parameter to the request. Then the query calls another Retool resource query with the signed parameters. This two-query pattern (sign → fetch) is the standard approach for Binance private endpoints in Retool.

1// JavaScript query: build signed Binance request
2// This query generates the HMAC signature and calls the account endpoint
3
4const apiSecret = retoolContext.configVars.BINANCE_SECRET_KEY;
5const timestamp = Date.now();
6
7// Build query string for account balances endpoint
8const queryString = `timestamp=${timestamp}&recvWindow=5000`;
9
10// Generate HMAC-SHA256 signature using CryptoJS
11// CryptoJS is available in Retool JavaScript queries
12const signature = CryptoJS.HmacSHA256(queryString, apiSecret).toString(CryptoJS.enc.Hex);
13
14// Return the complete signed URL parameters
15return {
16  queryString: queryString,
17  signature: signature,
18  timestamp: timestamp
19};

Create a second query using the Binance Resource to fetch account data, but this query depends on the signature generated in the previous step. Set the method to GET and path to '/api/v3/account'. In the query parameters section, add: 'timestamp' bound to {{ generateSignature.data.timestamp }}, 'recvWindow' set to '5000', and 'signature' bound to {{ generateSignature.data.signature }}. Set this query to run 'Manually' and configure it to trigger after the generateSignature query succeeds. The response contains a 'balances' array where each item has 'asset' (coin symbol), 'free' (available balance), and 'locked' (in open orders). Add a transformer to filter out zero balances and enrich each asset with current USD price by joining with a price ticker query.

1// GET /api/v3/account
2// Query parameters:
3// timestamp: {{ generateSignature.data.timestamp }}
4// recvWindow: 5000
5// signature: {{ generateSignature.data.signature }}
6
7// Transformer: filter and format account balances
8const balances = data.balances || [];
9const nonZero = balances.filter(b =>
10  parseFloat(b.free) > 0 || parseFloat(b.locked) > 0
11);
12
13return nonZero.map(b => ({
14  asset: b.asset,
15  free: parseFloat(b.free),
16  locked: parseFloat(b.locked),
17  total: parseFloat(b.free) + parseFloat(b.locked)
18})).sort((a, b) => b.total - a.total);

Create a public (unsigned) query to fetch all current prices from Binance. Use GET method with path '/api/v3/ticker/price' and no query parameters — this returns prices for all trading pairs. The response is an array of {symbol, price} objects. In a JavaScript query, join the account balances with prices to calculate USD value for each asset. Create a portfolio summary object with total USD value and per-asset allocation percentages. Bind a Pie Chart component to the allocation data and display the total portfolio value as a Statistic component. Add a 24-hour change chart using the /api/v3/ticker/24hr endpoint which includes priceChangePercent for each symbol.

1// JavaScript query: calculate portfolio USD values
2// Depends on: getAccountBalances.data and getPrices.data
3
4const balances = getAccountBalances.data || [];
5const prices = getPrices.data || [];
6
7// Build price lookup map (only USDT pairs)
8const priceMap = {};
9prices.forEach(p => {
10  if (p.symbol.endsWith('USDT')) {
11    const asset = p.symbol.replace('USDT', '');
12    priceMap[asset] = parseFloat(p.price);
13  }
14});
15// Stablecoins
16['USDT', 'BUSD', 'USDC', 'DAI'].forEach(s => priceMap[s] = 1);
17
18const portfolio = balances.map(b => ({
19  asset: b.asset,
20  total: b.total,
21  usd_price: priceMap[b.asset] || 0,
22  usd_value: b.total * (priceMap[b.asset] || 0)
23})).filter(b => b.usd_value > 0.01);
24
25const totalUSD = portfolio.reduce((sum, b) => sum + b.usd_value, 0);
26
27return portfolio.map(b => ({
28  ...b,
29  usd_value: `$${b.usd_value.toFixed(2)}`,
30  allocation_pct: totalUSD > 0
31    ? `${((b.usd_value / totalUSD) * 100).toFixed(1)}%`
32    : '0%'
33})).sort((a, b) => parseFloat(b.usd_value.slice(1)) - parseFloat(a.usd_value.slice(1)));