Framer is great when you want to design and publish a polished website without building every part of the frontend by hand. Marble is great when you want a clean place to write and manage content.
If you are using Framer for your website and Marble for your blog, changelog, or articles, you can connect both with the Marble Framer plugin. The plugin syncs Marble content into Framer CMS, so you can design in Framer while keeping your content in Marble.
In this guide, we will connect Marble to a Framer project, import posts into a Framer CMS collection, map fields, and run a sync when content changes.
Prerequisites
Before you start, you need:
A Marble workspace with at least one published post.
A Marble API key.
A Framer account and an existing Framer project.
If you do not have a Marble workspace yet, create an account at app.marblecms.com. After signing in, open your workspace and create a few posts so there is content to import into Framer.
Create a Marble API key
In the Marble dashboard, open your workspace, go to Settings, then choose API Keys under the Developers section.
Create a new API key and copy it. For syncing content into Framer, a public/read key is usually enough because Framer only needs to read content from Marble. If you use a private key, treat it carefully and avoid sharing it outside tools you trust.
Open your Framer project
Open the Framer project where you want to use Marble content. This can be an existing website, a template you bought from the marketplace, or a new project you are designing from scratch.
You do not need to create the final blog design before importing content. In many cases, it is easier to import real posts first, then design your blog index and post template using real titles, descriptions, images, and content.
The video below shows the full Framer flow: open the CMS area, find the Marble plugin, create a managed collection, paste your API key, keep the default post fields, and import your Marble posts.
Add a CMS collection for Marble content
In Framer, open the CMS area and choose the Marble plugin from the Plugins tab. You can pick it from your recents if you have used it before, or search for Marble in the marketplace results.
When you select the plugin, Framer asks for a collection name. You can keep the default name or rename it to something like Marble, Blog, or Posts.
Framer calls this a managed collection. That means the plugin controls the collection fields and items. Instead of manually creating every CMS field and pasting content yourself, you let the plugin create and update the collection from Marble.
When the Marble plugin opens, paste your Marble API key. Then choose the source you want to sync.
The plugin supports:
Posts for blog posts, articles, and changelog entries.
Categories for grouping posts.
Tags for labels and topic pages.
Authors for author profiles.
Media for files uploaded to Marble.
For most blog setups, start with Posts.
Map Marble fields to Framer fields
After choosing a source, the plugin shows the fields it can import from Marble. For posts, this includes fields like title, slug, content, cover image, published date, updated date, and featured status.
You can keep the default fields, ignore fields you do not plan to use, or rename fields so they make sense inside your Framer CMS collection.
You will also choose a slug field. For posts, using the Marble slug is usually the right choice because it keeps your Framer URLs aligned with the post slugs you already manage in Marble.
Import your Marble posts
Once the fields look right, click Import Posts. The plugin will create or update the Framer CMS items from your Marble posts.
After the import finishes, you should see your Marble posts inside the Framer CMS collection. From there, you can open a row to preview the imported fields, including the title, slug, rich content, cover image, and published date.
You can use the collection like any other Framer CMS collection: connect it to a blog list, create a detail page, and bind text, images, dates, and rich content to your design.
Design your blog in Framer
Now that your posts are in Framer CMS, you can design around real content.
A common setup is:
Create a blog index page.
Add a Framer CMS collection list.
Connect the list to your Marble posts collection.
Bind the title, cover image, and published date to your card design.
Create a post detail page from the same collection.
Bind the post title and content fields to your article layout.
This lets Marble stay focused on writing and content management, while Framer stays focused on layout, styling, and publishing the site.
Sync new content later
When you publish or update content in Marble, run the Marble plugin again from the Framer CMS collection to sync the latest content.
The plugin updates existing items when their IDs match, adds new items, and removes stale items from the managed collection. This means Framer can stay in sync with Marble without you manually copying titles, descriptions, images, or post content between tools.
If you are actively publishing in Marble, it is a good habit to sync before publishing your Framer site changes.
When this setup makes sense
This setup is useful if you like Framer for designing websites but want your content to live in a dedicated CMS.
It works well for:
Marketing sites with a blog.
Founder blogs and personal sites.
Changelogs and product updates.
Documentation-style pages that need a visual site builder.
Teams where designers work in Framer and writers work in Marble.
If your website is already in Framer, you do not need to rebuild it in a custom frontend just to use a headless CMS. You can keep the Framer workflow and bring Marble content into the Framer CMS.