How to Integrate Retool with Mixpanel

Mixpanel uses service accounts for programmatic API access. Service accounts are separate from personal user accounts and can be scoped to specific projects, making them the correct authentication method for Retool integrations. Log into Mixpanel and navigate to Settings (gear icon, top-right). Go to Project Settings → Service Accounts. Click Add Service Account. Enter a name like 'Retool Integration', select the access level (Analyst is sufficient for read-only dashboards), and specify which projects this account can access. Click Create. Mixpanel shows you the service account's username (format: projectname.serviceaccount@serviceaccounts.mixpanel.com) and a generated secret password. Copy both immediately — the password is only shown once. The service account username and password are what you will use for Basic Auth in the Retool resource. Also note your project's Project ID from Settings → Project Settings → Overview. The Project ID is a numeric identifier (not the project name or token) that appears in API URL paths and query parameters. For the Query API, you will also need the Project Token — this is different from the Project ID and is used in some request bodies. For the Mixpanel Query API's base URL, you will use: https://mixpanel.com/api/query (for the standard endpoints) or https://mixpanel.com/api/2.0 (for older API versions). The JQL endpoint is: https://mixpanel.com/api/jql.

Open Retool and navigate to the Resources tab. Click Add Resource and select REST API from the list. Configure the resource: - Name: 'Mixpanel Analytics' - Base URL: https://mixpanel.com/api/query For authentication, select Basic Auth from the Auth dropdown: - Username: your service account's full email/username (e.g., myproject.retool@serviceaccounts.mixpanel.com) - Password: the service account secret password Add a default header for all requests: - Key: Accept - Value: application/json Click Save Changes. To verify the connection, create a test query in a Retool app using this resource: - Method: GET - Path: /events - Add URL parameters: project_id: {{ YOUR_PROJECT_ID }}, from_date: {{ new Date(Date.now() - 7*24*60*60*1000).toISOString().split('T')[0] }}, to_date: {{ new Date().toISOString().split('T')[0] }}, event: ["page_view"] (replace with an actual event name from your Mixpanel project) Click Run. If successful, you'll see a response object with date-keyed event count data. If you get a 400 error, verify the project_id parameter matches your numeric Mixpanel Project ID (not the project token or name).

With the resource configured, build your first analytics query. The Mixpanel Event Segmentation endpoint (/events/general) returns event counts broken down by day or hour, with optional property filters. Create a new query using the Mixpanel resource: - Method: GET - Path: /events/general - URL Parameters: - project_id: {{ YOUR_PROJECT_ID }} (your numeric project ID) - from_date: {{ dateRangePicker.startDate }} (reference a DateRangePicker component) - to_date: {{ dateRangePicker.endDate }} - event: {{ JSON.stringify([eventSelect.value]) }} (selected event from a dropdown) - unit: day - type: general Mixpanel's response format has nested date keys: data.values returns an object where keys are event names and values are objects with date strings as keys and counts as values. You need a transformer to flatten this into an array suitable for Retool's Chart component. Add a transformer that converts the nested Mixpanel response into an array of { date, count } objects for chart binding. Add a Chart component, set its type to Line, and bind it to the transformer's output. Set the X-axis to the date field and Y-axis to the count field.

1// JavaScript transformer for Mixpanel event segmentation response
2// Mixpanel returns nested objects: response.data.values.{eventName}.{date} = count
3const response = data;
4const eventData = response?.data?.values || {};
5
6// Extract the first event's data (or handle multiple events)
7const eventNames = Object.keys(eventData);
8if (eventNames.length === 0) return [];
9
10// Flatten into chart-ready array
11const firstEvent = eventNames[0];
12const dailyCounts = eventData[firstEvent] || {};
13
14return Object.entries(dailyCounts)
15  .map(([date, count]) => ({
16    date: date,
17    count: count,
18    event: firstEvent
19  }))
20  .sort((a, b) => new Date(a.date) - new Date(b.date));
21
22// For multiple events in one chart, use this pattern instead:
23// return eventNames.flatMap(eventName =>
24//   Object.entries(eventData[eventName] || {})
25//     .map(([date, count]) => ({ date, count, event: eventName }))
26// ).sort((a, b) => new Date(a.date) - new Date(b.date));

Mixpanel's Funnels endpoint returns conversion data for defined funnel sequences. You need to reference the funnel by its Mixpanel funnel ID, which you can find in the Mixpanel web app under the Funnels report URL (the numeric ID in the URL: /project/123/view/456/funnels/789). Create a new query: - Method: GET - Path: /funnels - URL Parameters: - project_id: {{ YOUR_PROJECT_ID }} - funnel_id: {{ funnelIdInput.value }} (or hard-code if using a specific funnel) - from_date: {{ dateRangePicker.startDate }} - to_date: {{ dateRangePicker.endDate }} - unit: week (options: day, week, month) The funnel response has a nested structure: data contains an object with funnel analysis data, including step-by-step counts and conversion rates. Write a transformer to extract the step names, entry counts, and conversion rates. Alternatively, for ad-hoc funnel definitions without a saved Mixpanel funnel, you can use JQL to define a funnel inline. Create a second query using the JQL endpoint (https://mixpanel.com/api/jql as the resource base URL, or add a second Mixpanel resource for JQL) — the JQL approach is more flexible but requires knowledge of Mixpanel's JQL syntax. Bind the funnel data to a Table component showing each step, number of users who reached it, and the conversion rate. Add a Bar Chart showing conversion rates per step for visual comparison. For complex multi-funnel dashboards, RapidDev can help build reusable transformer functions that normalize Mixpanel's varied response formats across different API endpoints.

1// JavaScript transformer for Mixpanel Funnels API response
2// Extracts step-level conversion data from the funnel response
3const response = data;
4
5// The funnel response structure varies - inspect data.meta for step names
6const stepNames = response?.meta?.dates || [];
7const funnelData = response?.data || {};
8
9// Handle the standard funnel response format
10if (response?.data?.steps) {
11  return response.data.steps.map((step, index) => ({
12    step_number: index + 1,
13    step_name: step.event || step.step_label || 'Step ' + (index + 1),
14    count: step.count || 0,
15    conversion_from_first: step.count && response.data.steps[0].count
16      ? ((step.count / response.data.steps[0].count) * 100).toFixed(1) + '%'
17      : '0%',
18    conversion_from_prev: (index > 0 && step.count && response.data.steps[index-1].count)
19      ? ((step.count / response.data.steps[index-1].count) * 100).toFixed(1) + '%'
20      : index === 0 ? '100%' : '0%'
21  }));
22}
23
24return [];

The most powerful use of Retool's multi-resource capability is combining Mixpanel behavioral data with your internal database records. This requires two separate queries and a JavaScript transformer to join them. First, configure your Mixpanel query to fetch data for users that match the search criteria. Use Mixpanel's Engage API (/engage) to query user profiles by property — for example, finding all users whose email matches the search input: - Method: GET - Path: /engage - URL Parameters: - project_id: {{ YOUR_PROJECT_ID }} - where: properties["$email"] == "{{ userEmailSearch.value }}" - include_all_users: true In parallel, configure a database query to fetch the same user's internal record from your database using the same email address as the search key. Create a JavaScript query (no resource required) that combines both results. This query references the outputs of both the Mixpanel query and the database query, joins them by email or distinct_id, and returns an enriched object with fields from both sources. Bind the enriched object to profile display components in your Retool app: the left column shows database fields (account tier, creation date, subscription status, support ticket count), and the right column shows Mixpanel properties (last seen, total events, key feature usage counts).

1// JavaScript query to join Mixpanel user profile with internal database record
2// This query has no resource - it combines two other query results
3
4const mixpanelUser = mixpanelEngageQuery.data?.results?.[0] || null;
5const internalUser = internalUserQuery.data?.[0] || null;
6
7if (!internalUser && !mixpanelUser) {
8  return { found: false, message: 'No user found matching that email' };
9}
10
11// Extract Mixpanel properties (stored under $properties)
12const mpProps = mixpanelUser?.['$properties'] || {};
13
14return {
15  found: true,
16  // Internal database fields
17  account_id: internalUser?.id || null,
18  account_tier: internalUser?.plan_tier || 'Unknown',
19  created_at: internalUser?.created_at
20    ? new Date(internalUser.created_at).toLocaleDateString()
21    : 'Unknown',
22  support_tickets: internalUser?.support_ticket_count || 0,
23  
24  // Mixpanel behavioral data
25  last_seen: mpProps['$last_seen']
26    ? new Date(mpProps['$last_seen']).toLocaleDateString()
27    : 'Never tracked',
28  total_events_30d: mpProps['total_events_30d'] || 0,
29  key_feature_used: mpProps['used_key_feature'] || false,
30  country: mpProps['$country_code'] || '',
31  
32  // Cross-referenced insight
33  churn_risk: internalUser?.plan_tier === 'free' && (!mpProps['$last_seen'] 
34    || Date.now() - new Date(mpProps['$last_seen']) > 14 * 24 * 60 * 60 * 1000)
35    ? 'High' : 'Low'
36};