Framer

Two-way sync Framer CMS collections with Airtable, Notion, Google Sheets, and more. Covers the project URL, Server API keys, supported fields, and slugs.

Framer Connector Guide

This guide covers how to connect Whalesync to a Framer project, which fields sync, and a few things to know before you start.

In Whalesync terms, a Framer project (your site) is the base, and each connection reaches one project. Each CMS collection is a table, and each CMS item is a record. Whalesync creates, updates, and deletes items in both directions.

Connecting to Framer

Whalesync connects with your Framer project URL and a Server API key from the same project. See Authorize Framer for how to get both and connect.

Supported Fields

Whalesync does not support every Framer field type yet. If you need one that is missing, reach out and let us know.

Framer field	Status	Notes
Plain Text	✅ Supported
Formatted Text	✅ Supported	Synced as HTML. Apps with rich text, such as Airtable, show it as rich text.
Number	✅ Supported	Decimals are kept.
Toggle	✅ Supported
Date	✅ Supported	Date and time.
Link	✅ Supported
Color	✅ Supported	Synced as text, for example `#09F` or `rgba(12, 34, 56, 0.5)`.
Option	✅ Supported	Synced as the option's name. Values from your other app must match one of the field's options.
Image	✅ Supported	Synced as the image URL. Maps to an Airtable attachment field. See Images and files.
File	✅ Supported	Synced as the file URL.
Gallery	✅ Supported	Synced as a list of image URLs. Maps to an Airtable attachment field that holds several images.
Reference	✅ Supported	Synced as a link to a record in the referenced collection. Sync that collection too.
Multi Reference	✅ Supported	Synced as a multi-link field.
Slug	✅ Supported	See Slugs.
Draft	✅ Supported	Framer's draft setting. Draft items are not published to the live site.
Divider	✖️ Not supported	Layout only. It holds no data.

Additional Fields

Whalesync adds a field that is not part of your collection.

Field	Explanation	Writable
Framer Record ID	The item's id in Framer.	No

Images and files

Framer copies every image and file Whalesync sends it to Framer's own storage (framerusercontent.com). After the first sync, the URL in Framer is different from the original URL. Images from Airtable attachment fields arrive in Framer, and Framer images and galleries arrive in Airtable as attachments.

Slugs

Every Framer item needs a unique slug. Map a field to Slug to control it.

If a new item arrives without a slug, Whalesync builds one from the field your collection bases its slugs on, usually Title, the same way Framer's editor does. For example, Hello World becomes hello-world. If that slug is already taken, Whalesync adds -2, -3, and so on.

If there is nothing to build a slug from, the record shows a sync issue asking you to fill in that field or map a field to Slug. Framer refuses a slug that is already used in the collection.

Things to Keep in Mind

Publish in Framer to see changes on your live site. Whalesync saves changes to your Framer CMS right away, but your published site only updates when you publish it in Framer. Whalesync does not publish for you, because publishing would also ship any other unpublished edits.
Changes in Framer are picked up on a schedule. Framer does not notify Whalesync about changes, so Whalesync checks your collections regularly.
Create collections and fields in Framer. Whalesync cannot create Framer collections or fields. Add them in Framer, then refresh the schema in Whalesync.
Collections can have up to 5,000 items. Framer only returns a collection all at once, so Whalesync syncs collections of up to 5,000 items. A larger collection shows a sync issue with the number of items it has. Contact support to raise the limit.
Option values must match. Framer refuses a value that is not one of the field's options, and the record shows a sync issue.
Sync referenced collections too. A Reference field links to records in another collection, so that collection has to be part of the sync. Whalesync asks for it when you map the field.