Framer Integration
Sync your Casper articles to Framer CMS using the Casper plugin. Publish in Casper, then the plugin pulls articles into your Framer project for your site.
Overview
The Framer integration works differently from push-based platforms like WordPress or Webflow. Casper does not send content directly to Framer. Instead, you connect your Framer project to Casper with an API key, then the Casper plugin in Framer fetches your published articles and syncs them into a Framer CMS collection. Once an article is in Framer, you can edit it there; Casper does not overwrite those edits.
Requirements: A Framer account, the Casper plugin from the Framer Marketplace, and a CMS collection in your Framer project that you want to sync articles into. The plugin works with your existing collection and lets you map Casper fields (title, content, excerpt, etc.) to your collection fields.
Setup Instructions
Step 1: Create a CMS collection in Framer (if you don’t have one)
The Casper plugin syncs articles into an existing Framer CMS collection. In your Framer project, create a collection for your blog or articles (e.g. “Blog posts” or “Articles”) and add the fields you need—such as title, body/content, excerpt, featured image, publish date, or slug. You can use Framer’s default field types; the plugin will map Casper’s article data to your collection fields when you configure the connection.
Step 2: Install the Casper plugin in Framer
Open the Plugins panel in your Framer project and search for Casper in the Framer Marketplace, or install it directly from the Casper plugin page. Install the plugin to add it to your project.
Step 3: Create a Framer connection and get your API key in Casper
- In Casper, go to Settings → Integrations
- Click Connect and choose Framer
- Click Get API key. Casper will create the connection and show your API key once
- Copy the key and store it somewhere safe—you won’t be able to see it again in Casper
If you need a new key later, you can add another Framer connection or edit the existing one (you may need to reconnect to get a fresh key, depending on your setup).
Step 4: Connect the plugin and set up field mapping
In your Framer project, open the Casper plugin and paste the API key you copied from Casper. The plugin will verify the key and link your Framer project to your Casper organization. Next, choose the CMS collection you want to sync articles into and map Casper’s fields to your collection fields (e.g. Casper title → your “Title” field, Casper content → your “Body” rich text field, excerpt, featured image, slug, publish date). Once mapping is set, run an initial sync to pull your published articles into the collection.
How It Works
Publishing in Casper
When you click Publish on an article and choose Framer, Casper marks the article as published and makes it available to the Framer plugin. No content is sent to Framer at that moment—the plugin pulls articles from Casper’s API when you sync in Framer.
Syncing and field mapping
The Casper plugin works with your existing CMS collection and uses the field mapping you configure—so your collection structure stays under your control. When you run a sync, the plugin fetches published articles from Casper and creates or updates items in the chosen collection, filling in the mapped fields (title, content, excerpt, featured image, slug, date, etc.). Run a sync whenever you want to bring in new or updated articles; you can also use scheduled sync if the plugin supports it.
Editing in Framer
After an article is synced to Framer, you can edit it in the Framer CMS. Casper does not overwrite those edits on future syncs—the integration is designed so that once content is in Framer, you own it there.
Scheduled publishing and auto-publish
You can schedule an article to be “published” to Framer for a future date and time. When you enable Auto publish in your content calendar, Casper will automatically mark scheduled articles as published when their time comes. After that, the Framer plugin can sync them the next time you run a sync in Framer.
Troubleshooting
Plugin says connection or API key is invalid
Check that you pasted the full API key with no extra spaces. The key is shown only once in Casper when you create the connection. If you lost it, create a new Framer connection in Casper to get a new key, then update the key in the Framer plugin.
Articles don’t appear in the plugin
The plugin only fetches articles that are published in Casper. Make sure you’ve clicked Publish and selected Framer (or scheduled the article with auto-publish on so it becomes published at the scheduled time). Draft or scheduled-but-not-yet-published articles are not included.
Scheduled article didn’t become published at the scheduled time
Ensure Auto publish is turned on for your organization (from the content calendar or settings). The system only marks scheduled articles as published when auto-publish is enabled. Also confirm the article’s publication is linked to your Framer connection when you schedule it.
Common Questions
Do I need to publish in Casper and then sync in Framer every time?
Yes. Publishing in Casper makes the article available to the plugin. Running a sync in Framer pulls those articles into your CMS. How often you sync is up to you (or your plugin settings).
Can I edit articles in Framer after they’re synced?
Yes. Once an article is in your Framer CMS, you can edit it there. Casper does not overwrite content you’ve changed in Framer.
Can I connect more than one Framer project?
Each Framer connection in Casper has its own API key. If you have multiple Framer projects, you can add multiple Framer connections in Casper (one per project) and use the appropriate key in each project’s Casper plugin.
