How to Integrate Retool with Clockify

In Clockify, click your profile avatar (top-right corner) → Profile Settings. Scroll down to the API section. Click Generate next to the API key field. A long alphanumeric API key appears — copy it immediately. Clockify's API key is a personal token that provides access to all workspaces your account belongs to. The key does not expire automatically but can be regenerated if needed (regenerating invalidates the old key). There's one API key per Clockify account — if you need separate API access for different teams or projects, you'll need separate Clockify accounts. Note your workspace ID as well — you'll need it for most Clockify API calls. Find it by logging into Clockify and looking at the URL after /workspaces/: the alphanumeric string in the URL is your workspace ID. Alternatively, call the /workspaces endpoint after configuring the Retool resource to retrieve it programmatically. Clockify's API base URL is https://api.clockify.me/api/v1. Note that Clockify also has a separate Reports API at https://reports.api.clockify.me/v1 for detailed time entry reports with advanced filtering and aggregation — this is a separate endpoint with the same API key authentication.

In Retool, navigate to the Resources tab and click Add Resource. Select REST API. Configure the resource: - Name: Clockify API - Base URL: https://api.clockify.me/api/v1 Clockify uses a custom header for authentication — not standard Bearer Token or Basic Auth. Select None under Authentication (or use the Custom/Header option if available in your Retool version). Instead, add the API key as a custom header: Click Add Header: - Key: X-Api-Key - Value: your Clockify API key (or {{ retoolContext.configVars.CLOCKIFY_API_KEY }} if stored in Configuration Variables) Also add: - Key: Content-Type, Value: application/json - Key: Accept, Value: application/json Click Create Resource. Test the connection by creating a query with method GET and path /workspaces. If it returns an array of workspace objects (each with an id and name), authentication is working. A 401 response indicates the X-Api-Key header is missing or the key is incorrect. Optionally create a second resource named 'Clockify Reports API' with base URL https://reports.api.clockify.me/v1 and the same X-Api-Key header — this gives you access to the pre-aggregated reporting endpoints.

Create foundational queries to populate your dashboard's filter dropdowns and reference data. getWorkspaceId: GET /workspaces — returns all workspaces. Store the first workspace's ID as a Retool variable: workspaceIdVar.setValue(getWorkspaces.data[0].id). Or hardcode your workspace ID in subsequent queries if you only have one workspace. getProjects: GET /workspaces/{{ workspaceIdVar.value }}/projects with parameters: - archived: false (filter to active projects only) - page-size: 100 - page: 1 Each project has: id, name, clientId, duration (total tracked duration), estimate (budget), color, memberships, and billable flag. getClients: GET /workspaces/{{ workspaceIdVar.value }}/clients with page-size: 100. Returns all clients with id and name. getUsers: GET /workspaces/{{ workspaceIdVar.value }}/users with page-size: 100. Returns team members with id, name, email, and status (ACTIVE/PENDING/INACTIVE). getTags: GET /workspaces/{{ workspaceIdVar.value }}/tags — returns all tags used for categorizing time entries. Bind these to Select or MultiSelect components to enable filtering in the main time entry queries. Create lookup objects in transformers that map IDs to names (project ID → project name, user ID → user name) for display in Tables.

1// Transformer to build project lookup map
2const projects = data || [];
3// Create lookup object: { 'projectId': 'Project Name' }
4const lookup = {};
5projects.forEach(project => {
6  lookup[project.id] = {
7    name: project.name,
8    client_id: project.clientId,
9    color: project.color,
10    billable: project.billable
11  };
12});
13return lookup;

Create a getTimeEntries query with method GET and path /workspaces/{{ workspaceIdVar.value }}/user/{{ select_user.value }}/time-entries. This fetches time entries for a specific user. For team-wide entries, use GET /workspaces/{{ workspaceIdVar.value }}/time-entries with these parameters: - start: {{ dateRange.startDate + 'T00:00:00Z' }} - end: {{ dateRange.endDate + 'T23:59:59Z' }} - project: {{ select_project.value || '' }} - users: {{ select_users.value?.join(',') || '' }} - page-size: 200 - page: {{ pagination.page || 1 }} Note: The time range parameters use ISO 8601 format with timezone suffix. Each time entry includes: id, description, userId, projectId, taskId, tagIds (array), billable (boolean), timeInterval (start, end, duration strings in ISO 8601 duration format). The duration is in ISO 8601 duration format (e.g., 'PT2H30M' = 2 hours 30 minutes). Parse this in your transformer: extract hours and minutes using regex or the string format. Create a transformer that joins time entries with the project and user lookup maps to show human-readable names instead of IDs, and converts ISO 8601 durations to decimal hours for calculation.

1// Transformer for Clockify time entries
2const entries = data || [];
3const projectLookup = getProjectLookup.data || {};
4const userLookup = getUserLookup.data || {};
5
6// Parse ISO 8601 duration to decimal hours
7function parseDuration(isoDuration) {
8  if (!isoDuration) return 0;
9  const match = isoDuration.match(/PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?/);
10  if (!match) return 0;
11  const hours = parseInt(match[1] || 0);
12  const minutes = parseInt(match[2] || 0);
13  const seconds = parseInt(match[3] || 0);
14  return hours + minutes / 60 + seconds / 3600;
15}
16
17return entries.map(entry => {
18  const project = projectLookup[entry.projectId] || {};
19  const durationHours = parseDuration(entry.timeInterval?.duration);
20  return {
21    id: entry.id,
22    description: entry.description || '(no description)',
23    user_id: entry.userId,
24    user_name: userLookup[entry.userId] || entry.userId,
25    project_name: project.name || '(no project)',
26    billable: entry.billable ? 'Billable' : 'Non-billable',
27    start: entry.timeInterval?.start
28      ? new Date(entry.timeInterval.start).toLocaleString()
29      : '',
30    end: entry.timeInterval?.end
31      ? new Date(entry.timeInterval.end).toLocaleString()
32      : 'Running',
33    duration_hours: durationHours.toFixed(2),
34    duration_display: `${Math.floor(durationHours)}h ${Math.round((durationHours % 1) * 60)}m`
35  };
36});

For aggregated time data, use Clockify's Reports API (https://reports.api.clockify.me/v1) which provides pre-aggregated summaries much more efficiently than aggregating individual time entries in a transformer. Create a second Retool Resource named 'Clockify Reports API' with base URL https://reports.api.clockify.me/v1 and the same X-Api-Key header. Create a getSummaryReport query against this resource with method POST and path /workspaces/{{ workspaceIdVar.value }}/reports/summary. The request body specifies the aggregation: This POST endpoint accepts a JSON body defining the date range, filters, and grouping. Group by PROJECT to get hours per project, or by USER for per-person summaries. The response includes a groupOne array with each group's totalTime (in milliseconds) and totalBillableTime. Create a getDetailedReport query with method POST and path /workspaces/{{ workspaceIdVar.value }}/reports/detailed for a paginated list of all time entries with full details — more powerful than the standard time entries endpoint for reporting. Bind these report queries to Retool Chart components: a Bar chart showing hours per project, a Stat panel showing total hours and billable percentage, and a Table with the per-user breakdown. For teams needing Clockify data joined with invoice or project management data from other systems, RapidDev's team can help build multi-resource Retool dashboards that combine time tracking with financial and project data.

1// Summary report request body for Clockify Reports API
2{
3  "dateRangeStart": "{{ dateRange.startDate }}T00:00:00.000Z",
4  "dateRangeEnd": "{{ dateRange.endDate }}T23:59:59.999Z",
5  "summaryFilter": {
6    "groups": ["PROJECT", "USER"]
7  },
8  "billable": "BOTH",
9  "exportType": "JSON"
10}