CMS, Plugins

Framer Update: CMS Starter Plugin

Framer Update: CMS Starter Plugin

Framer Update: CMS Starter Plugin

Hunter

·

5:08

·

6.7K views

·

Mar 7, 2025

About this lesson

Introducing the CMS Starter Plugin, the fastest way to get started building your next CMS Plugin. The Starter Plugin comes with with the core features of a great CMS Plugin already included: data mapping, source selection, field mapping, error handling, and more. This functionality is intentionally minimal yet robust, distilling our learnings from building many CMS Plugins into a small set of code files. By swapping in your own data-fetching, most of the functionality will adapt automatically, leaving you more time to focus on customizing and shipping your Plugin. Learn More: https://www.framer.com/updates/cms-starter-plugin

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

https://www.youtube.com/watch?v=acFuYzW7h1Q&t=0s Intro

https://www.youtube.com/watch?v=acFuYzW7h1Q&t=22s CMS Plugins

https://www.youtube.com/watch?v=acFuYzW7h1Q&t=114s CMS Starter

https://www.youtube.com/watch?v=acFuYzW7h1Q&t=220s Example Plugin

0:00hey y' it's hunter in this video I'll 0:03give you a quick overview of CMS plugins 0:05in framer and show you the fastest way 0:08that you can start building 0:11them CMS plugins are super powerful for 0:15accelerating your content workflows and 0:17syncing your content that lives 0:19somewhere else into 0:22framer and with plugins there are two 0:25main types of CMS collections managed 0:28and unmanaged unmanaged are the normal 0:32collections in framer that are primarily 0:34edited by people and are used when you 0:37want the source of truth of your content 0:40to be inside a framer a managed 0:43collection is when the collection is 0:46primarily controlled by a plugin and 0:48this is great for Content that lives 0:50somewhere else and is synced into framer 0:54for these collections we show your 0:56plugins icon and have specific actions 1:00like the sync and manage buttons in the 1:03toolbar in code most CMS plugins share a 1:07similar structure they start with 1:09getting the 1:11collection then setting the 1:13fields and then adding The Collection 1:17items and this code on its own is 1:20technically a valid 1:22plug-in so if we run it and create a new 1:27collection 1:31we just programmatically created a CMS 1:35item and these same concepts are in all 1:38CMS 1:40plugins however going from this to a 1:43full-fledged robust CMS plugin can be a 1:47lot of work and this is where the CMS 1:50starter plugin comes in 1:53handy by starting a plugin the normal 1:56way with mpm create framer plug-in but 1:59adding a new parameter of starter with 2:03the value CMS our plugin will start with 2:05the CMS starter rather than the default 2:08code template we'll wait for everything 2:10to 2:11install and then go to our 2:16directory let's open our development 2:20plug-in and create a new 2:23collection and we can see we have a 2:25basic CMS plugin here we have a source 2:29selector 2:31and if we click next we have a fully 2:34functional interface for mapping your 2:37content fields to your CMS 2:41fields and if we click import the 2:44example content is synced into the CMS 2:47based on our field mapping selection and 2:50with that functionality you've already 2:52achieved the core goals of most CMS 2:55plugins for managed 2:57collections now it becomes more about 3:00plugging in your own data and 3:01customizing it as you'd 3:04like so let's hop into the code the 3:07starter is a minimal yet robust setup 3:11that includes our learnings from 3:13building many CMS plugins the main thing 3:16to change to start working with your own 3:18data is the data. TS file and scroll 3:23down to get data 3:25source in here is where the core data 3:28fetching for the plug-in happens 3:30so if we replace the Fetch with one for 3:33our own data we'll be most of the way to 3:36our own custom CMS plugin for a simple 3:40example let's swap the fetch for an API 3:43call to Blue Sky where we'll fetch the 3:46latest posts from the framer account and 3:49sync them into the CMS don't worry about 3:52the Blue Sky details here essentially we 3:55fetch the data set up the fields and 3:58then map our item comes into the format 4:01that the CMS API expects now we've only 4:05changed this one file but if we go into 4:07framer open our development 4:10plugin create a new 4:14collection go ahead with our posts 4:17source and all the field mapping works 4:20as we'd 4:22expect and now we have our Blue Sky 4:25posts synced into the 4:27CMS this is of course a simple example 4:31but you can see that with just a bit 4:33more customization the CMS starter gets 4:36you to a full-fledged CMS plugin way 4:39faster than if you started from scratch 4:42I hope you all enjoy using this to build 4:44some fantastic CMS plugins either for 4:47your team or for sharing on the plug-in 4:50Marketplace thanks for watching and I 4:52will see you in the next one

TeachesPlugins Plugin API

Also coversCMS Fields Collections Templates

Watch on YouTube ↗

‹ Framer Update: CMS Tables

Intro to Components in Framer (Fundamentals Lesson 21) ›

More in this topic

Framer Update: CMS 3.0

Framer Update: CMS 3.0

Framer Update14K views · 1 month ago

Ship websites with enterprise needs, at startup speeds

Ship websites with enterprise needs, at startup speeds

Announcement8.3M views · 3 months ago

Framer Update: CMS Dynamic Filters

Framer Update: CMS Dynamic Filters

Framer Update14K views · 3 months ago

Framer Update: CMS Components

Framer Update: CMS Components

Framer Update11K views · 4 months ago

Framer Update: Empty States in CMS Lists

Framer Update: Empty States in CMS Lists

Framer Update4K views · 4 months ago

Wireframer: Blogs and Changelogs with CMS

Wireframer: Blogs and Changelogs with CMS

Framer Update5K views · 8 months ago

Level up your SEO with these awesome Framer Plugins

Level up your SEO with these awesome Framer Plugins

Plugins5K views · 9 months ago

Importing from Figma and the Web to Framer (Fundamentals Lesson 14)

Importing from Figma and the Web to Framer (Fundamentals Lesson 14)

Layout & Design71K views · 10 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.