How to Integrate Retool with Vimeo

Navigate to Vimeo's developer portal at https://developer.vimeo.com/apps. If you do not already have an app, click New App. Fill in the app name (e.g., 'Retool Dashboard'), description ('Internal Retool integration for video management'), and set the App URL to your Retool instance URL. Select 'I will be interacting with Vimeo's API but won't be performing any financial transactions' for the app purpose, which gives you access to standard API features without requiring app review. Once the app is created, you will land on the app's Settings page. Navigate to the Authentication tab. Here you have two options for obtaining credentials: Option A — Personal Access Token (recommended for single-account dashboards): Click Generate token in the Personal Access Tokens section. In the scope selection, check all required permissions: public (read public videos), private (read private videos), edit (update video metadata), video_files (access video files), and stats (read analytics). Click Generate. Copy the generated token immediately — it will not be displayed again. Option B — OAuth 2.0 (recommended if multiple users will authenticate with their own Vimeo accounts): Note your Client ID and Client Secret from the Authentication tab. Configure OAuth in Retool's resource using these credentials and Vimeo's authorization URL (https://api.vimeo.com/oauth/authorize) and token URL (https://api.vimeo.com/oauth/access_token). For most team dashboards, a personal access token from a shared Vimeo account is simpler and does not require OAuth consent flows.

In Retool, navigate to Settings (gear icon) → Configuration Variables. Click Add Variable, name it VIMEO_ACCESS_TOKEN, paste your personal access token as the value, check the 'Secret' checkbox, and click Save. Now go to the Resources tab in the Retool sidebar. Click Add Resource, type 'REST' in the search, and select REST API. In the configuration form: - Name: 'Vimeo API' - Base URL: https://api.vimeo.com In the Authentication section, select 'Bearer Token' from the Authentication dropdown. In the Token field, enter {{ retoolContext.configVars.VIMEO_ACCESS_TOKEN }}. In the Headers section, add: - Accept: application/vnd.vimeo.*+json;version=3.4 - Content-Type: application/json The Accept header is important — it tells Vimeo's API which version to use and requests JSON responses. Without it, you may receive XML or unexpected content types. Click Save Changes. Your Vimeo resource is ready. Test it immediately by creating a quick query: Method GET, Path /me — this fetches your Vimeo account details and confirms authentication is working.

Open or create a Retool app. In the Code panel, click + to add a new query. Select your Vimeo API resource from the Resource dropdown. Configure: - Method: GET - Path: /me/videos (lists all videos for the authenticated user; use /users/{user_id}/videos for a specific user) - Query Parameters: - per_page: {{ pagination.pageSize || 25 }} - page: {{ pagination.page || 1 }} - fields: 'uri,name,description,duration,created_time,modified_time,stats,privacy,link,pictures,tags' — this limits the response to only needed fields, significantly reducing response size - sort: 'modified_time' — sort by most recently modified - direction: 'desc' - query: {{ searchInput.value || '' }} — enables server-side video title search In the Advanced tab, add a JavaScript transformer to reshape the Vimeo response. Vimeo's video list response wraps results in a 'data' key with pagination metadata in the root object. Set the query to run automatically when inputs change and name it 'videosQuery'. Drag a Table component onto the canvas. Set Data to {{ videosQuery.data }}. Configure columns: thumbnail (image type using the thumbnail URL), title, privacy, duration, plays, created_date. Set the Table's pageSize to 25 and enable server-side pagination by binding the Table's pagination to your pagination variables.

1// Transformer to normalize Vimeo videos list response
2const response = data;
3const videos = response.data || [];
4return videos.map(v => {
5  // Extract the video ID from the URI (format: /videos/12345)
6  const videoId = v.uri ? v.uri.split('/').pop() : null;
7  // Get the largest thumbnail image
8  const thumbnails = (v.pictures && v.pictures.sizes) ? v.pictures.sizes : [];
9  const thumb = thumbnails.length > 0 ? thumbnails[Math.min(3, thumbnails.length - 1)].link : '';
10  return {
11    videoId: videoId,
12    title: v.name || '(Untitled)',
13    description: v.description || '',
14    duration: v.duration ? Math.floor(v.duration / 60) + ':' + String(v.duration % 60).padStart(2, '0') : 'N/A',
15    privacy: v.privacy ? v.privacy.view : 'unknown',
16    plays: v.stats ? v.stats.plays || 0 : 0,
17    likes: v.stats ? v.stats.likes || 0 : 0,
18    createdDate: v.created_time ? new Date(v.created_time).toLocaleDateString() : 'N/A',
19    modifiedDate: v.modified_time ? new Date(v.modified_time).toLocaleDateString() : 'N/A',
20    thumbnail: thumb,
21    vimeoUrl: v.link || '',
22    tags: (v.tags || []).map(t => t.name).join(', ') || 'No tags'
23  };
24});

To allow content managers to update video metadata directly from Retool, create a detail panel that appears when a video is selected in the table and provides a form for editing the title, description, privacy setting, and tags. Drag a Container component onto the canvas below the video table. Inside the container, add: - A TextInput for the video title, with default value {{ videosTable.selectedRow.title }} - A TextArea for the description, with default value {{ videosTable.selectedRow.description }} - A Select component for privacy setting, with options: { label: 'Public', value: 'anybody' }, { label: 'Private', value: 'nobody' }, { label: 'Unlisted', value: 'unlisted' }, { label: 'Password Protected', value: 'password' }. Set default to {{ videosTable.selectedRow.privacy }}. - A TextInput for tags (comma-separated) - A Save Changes button Create a new query for the update operation: - Method: PATCH - Path: /videos/{{ videosTable.selectedRow.videoId }} - Body type: JSON Set the query Trigger to Manual. Wire the Save Changes button's Click event handler to trigger this PATCH query. Add a Success event handler that re-runs the videos list query to refresh the table with the updated values, and shows a success notification. Add a Failure event handler that shows an error notification with {{ updateVideoQuery.error.message }}.

1{
2  "name": "{{ titleInput.value }}",
3  "description": "{{ descriptionInput.value }}",
4  "privacy": {
5    "view": "{{ privacySelect.value }}"
6  },
7  "tags": {{ tagsInput.value ? JSON.stringify(tagsInput.value.split(',').map(t => t.trim()).filter(t => t)) : '[]' }}
8}

Vimeo's API provides video-level statistics and more detailed analytics for Business and Premium accounts. Create a statistics query and a bar chart to visualize video performance across your library. For basic statistics (available on all plans), your videos transformer already extracts plays and likes from the stats field in the /me/videos response. Use this data to build a Chart component that shows the top videos by play count. Drag a Chart component from the Component panel onto the canvas. In the Chart's configuration: - Chart type: Bar (horizontal recommended for video titles which are long) - Data: {{ videosQuery.data }} - X axis: 'plays' - Y axis: 'title' - Sort the data in a transformer before passing to the chart: sort by plays descending and take the top 10 For more detailed analytics (Business/Premium plans), Vimeo provides the /videos/{video_id}/stats endpoint which returns time-series data. Create an analytics query when a video row is selected: - Method: GET - Path: /videos/{{ videosTable.selectedRow.videoId }}/stats For the embedded video player, drag a Video component onto the canvas and set its URL to {{ 'https://player.vimeo.com/video/' + videosTable.selectedRow.videoId }}. This lets content managers preview the selected video without leaving Retool. For complex multi-resource dashboards combining Vimeo analytics with CMS or marketing data, RapidDev's team can help architect and build your Retool solution.

1// Transformer to prepare top 10 videos by play count for a Chart
2const videos = videosQuery.data || [];
3return videos
4  .filter(v => v.plays > 0)
5  .sort((a, b) => b.plays - a.plays)
6  .slice(0, 10)
7  .map(v => ({
8    title: v.title.length > 40 ? v.title.substring(0, 40) + '...' : v.title,
9    plays: v.plays,
10    likes: v.likes
11  }));