How to Integrate Retool with Framer

Before opening Retool, spend time in Framer documenting the design patterns from your prototype that you want to replicate in the internal tool. Open your Framer project and review each interactive screen. Note the following for each major UI section: what component type is being used (list, form, modal, tabs), what triggers interactions (button clicks, row selections, dropdown changes), and what visual feedback is provided (loading states, success animations, error states). Create a simple mapping document or spreadsheet with two columns: 'Framer Pattern' and 'Retool Equivalent'. Common mappings include: Framer Stack → Retool Container, Framer List → Retool Table component, Framer Overlay → Retool Modal, Framer Inputs → Retool Form, Framer Badge → Retool Tag component, Framer Link → Retool Button with link action. Pay special attention to multi-step flows (like wizards or onboarding flows) — these often require Retool's Tab component or Custom Components to replicate faithfully. Document any patterns that have no direct Retool equivalent (complex animations, drag-and-drop reordering, canvas-based interactions) and plan these as Custom Components from the start. This documentation step saves hours of rework when building the Retool app, especially for complex internal tools where stakeholders approved a specific UX in Framer.

To connect Retool to Framer's CMS API, you need an API key and your site's CMS base URL. Log in to Framer at app.framer.com and navigate to your workspace settings. Click on your avatar or workspace name in the top left, then select Settings. Look for the API section — Framer provides API keys per workspace for CMS access. Click Generate API Key and copy the key immediately (it is shown only once). Store it securely in a password manager. Next, identify your Framer site ID. When you have a Framer site open, the URL in your browser will contain a format like app.framer.com/projects/YOUR_SITE_ID. Alternatively, the Framer CMS API documentation specifies that the base URL for CMS operations is https://api.framer.com/store/api/v1/sites/{siteId}/collections. You can find your site ID by making a test API call to GET https://api.framer.com/store/api/v1/sites with your Bearer token — this returns all sites in your workspace with their IDs. Make note of both the API key and the site ID for the Resource configuration in the next step.

In Retool, navigate to the Resources tab in the left sidebar and click Add Resource. Select REST API from the resource type list. Name the resource 'Framer CMS API'. In the Base URL field, enter https://api.framer.com/store/api/v1. Scroll to the Authentication section and select Bearer Token from the dropdown. In the Token field, enter your Framer API key. This configures every query made through this resource to include an Authorization: Bearer YOUR_API_KEY header automatically. Add a default header: key Accept, value application/json. Click Save Changes and test the connection by using the Test button if available, or by creating a test query in a Retool app. To test, create a GET query to the path /sites — if the response returns your Framer workspace sites, the connection is working correctly. Once you have confirmed connectivity, note your site ID from the test response and store it as a Retool Configuration Variable (Settings → Configuration Variables) named FRAMER_SITE_ID so you can reference it in queries as {{ retoolContext.configVars.FRAMER_SITE_ID }} without hard-coding it.

Create a new Retool app and build the CMS management interface. First, create a query named 'getCollections' — set Method to GET, Path to /sites/{{ retoolContext.configVars.FRAMER_SITE_ID }}/collections. This returns all CMS collections in your Framer site (e.g., Blog Posts, Team Members, Products). Add a Select component to your canvas named 'collectionSelect' and set its options to {{ getCollections.data?.collections?.map(c => ({ label: c.name, value: c.id })) || [] }}. Next, create a query named 'getCollectionItems' — set Method to GET, Path to /sites/{{ retoolContext.configVars.FRAMER_SITE_ID }}/collections/{{ collectionSelect.value }}/items, and set it to trigger when collectionSelect changes. Drag a Table component onto the canvas, set its Data to {{ getCollectionItems.data?.items || [] }}. For creating new CMS items, add a Modal component to the canvas. Inside the modal, add a Form with Text Input fields corresponding to the CMS collection fields (these vary by collection). Create a query named 'createItem' — set Method to POST, Path to /sites/{{ retoolContext.configVars.FRAMER_SITE_ID }}/collections/{{ collectionSelect.value }}/items, Body Type to JSON. Set the Body to a dynamic object built from the Form inputs. In the query's On Success handler, trigger 'getCollectionItems' to refresh the table and close the modal.

1// Transformer: reshape Framer CMS items for Retool Table display
2const items = data?.items || [];
3return items.map(item => {
4  const fields = item.fieldData || {};
5  return {
6    id: item.id,
7    name: fields.name || fields.title || item.id,
8    slug: fields.slug || '',
9    published: item.isArchived ? 'Draft' : 'Published',
10    created_at: item.createdAt
11      ? new Date(item.createdAt).toLocaleDateString()
12      : 'N/A',
13    updated_at: item.lastPublished
14      ? new Date(item.lastPublished).toLocaleDateString()
15      : 'N/A'
16  };
17});

For visual interactions that exist in your Framer prototype but have no direct Retool equivalent — animated transitions, custom hover states, drag-and-drop reordering — Retool Custom Components allow you to embed React code directly in your app. In the Retool editor, drag a Custom Component from the component panel onto your canvas. Click the component to open its configuration, then click 'Open in Code Editor' to access the Custom Component IDE. Custom Components in Retool use the @retool-ui/components package and can receive and send model data to the parent Retool app. For a simple animated card transition (common in Framer prototypes), write a React component that uses CSS transitions. For a progress stepper that mimics a Framer onboarding flow, use React state to manage the current step and animate transitions between steps. Keep Custom Components focused on visual presentation — data fetching should still happen through Retool's standard queries, with results passed into the Custom Component via its model properties. Reference the component's data from the parent app using {{ customComponent1.model.data }} and dispatch events back using modelUpdate. Note that Custom Components require a Business or Enterprise Retool plan.

1// Custom Component: Animated Status Badge (matches Framer prototype styling)
2import React from 'react';
3
4const STATUS_COLORS = {
5  published: { bg: '#d1fae5', text: '#065f46' },
6  draft: { bg: '#fef3c7', text: '#92400e' },
7  archived: { bg: '#f3f4f6', text: '#374151' }
8};
9
10export default function StatusBadge({ model }) {
11  const status = (model.status || 'draft').toLowerCase();
12  const colors = STATUS_COLORS[status] || STATUS_COLORS.draft;
13
14  return (
15    <span style={{
16      padding: '4px 10px',
17      borderRadius: '9999px',
18      fontSize: '12px',
19      fontWeight: 500,
20      backgroundColor: colors.bg,
21      color: colors.text,
22      transition: 'all 0.2s ease'
23    }}>
24      {status.charAt(0).toUpperCase() + status.slice(1)}
25    </span>
26  );
27}