How to set up CMS content on Framer

beginner 8 min read Updated 2026-03-18

Quick Answer

Setting up CMS content in Framer involves creating a CMS collection, defining content fields, and connecting those fields to design components. You can then populate your collection with content and dynamically display it across your website.

Try Framer Full Framer Review

Prerequisites

A Framer account with an active project
Basic understanding of content management systems
Familiarity with Framer's interface
Content ready to be structured (text, images, etc.)

Step-by-Step Instructions

Access the CMS Panel

In your Framer project, locate the CMS tab in the left sidebar. If you don't see it, click on the Assets panel and look for the CMS Collections section. Click the + button to create your first collection.

The CMS tab is only available on paid Framer plans, so make sure you're on the right subscription tier.

Create a New Collection

Click Create Collection and give it a descriptive name like "Blog Posts", "Team Members", or "Products". Choose an appropriate icon and color to help organize your collections. Click Create to proceed to the field setup.

Use clear, descriptive names for collections as they'll appear in your CMS dashboard and help team members understand the content structure.

Define Content Fields

Add fields by clicking + Add Field. Choose from field types like Plain Text, Rich Text, Image, Date, Number, or Boolean. For each field, set the Field Name, mark as Required if needed, and add help text for editors. Common fields include Title (Plain Text), Content (Rich Text), Featured Image (Image), and Published Date (Date).

Plan your content structure before adding fields. Consider what information you'll need for each item and how it will be displayed on your site.

Configure Field Settings

For each field, click the Settings icon to configure validation rules, default values, and display options. Set character limits for text fields, image size requirements, and specify whether fields should be unique. Enable Use as slug for your title field to create URL-friendly identifiers.

Setting up proper validation helps maintain content quality and prevents errors when team members add content later.

Add Sample Content

Click Add Item to create your first content entry. Fill in all the fields with sample content to test your structure. You can add multiple items by repeating this process. Use the Preview button to see how your content will look when connected to design components.

Adding sample content helps you test the CMS integration and ensures your fields work as expected before connecting them to your design.

Connect CMS to Design Components

Select a component on your canvas (like a text element or image). In the right panel, look for the Content section and click Connect to CMS. Choose your collection and select the appropriate field. For dynamic lists, use the List component from the Insert menu and connect it to your collection.

Start with simple connections like text and images before moving to more complex dynamic layouts and filtering.

Set Up Collection Pages

Create individual pages for each CMS item by adding a new page and enabling CMS Collection Page in the page settings. Select your collection and design the layout using connected components. Framer will automatically generate pages for each collection item using your template design.

Use the collection page URL structure to create SEO-friendly URLs that include your content slug fields.

Publish and Manage Content

Click Publish to make your CMS content live. Access the CMS Dashboard through the published site or Framer editor to add, edit, or delete content items. Team members can be given access to manage content without touching the design through the CMS dashboard.

Set up proper team permissions to control who can edit content versus who can modify the CMS structure and design.

Common Issues & Troubleshooting

CMS content not updating on published site

Make sure you've clicked Publish after making CMS changes. Check that your components are properly connected to CMS fields in the Content panel. Clear your browser cache if changes still don't appear.

Images not displaying from CMS

Verify that image fields are properly connected to image components. Check image file sizes and formats - Framer supports JPG, PNG, WebP, and SVG. Ensure images are uploaded through the CMS interface rather than directly to assets.

Collection pages showing 404 errors

Confirm that CMS Collection Page is enabled in page settings and the correct collection is selected. Check that your slug field is properly configured and contains valid URL characters. Republish the site after making changes.

Unable to edit CMS fields after creation

Some field properties can't be changed after creation if content exists. Create a new field with the correct settings and migrate content manually, then delete the old field. Always plan field structure carefully before adding content.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Framer website before purchasing.

Visit Framer View Framer Pricing