The Framer CMS is what turns a handful of pages into a site that scales. Instead of hand-building every blog post, case study, or team bio, you define the structure once and let Framer generate the pages for you. Change the layout in one place and every page updates. That's the whole point.
This Framer CMS tutorial walks through the full workflow: collections, fields, dynamic detail pages, and collection lists. Budget about 30 minutes and you'll have a working content system you can keep adding to for years. No plugins, no code.
We design and sell Framer templates, so we set up CMS collections constantly, and we watch new users trip on the same three or four things every time. This guide front-loads those parts. If you're brand new to the editor itself, our beginner walkthrough on customizing a Framer template is a good warm-up before you start wiring content.
What is the Framer CMS, and when do you need it?
The Framer CMS is a built-in database for repeating content. A collection stores one type of item, like blog posts or projects, and every item shares the same set of fields. You need it the moment you have more than a few pages that follow the same layout and would be miserable to update by hand.
Think of it as separating what you say from how it looks. The design lives in one reusable layout. The content lives as rows in a table. When those two meet, Framer produces a real page per row. Add a new blog post and a new URL appears, already styled, already in your navigation lists if you set them up that way.
You can build and preview CMS content on Framer's free plan, which is enough to learn the whole system. Publishing to a live custom domain is where a paid site plan comes in, per Framer's own CMS overview. So you can follow this entire tutorial for free and only pay when you're ready to go live.
How to create your first CMS collection
Open the CMS from the left side of the editor, then create a new collection and name it for the content it holds. Framer sets up a starter table with a couple of default fields. From there you add fields, then add items. That's the loop: define structure, then fill it.
Here's the order we use every time:
- Open the CMS panel from the left sidebar and choose to add a new collection.
- Name it as a plural noun that describes the content, like "Blog Posts" or "Projects." Framer uses this name across the editor, so clarity now saves confusion later.
- Review the default fields Framer creates. Most collections start with a title and a slug. The slug becomes the page URL, so keep it clean.
- Hover the collection, click the three-dot menu, and choose Edit Fields to add the rest of your structure.
- Add a few real items so you can see the design fill with actual content instead of placeholder text.
That last step matters more than it looks. Designing against real content, including your longest headline and your shortest one, catches layout problems that dummy text hides.
Which CMS fields should you use?
Framer CMS collections are built from typed fields, and picking the right type keeps your data clean and your bindings predictable. Use the simplest field that fits the content. Reaching for a formatted text field where a plain text field belongs is the most common way people make a collection harder to style than it needs to be.
The field types you'll actually reach for:
- Plain Text: titles, short summaries, author names. Text with no formatting.
- Formatted Text: the body of a blog post or article, where you need headings, links, lists, and bold.
- Image: thumbnails, hero images, headshots. Bind these to the fill of a frame.
- Link: a URL field for external references or buttons.
- Date: publish dates and event dates. Also the field you'll sort collection lists by.
- Toggle: a true/false switch for things like "featured" or "draft."
- Number: prices, ratings, reading time, anything you'll count or sort numerically.
- Option: a fixed set of choices, like a category picker, instead of free-typed text.
- Reference and Multi-Reference: connect one collection to another, such as linking each post to an author collection.
- Color and File: brand accents per item, and downloadable assets like PDFs.
One collection with an Option field for categories almost always beats three near-identical collections. It keeps your content in one place and lets you filter later.
How to build a dynamic detail page
A CMS detail page is one layout that Framer clones for every item in a collection. You design it once, connect its elements to fields, and Framer produces an individual page per item at publish. This is where the "dynamic" in dynamic pages comes from, and it's the payoff for setting up fields cleanly.
To create one, go to the Pages tab, click the plus icon, and choose to add a new CMS page. Pick the collection you want and select the detail page option. Framer drops you into a blank layout that already knows it represents a single item.
Now bind elements to content. Select a text layer, click the CMS icon next to its content property, choose Set Variable, and pick the field you want, such as the post title. Do the same for the body, images, and dates. As you switch between items in the preview, the same layout refills with each one's content. Style it thoroughly, because every page in the collection inherits these choices at once.
How to display items with a collection list
A collection list is how you show many items on one page, like a blog index or a portfolio grid. You style a single card, and Framer repeats it for every item, pulling each one's fields in automatically. Add sorting and filtering and the list maintains itself as you publish new content.
Open the Insert panel, find the Collection Lists section, and drag your collection onto the page. Framer places a repeating list. Design one card: bind its image to the Image field, its heading to the title, its date to the Date field. Then set the card to link through to your detail page so a click opens the full item.
Two settings make these lists feel finished. Sort by your Date field, newest first, so fresh content leads. And use a filter tied to your Toggle or Option field when you want a "featured" row or a category-specific page. This is exactly the machinery behind adding a blog to a Framer site, since a blog is just a collection with a listing page and a detail page.
Common mistakes when using the Framer CMS
Most CMS problems trace back to a few setup habits, not to Framer being difficult. The fixes are quick once you know where to look. Here are the ones we correct most often when people send us a project that "won't work."
- Cards that don't link anywhere. A collection list looks right but clicking does nothing, because the card was never linked to the detail page. Set the link on the card frame.
- Formatted Text used for a headline. Titles should be Plain Text. Rich text in a heading field brings styling you'll fight with forever.
- No Date field for ordering. Without one, lists fall back to creation order and you lose control of what shows first.
- Too many collections. Three collections that share 90 percent of their fields should usually be one collection with an Option field.
- Ignoring the slug. A messy or duplicate slug means a messy or broken URL. Set it deliberately for every item.
- Styling against placeholder text. Add real items early so long titles and empty fields don't break your layout after launch.
Clear those and the CMS mostly gets out of your way, which is the point.
Frequently asked questions
Is the Framer CMS free to use?
You can build, edit, and preview CMS collections on Framer's free plan, which is enough to learn the entire system and design a real blog. Publishing that site to a custom domain is what requires a paid site plan. So you can follow this whole tutorial at no cost and upgrade only when you go live.
How many CMS collections can I create?
The number depends on your Framer plan. The free plan is generous enough to build a blog plus a project or team collection, and paid site plans raise the ceiling for larger content sites. If you're near a limit, remember that one collection with an Option field usually replaces several similar ones.
Can I import existing content into a collection?
Yes. Framer supports importing content into a collection from a CSV file, which saves you from re-typing an existing blog or catalog by hand. Match your spreadsheet columns to your collection fields, import, and Framer creates one item per row. Clean the data first and the mapping goes quickly.
Set the structure once, then just add items
The Framer CMS rewards a little planning up front. Decide what one item looks like, choose honest field types, design the detail page and the list once, and from then on your only job is adding content. The site grows without the layout work growing with it.
If you'd rather start from a structure that already has this wired up, most of our Framer templates ship with a CMS-powered blog and reusable content pages, and VYZN is a good example of a portfolio built around collection lists. From there, learn how to choose a Framer template that matches your content plan, and set up your lead capture with our Framer forms guide. Structure first, content forever.
