# Framer Update: CMS Dynamic Filters Source: https://www.youtube.com/watch?v=8hwHCRM7JrI Recap page: https://rapidrecap.app/video/8hwHCRM7JrI Generated: 2026-02-19T15:34:28.3+00:00 --- ## Quick Overview Framer's new dynamic filters feature allows users to create highly customizable, interactive filtering systems for CMS content directly within the platform, synchronizing URL query parameters with filter states for easy sharing and bookmarking of specific filtered views. **Key Points:** - Dynamic filters allow users to build fully customizable filtering controls (tabs, dropdowns, checkboxes) for CMS lists directly on Framer sites. - The filtering system is compatible with essential input types like text search, dropdowns, checkboxes, and level selectors. - Page variables are crucial for dynamic filtering, automatically mapping CMS fields (Title, Categories, Featured, Levels, Author) to query parameters in the URL. - The demonstration shows setting up a 'Categories' filter using a dynamic tab component, where clicking a tab immediately updates the displayed content. - Interactions can be configured on filter components (like a 'Clear Filters' button) to trigger 'Reset Variables' actions, clearing all active filters. - The resulting filtered view updates the URL with query parameters (e.g., authors=pablo&categories=updates&featured=yes), allowing users to copy and share specific filter states. ![Screenshot at 00:06: The initial view of the blog page demonstrating the default unfiltered list of articles with category tags \(CMS, Basics, Updates, Pro Tips\) visible next to each entry.](https://ss.rapidrecap.app/screens/8hwHCRM7JrI/00-00-06.jpg) **Context:** This video provides a tutorial on implementing dynamic filtering for Content Management System (CMS) lists within the Framer web design platform. The demonstration focuses on setting up interactive filter components, such as tabs and dropdowns, that allow visitors to narrow down content listings based on different CMS fields like categories, authors, and featured status, ensuring the filtering state is reflected in the page's URL. ## Detailed Analysis The video introduces and demonstrates Framer's dynamic filtering capabilities for CMS-driven content lists. The presenter starts by showing a blog page with various filtering options on the left sidebar, including Title search, Author dropdown, Categories tags (All, CMS, Pro Tips, Updates), Staff Picks checkbox (Featured), and Level checkboxes (Beginner, Intermediate, Advanced). The core of the tutorial involves setting up dynamic tabs above the article list to filter the content instantly. This is achieved by creating Page Variables corresponding to the CMS fields being filtered (Title, Categories, Featured, Levels, Author). When configuring the dynamic tab component, the presenter sets up an interaction on the tab variant that uses a 'Set Variable' action to change the 'Categories' page variable based on which tab is clicked. Crucially, these page variables are linked to URL query parameters, meaning when a filter is applied (e.g., clicking 'CMS' tab), the URL updates dynamically, allowing users to bookmark or share the exact filtered state. The presenter also shows how to add filters dynamically within the CMS list's properties panel, linking filter inputs (like the search bar or dropdowns) to these page variables. Finally, the demonstration includes setting up a 'Clear Filters' button interaction to trigger a 'Reset Variables' action, returning the list to its default, unfiltered state. The video emphasizes that this powerful filtering mechanism is fully compatible with both standard pagination and infinite scrolling methods. ### Initial Setup & Filtering Options - Blog page displaying articles filtered by Categories (CMS, Pro Tips, Updates, Basics) - Author (Any) - Staff Picks (Featured) - Level (Beginner/Intermediate/Advanced) ### Dynamic Tab Creation - Setting up dynamic tabs (All, CMS, Pro Tips, Updates, Basics) above the list - Interaction set on the 'Categories' tab variant to 'Set Variable' on click ### Page Variables Configuration - Opening the 'Blog Page Variables' modal to define variables for Title, Categories, Featured, Levels, and Author - Each variable is configured with a Name and a Query Param (e.g., 'title', 'categories', 'featured') ### Dynamic Filtering Demonstration - Clicking the 'Pro Tips' tab instantly filters the list to show only 'Styling Elements' and 'Best Practices' - URL updates to include query parameters reflecting the active filter. ### Interactions for Reset - Setting an interaction on the 'Clear Filters' button to trigger 'Reset Variables' on click, clearing all filters and returning to the default view. ![Screenshot at 00:03: The initial blog view displaying filtering controls on the left and a list of articles with category tags on the right.](https://ss.rapidrecap.app/screens/8hwHCRM7JrI/00-00-03.jpg) ![Screenshot at 00:16: Title card animation showcasing the concept of 'DYNAMIC FILTERS' with floating 3D icons representing search and checkmark interactions.](https://ss.rapidrecap.app/screens/8hwHCRM7JrI/00-00-16.jpg) ![Screenshot at 00:28: The presenter demonstrates selecting an author \('Pablo'\) from the dropdown filter list, causing the main content list to update.](https://ss.rapidrecap.app/screens/8hwHCRM7JrI/00-00-28.jpg) ![Screenshot at 01:02: The browser URL bar updates dynamically to reflect the active filter states using query parameters: 'authors=pablo&categories=updates&featured=yes'.](https://ss.rapidrecap.app/screens/8hwHCRM7JrI/00-01-02.jpg) ![Screenshot at 02:25: The Framer editor interface showing the right-hand properties panel where a 'Filter' is being added to the CMS collection element, specifically selecting 'Categories' as the dynamic filter type.](https://ss.rapidrecap.app/screens/8hwHCRM7JrI/00-02-25.jpg)