Announcing Two-Way Sync for Framer

Framer is where a lot of good-looking marketing sites get built these days. Its CMS holds the blog posts, case studies, directories, and landing pages that power them. Until today, Whalesync could only copy those collections out of Framer, through Live Export.

Two-way sync for Framer is out today in beta. Connect a Framer site and each CMS collection becomes a table you can sync with Airtable, Notion, Google Sheets, Postgres, and all the other services we support. Add, edit, or delete a row on the other side and the item is created, updated, or deleted in Framer.

What syncs

All the field types your collections are likely to use: plain and formatted text, numbers, toggles, dates, links, colors, options, images, files, galleries, slugs, and references and multi-references between collections. The draft setting comes across too, so you can keep an item off the published site from Airtable or Notion.

Images and galleries sync both ways with Airtable attachment fields. Drop an image into an attachment in Airtable and it shows up in Framer, re-hosted on Framer’s own CDN.

If a new item arrives without a slug, Whalesync builds one from the field your collection bases its slugs on, the same way Framer’s editor does.

Publishing stays in Framer

Whalesync saves changes to your Framer CMS right away, but it never publishes your site. Your edits appear in the Framer editor as soon as they sync and go live when you publish in Framer, so nothing reaches your visitors before you’re ready.

Framer has no webhooks, so Whalesync checks Framer for changes on a schedule rather than the moment they’re made. Edits headed the other way, into Framer, are saved to its CMS as soon as they sync.

That makes a few setups easy: a programmatic SEO build run out of an Airtable base with one row per page, a blog written and scheduled in Notion that fills your Framer blog collection, or a directory kept in Google Sheets where the whole team can edit it.

Getting started

Two-way sync for Framer is on the Starter plan and up. To connect, copy your Framer project’s URL, create a Server API key in that project under Site Settings → General, and paste both into Whalesync. Each connection is one Framer site.

Refer to our Framer connector docs for more details. The connector is in beta, so if it’s missing something you need, reach out and tell us.