[{"data":1,"prerenderedAt":6102},["ShallowReactive",2],{"blog-category-tutorials":3},[4,780,1551,2098,2651,3707,5381],{"id":5,"title":6,"author":7,"body":11,"category":735,"description":736,"extension":737,"featured":738,"image":739,"meta":740,"navigation":768,"path":769,"published":768,"publishedAt":770,"readingTime":771,"robots":772,"seo":773,"slug":774,"stem":775,"tags":776,"updatedAt":770,"__hash__":779},"blog/blog/framer-cms-collections-tutorial.md","Framer CMS Collections: The Complete Tutorial",{"name":8,"avatar":9,"bio":10},"Shahul","/shahul-profile-pic.jpg","Founder of FramerHub",{"type":12,"value":13,"toc":718},"minimark",[14,18,21,24,29,32,35,38,40,44,85,88,90,94,97,100,121,126,318,333,336,342,348,350,354,357,475,478,484,494,500,502,506,509,532,540,542,546,549,573,576,578,582,585,588,596,599,602,604,608,614,620,626,632,638,644,646,650,653,671,678,682,688,694,700,706,712],[15,16,17],"p",{},"CMS collections are the feature that turns Framer from a static site builder into something that can power a blog, a product catalog, or a directory. If you've only built static pages so far, this is the tutorial that walks through Framer CMS collections from zero: creating one, structuring it so it survives a real project, and generating live pages from it.",[15,19,20],{},"The field structure is where the real work sits. Creating a collection takes about thirty seconds. Choosing the right fields is what decides whether you're still happily adding content in three weeks or quietly rebuilding the whole thing. Both are covered here, in the order you'll actually do them.",[22,23],"hr",{},[25,26,28],"h2",{"id":27},"what-a-collection-actually-is","What a Collection Actually Is",[15,30,31],{},"A CMS collection is a structured set of items. Think of it like a spreadsheet: each row is an item (a blog post, a product, a listing), and each column is a field (title, date, image, category).",[15,33,34],{},"The template is what makes it work. You design one page template for the collection, and Framer generates a live page for every item using that template. Add a new blog post to the collection and it gets its own published page without you building anything new.",[15,36,37],{},"That's the whole trade. You give up per-page design freedom for every item, and in return you get structure, consistency, and content you can add without opening the design canvas. It's the right trade for anything repeating and the wrong trade for a one-off page, which is why an About page stays a normal page and a blog post becomes a collection item.",[22,39],{},[25,41,43],{"id":42},"step-1-create-the-collection","Step 1: Create the Collection",[45,46,47,56,59,82],"ol",{},[48,49,50,51,55],"li",{},"Open the ",[52,53,54],"strong",{},"CMS"," panel from the left sidebar of your Framer project.",[48,57,58],{},"Create a new collection. Framer lets you start from an empty collection, import a CSV, or start from its sample blog structure. The sample is genuinely useful for a first look, but delete its fields before building for real, they're an example, not a recommendation.",[48,60,61,62,66,67,66,70,73,74,77,78,81],{},"Name it with a plural noun that says what the items are: ",[63,64,65],"code",{},"Blog Posts",", ",[63,68,69],{},"Properties",[63,71,72],{},"Job Listings",". Not ",[63,75,76],{},"Items",", not ",[63,79,80],{},"Content",". That name follows you into the design panel and into the URL structure for the pages Framer generates, so a vague name gets expensive.",[48,83,84],{},"Framer starts you with a few default fields. Leave them for now; step 2 replaces them.",[15,86,87],{},"If you're importing a CSV, still do step 2 before you import. Framer maps CSV columns onto fields, and it is much easier to fix the field structure while the collection is empty.",[22,89],{},[25,91,93],{"id":92},"step-2-structure-your-fields","Step 2: Structure Your Fields",[15,95,96],{},"Field structure decides how well the rest of the project goes, so give it more planning time than it usually gets.",[15,98,99],{},"Before you add a single field:",[101,102,103,109,115],"ul",{},[48,104,105,108],{},[52,106,107],{},"List every piece of content each item actually needs, from real examples."," Pull up three to five real blog posts or products and write down every distinct piece of information they carry. This catches the fields you'd otherwise discover mid-build, after the template is already designed around the fields you did remember.",[48,110,111,114],{},[52,112,113],{},"Choose the right field type for each piece of content."," A category should be an option field or a reference, not free text, which invites three spellings of \"Design\" across ten items. A publish date should be a Date field, not Text, which breaks sorting silently. A price should be a Number, not Text, or you lose the ability to sort or range-filter on it later.",[48,116,117,120],{},[52,118,119],{},"Mark fields required only when they truly are."," Over-strict required fields make early content entry miserable for no benefit. Too loose, and you end up with half-filled items that break the template.",[122,123,125],"h3",{"id":124},"framer-cms-field-types","Framer CMS field types",[127,128,129,145],"table",{},[130,131,132],"thead",{},[133,134,135,139,142],"tr",{},[136,137,138],"th",{},"Field type",[136,140,141],{},"What it stores",[136,143,144],{},"Best used for",[146,147,148,162,175,188,201,214,227,240,253,266,279,292,305],"tbody",{},[133,149,150,156,159],{},[151,152,153],"td",{},[52,154,155],{},"Text",[151,157,158],{},"Short strings",[151,160,161],{},"Titles, names, labels",[133,163,164,169,172],{},[151,165,166],{},[52,167,168],{},"Rich Text",[151,170,171],{},"Formatted content",[151,173,174],{},"Blog body, long descriptions",[133,176,177,182,185],{},[151,178,179],{},[52,180,181],{},"Image",[151,183,184],{},"Image file",[151,186,187],{},"Cover photos, avatars, thumbnails",[133,189,190,195,198],{},[151,191,192],{},[52,193,194],{},"URL",[151,196,197],{},"Web address",[151,199,200],{},"External links, social profiles",[133,202,203,208,211],{},[151,204,205],{},[52,206,207],{},"Date",[151,209,210],{},"Date/time value",[151,212,213],{},"Publish dates, event dates",[133,215,216,221,224],{},[151,217,218],{},[52,219,220],{},"Number",[151,222,223],{},"Integer or decimal",[151,225,226],{},"Prices, ratings, counts, bedrooms",[133,228,229,234,237],{},[151,230,231],{},[52,232,233],{},"Boolean",[151,235,236],{},"True/false toggle",[151,238,239],{},"Featured flag, active status",[133,241,242,247,250],{},[151,243,244],{},[52,245,246],{},"Option",[151,248,249],{},"One value from a fixed list",[151,251,252],{},"Category, status, property type",[133,254,255,260,263],{},[151,256,257],{},[52,258,259],{},"Color",[151,261,262],{},"Hex/RGB value",[151,264,265],{},"Category color coding",[133,267,268,273,276],{},[151,269,270],{},[52,271,272],{},"File",[151,274,275],{},"Downloadable file",[151,277,278],{},"PDFs, spec sheets",[133,280,281,286,289],{},[151,282,283],{},[52,284,285],{},"Reference",[151,287,288],{},"A link to one item in another collection",[151,290,291],{},"Author on a blog post",[133,293,294,299,302],{},[151,295,296],{},[52,297,298],{},"Multi-reference",[151,300,301],{},"Links to several items in another collection",[151,303,304],{},"Tags on a blog post",[133,306,307,312,315],{},[151,308,309],{},[52,310,311],{},"Gallery",[151,313,314],{},"An array of images in one field",[151,316,317],{},"Property photos, product shots",[15,319,320,321,324,325,332],{},"One hard limit worth knowing before you plan the structure: Framer documents a cap of ",[52,322,323],{},"30 custom fields per collection"," (",[326,327,331],"a",{"href":328,"rel":329},"https://www.framer.com/developers/cms",[330],"nofollow","Framer developer docs","). That is generous for a blog and tight for a listings collection that tries to hold every specification as its own field, so spend the budget deliberately.",[15,334,335],{},"Two rules that save the most rework:",[15,337,338,341],{},[52,339,340],{},"Use Number for anything you might ever filter or sort by a range."," Price, bedrooms, square footage, duration, rating. A number stored as Text can be displayed but not compared, and converting the field type after fifty items are entered means re-entering fifty items.",[15,343,344,347],{},[52,345,346],{},"Use Option, not Text, for anything that repeats from a fixed list."," Status, category, property type. An Option field gives content editors a dropdown instead of a blank box, and it's what a filter UI binds to cleanly.",[22,349],{},[25,351,353],{"id":352},"a-worked-example-blog-collection-field-structure","A Worked Example: Blog Collection Field Structure",[15,355,356],{},"Here's the field structure we'd actually ship for a blog collection, which is the most common first collection people build. This is the version after a few projects, including the fields that got added later because something broke without them.",[127,358,359,372],{},[130,360,361],{},[133,362,363,366,369],{},[136,364,365],{},"Field",[136,367,368],{},"Type",[136,370,371],{},"Why it exists",[146,373,374,384,394,404,414,424,434,445,455,465],{},[133,375,376,379,381],{},[151,377,378],{},"Title",[151,380,155],{},[151,382,383],{},"Required. Drives the H1 and the card title",[133,385,386,389,391],{},[151,387,388],{},"Slug",[151,390,155],{},[151,392,393],{},"Auto-generated from the title; edit it before publishing, never after",[133,395,396,399,401],{},[151,397,398],{},"Publish Date",[151,400,207],{},[151,402,403],{},"Required. Sorting depends on it, and so does anything date-stamped in the layout",[133,405,406,409,411],{},[151,407,408],{},"Featured Image",[151,410,181],{},[151,412,413],{},"Used for the card, the detail hero, and the social preview",[133,415,416,419,421],{},[151,417,418],{},"Excerpt",[151,420,155],{},[151,422,423],{},"Short summary for card and list views, written by hand",[133,425,426,429,431],{},[151,427,428],{},"Body",[151,430,168],{},[151,432,433],{},"The article itself",[133,435,436,439,442],{},[151,437,438],{},"Category",[151,440,441],{},"Option or Reference",[151,443,444],{},"Option if it's a simple label; Reference if categories need their own pages and metadata",[133,446,447,450,452],{},[151,448,449],{},"Author",[151,451,285],{},[151,453,454],{},"Points to an Authors collection. Skip it entirely if there's only ever one writer",[133,456,457,460,462],{},[151,458,459],{},"Featured",[151,461,233],{},[151,463,464],{},"Flags posts for a homepage or hero slot",[133,466,467,470,472],{},[151,468,469],{},"Reading Time",[151,471,220],{},[151,473,474],{},"Added later. A rich text field can't tell you its own length at design time",[15,476,477],{},"Three decisions in that table are worth explaining, because they're the ones that get made wrong:",[15,479,480,483],{},[52,481,482],{},"Excerpt and Body are separate fields, not one field truncated."," Truncating rich text for a card cuts mid-formatting and looks broken about a third of the time. A purpose-written excerpt gives you full control over what shows in a list view, and it's usually better copy than the first two lines of the article.",[15,485,486,489,490,493],{},[52,487,488],{},"Category is Option or Reference, decided by whether categories need their own pages."," If you want ",[63,491,492],{},"/blog/category/design"," to exist as a real page with a description and its own listing, category has to be a Reference to a Categories collection. If you only ever show a label on a card, an Option field is simpler and one collection lighter.",[15,495,496,499],{},[52,497,498],{},"Author is a Reference, and it's optional."," On a single-author blog, an Author reference is pure overhead, you'll type the same name into every item and design a byline that never changes. On a multi-author blog it's essential, because a bio update should happen once.",[22,501],{},[25,503,505],{"id":504},"step-3-build-the-collection-page-template","Step 3: Build the Collection Page Template",[15,507,508],{},"Once the fields exist, design the page template that every item will use.",[45,510,511,514,517,523,529],{},[48,512,513],{},"Create the collection's page template from the CMS panel. Framer handles the connection between the template and the collection.",[48,515,516],{},"Drag fields onto the page the way you'd place any content. A Title field becomes a heading, an Image field becomes an image element, a Rich Text field becomes the body. Framer binds them to live data automatically.",[48,518,519,522],{},[52,520,521],{},"Design for your most content-heavy realistic item, not your shortest."," If the longest description you'll ever publish is three paragraphs, build the layout for three paragraphs, then check how it degrades on a short one. A layout built for a long item handles a short one gracefully. The reverse almost never holds.",[48,524,525,528],{},[52,526,527],{},"Preview several real items before calling it done."," The template that looks perfect on the item you were staring at while designing will break on the one with a 90-character title or a missing optional image.",[48,530,531],{},"Set the page's SEO title and description from fields rather than hardcoding them, so every generated page gets its own metadata instead of the same string repeated across the site.",[15,533,534,535,539],{},"A component library speeds this up. Pre-built card and detail-page patterns from a ",[326,536,538],{"href":537},"/components","component library"," give you a starting point that already handles the long-title and missing-image cases, instead of discovering them yourself on a blank canvas.",[22,541],{},[25,543,545],{"id":544},"step-4-add-a-collection-list-to-a-parent-page","Step 4: Add a Collection List to a Parent Page",[15,547,548],{},"The template handles individual item pages. Visitors also need a way to find them, which means a list or grid on a parent page: a blog index, a product catalog, a listings page.",[45,550,551,558,561,564,567,570],{},[48,552,553,554,557],{},"Add a ",[52,555,556],{},"Collection List"," element to your index page.",[48,559,560],{},"Connect it to your collection.",[48,562,563],{},"Design the card layout. This is usually a reduced version of the detail page, image, title, excerpt, date, showing just enough to earn the click.",[48,565,566],{},"Set the sort order deliberately. Newest-first is the right default for a blog and the wrong one for a product catalog.",[48,568,569],{},"Set an item limit and add pagination if the collection will grow past what one page load should carry.",[48,571,572],{},"Add native Dynamic Filters if readers need to narrow the list. Bind a filter to an Option field like Category and the list reacts, no plugin required.",[15,574,575],{},"Native filtering is real and it's free. A single category dropdown or a set of tabs over one field is exactly what native Dynamic Filters are for, and reaching for anything heavier at this stage is over-engineering.",[22,577],{},[25,579,581],{"id":580},"step-5-cross-collection-references","Step 5: Cross-Collection References",[15,583,584],{},"If your content model has real relationships, a post referencing an author, a product referencing a category, use Reference fields instead of duplicating the information as text in every item.",[15,586,587],{},"The payoff is maintenance. Update an author's bio once in the Authors collection and it updates everywhere that author is referenced, instead of hunting down every post where the name and title were typed by hand.",[15,589,590,592,593,595],{},[52,591,285],{}," links one item to one item in another collection: a post to its author. ",[52,594,298],{}," links one item to several: a post to its tags. On the canvas, a Reference gives you one set of fields to place, while a multi-reference gives you a list you loop over.",[15,597,598],{},"Framer also supports adding a reference to a different collection from within a CMS detail page, which is how patterns like \"related posts\" or a link from a product to its parent category page get built without that relationship having to be the primary structure of either collection.",[15,600,601],{},"The rule we use: create a second collection when the referenced thing needs its own page or its own fields. An author needs a bio, a photo, and an archive page, so Authors is a collection. A status label like \"Draft\" or \"Live\" needs neither, so it stays an Option field.",[22,603],{},[25,605,607],{"id":606},"common-mistakes-when-setting-up-collections","Common Mistakes When Setting Up Collections",[15,609,610,613],{},[52,611,612],{},"Building the template before finalizing the fields."," Changing the field structure after the template is designed means redoing layout work. Nail down fields first, even if the start feels slower.",[15,615,616,619],{},[52,617,618],{},"One collection serving two very different content types."," If half your items are long articles and half are short announcements needing a different layout, that's two collections, not one collection carrying a pile of conditional visibility.",[15,621,622,625],{},[52,623,624],{},"No plan for empty optional fields."," Design the template to survive a missing image or a blank secondary field. Whoever adds content in six months will leave optional fields blank, and they're right to.",[15,627,628,631],{},[52,629,630],{},"Using Text where Number or Option belongs."," This is the one that costs the most later, because it blocks sorting and range filtering and can only be fixed by re-entering data.",[15,633,634,637],{},[52,635,636],{},"Editing slugs after publishing."," Framer generates the item's URL from the slug. Changing it after the page is indexed breaks the link unless you add a redirect.",[15,639,640,643],{},[52,641,642],{},"Skipping the extreme test item."," Add one item with an absurdly long title and one with the bare minimum filled in before you consider the collection done. That's where layout breakage actually gets found.",[22,645],{},[25,647,649],{"id":648},"beyond-collections-when-native-browsing-isnt-enough","Beyond Collections: When Native Browsing Isn't Enough",[15,651,652],{},"Collections plus native Dynamic Filters cover content structure and straightforward browsing well, and for most sites that's the end of the story.",[15,654,655,656,660,661,665,666,670],{},"Where they stop is advanced browsing on a collection with real scale. Native filtering has no multi-field search across several fields at once, no numeric or price range filtering, no facet counts next to each option, and no result count. If you're building a directory, a real estate listing site, or a job board on top of the structure in this tutorial, that's the wall, and ",[326,657,659],{"href":658},"/plugins/framer-cms-filter","CMS Filter"," is our plugin for exactly that gap, with multi-field search, range filters, facets with counts, sorting, and a shareable filtered URL. For where native filtering ends in detail, see our ",[326,662,664],{"href":663},"/blog/framer-dynamic-filters-guide","Dynamic Filters guide",". For the rest of the CMS surface beyond collections themselves, the ",[326,667,669],{"href":668},"/blog/framer-cms-complete-guide","complete Framer CMS guide"," covers it.",[672,673],"blog-cta",{"button-link":658,"button-text":674,"description":675,"title":676,"variant":677},"See CMS Filter","CMS Filter adds multi-field search, range filters, facets with counts and a shareable filtered URL to any Framer collection.","Collections done. Filtering next?","blue",[25,679,681],{"id":680},"faq","FAQ",[15,683,684,687],{},[52,685,686],{},"What's the difference between a CMS collection and a page in Framer?","\nA page is a single, unique piece of your site. A collection is a set of structured items (blog posts, products, listings) that each generate their own page automatically from one shared template, you design the template once, and it applies to every item.",[15,689,690,693],{},[52,691,692],{},"How do I create a collection in Framer?","\nOpen the CMS panel in the left sidebar and create a new collection. You can start empty, import a CSV, or start from Framer's sample blog structure. Name it with a plural noun, then replace the default fields with the field structure your content actually needs before you design anything.",[15,695,696,699],{},[52,697,698],{},"Can one CMS detail page reference a different collection?","\nYes, Framer supports adding a reference to another collection from within a CMS detail page, useful for related content patterns like \"related posts\" or a product's category page.",[15,701,702,705],{},[52,703,704],{},"How many fields should a collection have?","\nAs many as the content genuinely needs, and no more. Every additional field is something a content editor has to fill in and something you have to design for, unused optional fields add maintenance overhead without adding value.",[15,707,708,711],{},[52,709,710],{},"Can I use one collection for pages with different layouts?","\nNot directly, a single collection uses one shared template. If you need meaningfully different layouts for different content types, you generally want separate collections, or a field that conditionally shows/hides sections within one shared template.",[15,713,714,717],{},[52,715,716],{},"When do I need a plugin instead of just native collections?","\nWhen you need capabilities collections don't natively support well, multi-field search, price or date range filtering, facet counts, or a shareable filtered URL across many items. Native collections handle the data structure and basic filtering; a plugin like CMS Filter handles advanced browsing behavior on top of it.",{"title":719,"searchDepth":720,"depth":720,"links":721},"",2,[722,723,724,728,729,730,731,732,733,734],{"id":27,"depth":720,"text":28},{"id":42,"depth":720,"text":43},{"id":92,"depth":720,"text":93,"children":725},[726],{"id":124,"depth":727,"text":125},3,{"id":352,"depth":720,"text":353},{"id":504,"depth":720,"text":505},{"id":544,"depth":720,"text":545},{"id":580,"depth":720,"text":581},{"id":606,"depth":720,"text":607},{"id":648,"depth":720,"text":649},{"id":680,"depth":720,"text":681},"Tutorials","A hands-on tutorial for Framer CMS collections: creating one, structuring fields, connecting a page template, and generating dynamic pages from scratch.","md",false,"/framerhub/img/blog/framer-cms-collections-tutorial.webp",{"metaTitle":741,"metaDescription":736,"primaryKeyword":742,"secondaryKeywords":743,"heroImage":739,"ogImage":739,"schema":748,"createdAt":767},"Framer CMS Collections: The Complete Tutorial | FramerHub","framer cms collections",[744,745,746,747],"framer cms collections documentation","how to create a collection in framer","framer collection page template","framer reference field",[749,752],{"type":750,"headline":6,"datePublished":751,"dateModified":751},"Article","2026-10-23",{"type":753,"questions":754},"FAQPage",[755,757,759,761,763,765],{"question":686,"answer":756},"A page is a single, unique piece of your site. A collection is a set of structured items (blog posts, products, listings) that each generate their own page automatically from one shared template, you design the template once, and it applies to every item.",{"question":692,"answer":758},"Open the CMS panel in the left sidebar and create a new collection. You can start empty, import a CSV, or start from Framer's sample blog structure. Name it with a plural noun, then replace the default fields with the field structure your content actually needs before you design anything.",{"question":698,"answer":760},"Yes, Framer supports adding a reference to another collection from within a CMS detail page, useful for related content patterns like 'related posts' or a product's category page.",{"question":704,"answer":762},"As many as the content genuinely needs, and no more. Every additional field is something a content editor has to fill in and something you have to design for, unused optional fields add maintenance overhead without adding value.",{"question":710,"answer":764},"Not directly, a single collection uses one shared template. If you need meaningfully different layouts for different content types, you generally want separate collections, or a field that conditionally shows/hides sections within one shared template.",{"question":716,"answer":766},"When you need capabilities collections don't natively support well, multi-field search, price or date range filtering, facet counts, or a shareable filtered URL across many items. Native collections handle the data structure and basic filtering; a plugin like CMS Filter handles advanced browsing behavior on top of it.","2026-07-06",true,"/blog/framer-cms-collections-tutorial","2026-10-23T00:00:00.000Z",11,null,{"title":6,"description":736},"framer-cms-collections-tutorial","blog/framer-cms-collections-tutorial",[777,54,778],"Framer","Collections","jn3lQUS7dhAapj4W66zcUhO95y46-u0_7CRRtNe1XE8",{"id":781,"title":782,"author":783,"body":784,"category":735,"description":1523,"extension":737,"featured":738,"image":1524,"meta":1525,"navigation":768,"path":1542,"published":768,"publishedAt":770,"readingTime":1543,"robots":772,"seo":1544,"slug":1545,"stem":1546,"tags":1547,"updatedAt":770,"__hash__":1550},"blog/blog/framer-real-estate-website-guide.md","How to Build a Real Estate Website in Framer",{"name":8,"avatar":9,"bio":10},{"type":12,"value":785,"toc":1500},[786,789,798,800,804,807,977,980,986,992,994,998,1001,1004,1006,1010,1013,1019,1030,1036,1042,1048,1054,1056,1060,1065,1071,1077,1083,1089,1095,1101,1107,1113,1119,1125,1131,1141,1147,1151,1223,1225,1229,1235,1241,1247,1258,1264,1266,1270,1273,1276,1279,1281,1285,1288,1294,1300,1306,1317,1325,1327,1331,1337,1343,1349,1355,1357,1361,1367,1373,1379,1385,1391,1395,1398,1401,1421,1424,1426,1428,1432,1435,1439,1442,1446,1449,1453,1456,1460,1463,1465,1469,1475,1484,1491,1495],[15,787,788],{},"Real estate buyers filter aggressively. Price range, bedrooms, location, property type, often all at once, before they'll look at a single listing photo. A framer real estate site that can't handle that loses visitors before they reach the properties that would have matched.",[15,790,791,792,797],{},"This guide covers the field structure property listings actually need, what native Framer filtering does and doesn't cover for this specific vertical, and how to add the price range and combined filters buyers expect. There's a live demo of the finished filtering behaviour at ",[326,793,796],{"href":794,"target":795},"https://framercmsfilter.com/demo?demo=real-estate","_blank","framercmsfilter.com/demo?demo=real-estate",", location, property type, price range and bedrooms working together, so you can see the end state before you build it.",[22,799],{},[25,801,803],{"id":802},"structuring-property-listings-in-framers-cms","Structuring property listings in Framer's CMS",[15,805,806],{},"Real estate listings need more structured fields than almost any other CMS use case, because buyers filter on nearly every data point. This is the schema we'd ship, the same shape of data you can see being filtered in the live demo.",[127,808,809,820],{},[130,810,811],{},[133,812,813,815,817],{},[136,814,365],{},[136,816,368],{},[136,818,819],{},"Why it's this type",[146,821,822,831,843,855,865,877,889,901,913,925,935,947,957,967],{},[133,823,824,826,828],{},[151,825,378],{},[151,827,155],{},[151,829,830],{},"The listing headline (\"3-bed craftsman, Eastside\")",[133,832,833,836,840],{},[151,834,835],{},"Price",[151,837,838],{},[52,839,220],{},[151,841,842],{},"A Text price can be displayed but never range-filtered or sorted",[133,844,845,848,852],{},[151,846,847],{},"City / Neighborhood",[151,849,850],{},[52,851,246],{},[151,853,854],{},"A fixed list gives buyers a clean facet and stops \"Austin\" and \"austin \" becoming two values",[133,856,857,860,862],{},[151,858,859],{},"Full address",[151,861,155],{},[151,863,864],{},"Display only, separate from the filterable location field",[133,866,867,870,874],{},[151,868,869],{},"Bedrooms",[151,871,872],{},[52,873,220],{},[151,875,876],{},"Buyers filter \"3 or more\", which needs a numeric comparison",[133,878,879,882,886],{},[151,880,881],{},"Bathrooms",[151,883,884],{},[52,885,220],{},[151,887,888],{},"Same reason, and half-baths mean it needs decimals",[133,890,891,894,898],{},[151,892,893],{},"Square footage",[151,895,896],{},[52,897,220],{},[151,899,900],{},"Second most common range filter after price",[133,902,903,906,910],{},[151,904,905],{},"Property type",[151,907,908],{},[52,909,246],{},[151,911,912],{},"House, condo, townhouse, land",[133,914,915,918,922],{},[151,916,917],{},"Status",[151,919,920],{},[52,921,246],{},[151,923,924],{},"For sale, pending, sold — so unavailable stock can be filtered out without deleting the page",[133,926,927,930,932],{},[151,928,929],{},"Year built",[151,931,220],{},[151,933,934],{},"Optional, but it's a range filter buyers use more than agents expect",[133,936,937,940,944],{},[151,938,939],{},"Listed date",[151,941,942],{},[52,943,207],{},[151,945,946],{},"Powers \"new this week\" and newest-first sorting",[133,948,949,951,954],{},[151,950,311],{},[151,952,953],{},"Image (multiple)",[151,955,956],{},"Real estate is the most photo-dependent listing category there is",[133,958,959,962,964],{},[151,960,961],{},"Description",[151,963,168],{},[151,965,966],{},"The write-up on the detail page",[133,968,969,972,974],{},[151,970,971],{},"Listing agent",[151,973,285],{},[151,975,976],{},"Points at an Agents collection, so a bio change happens once",[15,978,979],{},"The two decisions that cost the most if you get them wrong:",[15,981,982,985],{},[52,983,984],{},"Location is two fields, not one."," A full address is for display. A City or Neighborhood Option field is what a filter binds to. Try to do both jobs with one text field and you'll end up with a filter dropdown containing forty unique addresses.",[15,987,988,991],{},[52,989,990],{},"Price, beds, baths and square footage must be Number fields from day one."," Retrofitting the field type after eighty listings are entered as text means re-entering eighty listings. This is the single most common expensive mistake on a real estate build.",[22,993],{},[25,995,997],{"id":996},"building-the-native-listing-grid","Building the native listing grid",[15,999,1000],{},"Drag a Collection List onto the page, connect it to the property collection, and design a card showing the hero image, price, city, and a bed/bath/sqft summary line. Add native Dynamic Filters bound to Property type and Status. That's a working, browsable listings page, and it's free.",[15,1002,1003],{},"For a single agent with twenty active listings, this is genuinely the right answer. Native filtering handles tabs, dropdowns, checkboxes and toggles bound to a field, it combines them with AND logic, and it drives URL parameters from the page variables behind each filter, so a filtered view is shareable. Don't reach past it until the project needs something it doesn't do.",[22,1005],{},[25,1007,1009],{"id":1008},"where-native-filtering-falls-short-for-real-estate-specifically","Where native filtering falls short for real estate specifically",[15,1011,1012],{},"Real estate is the vertical that hits the ceiling fastest, because the four things buyers filter on are exactly the four native filtering doesn't compose.",[15,1014,1015,1018],{},[52,1016,1017],{},"No price range."," Native filter controls bind a field to an option, a checkbox or a toggle. A $400k–$800k band needs a numeric range control, which isn't one of the native types.",[15,1020,1021,1024,1025,1029],{},[52,1022,1023],{},"No \"3 or more\" threshold on a numeric field."," Buyers almost never want exactly three bedrooms. Modelling \"3+\" as option values (\"1\", \"2\", \"3\", \"4+\") is the usual workaround, and it breaks the moment someone wants 3-or-more ",[1026,1027,1028],"em",{},"and"," under $700k.",[15,1031,1032,1035],{},[52,1033,1034],{},"No result count."," \"38 properties match\" is a real usability feature on a listings page, and it's the first thing a client asks for after seeing the first build.",[15,1037,1038,1041],{},[52,1039,1040],{},"No option counts on the facets."," Buyers scan \"Miami (12)\" and skip the empty neighborhoods. Without counts they click into dead ends.",[15,1043,1044,1047],{},[52,1045,1046],{},"No saved or favourited listings."," Buyers compare. A shortlist is standard behaviour on every portal they've used.",[15,1049,1050,1051,1053],{},"For the full picture of what native Dynamic Filters cover and where they stop across any CMS use case, see our ",[326,1052,664],{"href":663},".",[22,1055],{},[25,1057,1059],{"id":1058},"adding-real-estate-grade-filtering-with-cms-filter","Adding real estate-grade filtering with CMS Filter",[15,1061,1062,1064],{},[326,1063,659],{"href":658}," is our plugin, and real estate is the use case it fits best, because every gap above is one of its components.",[15,1066,1067,1070],{},[52,1068,1069],{},"Price as a real range."," A range filter type bound to the Price number field, as a dual input or a slider, with unit formatting so buyers see $450,000 rather than 450000.",[15,1072,1073,1076],{},[52,1074,1075],{},"Bedrooms and bathrooms as thresholds."," Number filters ship with eight comparison operators, so \"3 or more bedrooms\" is a setting, not a workaround.",[15,1078,1079,1082],{},[52,1080,1081],{},"Location, property type and status composed with price and beds."," AND/OR logic is composed at three levels, per filter, per filter builder, and on the collection itself, so four filters narrowing at once behaves the way buyers expect.",[15,1084,1085,1088],{},[52,1086,1087],{},"A live result count."," A count component renders \"38 properties\" against the current filter state and updates as buyers narrow.",[15,1090,1091,1094],{},[52,1092,1093],{},"Facets with option counts."," Auto-detected from the CMS option fields, so \"Miami (12)\" comes for free once the field is an Option.",[15,1096,1097,1100],{},[52,1098,1099],{},"Removable filter chips."," A buyer four filters deep can drop the price range without resetting bedrooms and location.",[15,1102,1103,1106],{},[52,1104,1105],{},"Multi-field search."," One debounced input searching across title, address and description together, rather than one field at a time.",[15,1108,1109,1112],{},[52,1110,1111],{},"Listed-date range."," A date range toggle for \"new this week\", which is the single highest-engagement filter on most portals.",[15,1114,1115,1118],{},[52,1116,1117],{},"Sorting and pagination."," Sort by price or square footage, then page through results rather than rendering four hundred listings into one scroll.",[15,1120,1121,1124],{},[52,1122,1123],{},"Saved favourites."," A favourite button on the card and a saved-listings view, so buyers can build a shortlist.",[15,1126,1127,1130],{},[52,1128,1129],{},"Desktop sidebar and mobile drawer stay in sync."," Filter surfaces sharing a store key show the same state, so a buyer who filters in the mobile drawer sees it reflected everywhere.",[15,1132,1133,1136,1137,1140],{},[52,1134,1135],{},"Shareable filtered URLs."," One ",[63,1138,1139],{},"urlSync"," toggle on the collection writes the active filter state into the URL, so an agent can send a client a link to \"3-bed condos in Eastside under $700k\" and have it open filtered.",[15,1142,1143,1144,1146],{},"The live demo runs this exact combination: ",[326,1145,796],{"href":794,"target":795},". Show it to the client before you quote the build, it's a faster conversation than a spec document.",[122,1148,1150],{"id":1149},"setup-steps","Setup steps",[45,1152,1153,1156,1166,1176,1182,1195,1205,1214],{},[48,1154,1155],{},"Install CMS Filter from the FramerHub plugin page or the Framer Marketplace.",[48,1157,1158,1159,1162,1163,1053],{},"Replace the Collection List with ",[63,1160,1161],{},"CMSCollection",", connected to the property collection, and give it a ",[63,1164,1165],{},"storeKey",[48,1167,1168,1169,1172,1173,1175],{},"Add ",[63,1170,1171],{},"CMSFilters"," with the same ",[63,1174,1165],{},". Configure a range filter on Price, number filters with a \"greater than or equal\" operator on Bedrooms and Bathrooms, and option filters on City, Property type and Status.",[48,1177,1168,1178,1181],{},[63,1179,1180],{},"CMSSearch"," across Title, Full address and Description.",[48,1183,1168,1184,66,1187,1190,1191,1194],{},[63,1185,1186],{},"CMSCount",[63,1188,1189],{},"CMSFacets"," and ",[63,1192,1193],{},"CMSClearAll"," around the grid.",[48,1196,1168,1197,1200,1201,1204],{},[63,1198,1199],{},"CMSPagination"," under the grid and ",[63,1202,1203],{},"CMSSort"," above it.",[48,1206,1207,1208,1210,1211,1213],{},"For a desktop sidebar plus a mobile filter drawer, duplicate the ",[63,1209,1171],{}," block with the same ",[63,1212,1165],{}," so both surfaces stay synchronized.",[48,1215,1216,1217,1219,1220,1222],{},"Turn on ",[63,1218,1139],{}," on ",[63,1221,1161],{}," last, then test that a filtered URL opens in the same state in a fresh browser.",[22,1224],{},[25,1226,1228],{"id":1227},"design-details-that-matter-for-real-estate-buyers","Design details that matter for real estate buyers",[15,1230,1231,1234],{},[52,1232,1233],{},"Photo quality and gallery depth."," A gallery with lightbox viewing beats a single hero image by more here than anywhere else.",[15,1236,1237,1240],{},[52,1238,1239],{},"Map placement."," Buyers want location context immediately, either as a map toggle beside the grid or embedded on the detail page. If you show a map next to a filtered grid, keep it in sync with the filter state, a map showing every property while the list shows twelve is worse than no map.",[15,1242,1243,1246],{},[52,1244,1245],{},"Status visible on the card."," A buyer who falls for a sold listing and only finds out after clicking through has a bad experience that reflects on the agent.",[15,1248,1249,1252,1253,1257],{},[52,1250,1251],{},"Fast image-heavy pages."," Multiple high-resolution photos per listing plus a filterable grid is a naturally heavy page. Serve appropriately sized images and lazy-load below the fold; our ",[326,1254,1256],{"href":1255},"/blog/optimize-framer-site-performance","performance guide"," covers the general approach.",[15,1259,1260,1263],{},[52,1261,1262],{},"Agent contact reachable from both places."," Contact details or an enquiry form should be one click away from the grid and from every property page.",[22,1265],{},[25,1267,1269],{"id":1268},"individual-property-detail-pages","Individual property detail pages",[15,1271,1272],{},"Each property needs its own page: the full gallery, complete specifications, the write-up, and a way to request a showing. Framer's CMS page templates generate one detail page per collection item from the same fields you set up for filtering, so this comes almost free once the schema is right.",[15,1274,1275],{},"Design the template for your most complete listing and check it against your thinnest one. A luxury listing with 40 photos and a 600-word description and a bare land listing with three photos and two lines have to survive the same layout.",[15,1277,1278],{},"Enquiry handling is where real estate sites leak leads. A generic \"thanks, we'll be in touch\" is weaker than confirming which agent will respond and roughly how soon. On a multi-agent site, route the enquiry using the listing agent reference field rather than dropping everything into a shared inbox.",[22,1280],{},[25,1282,1284],{"id":1283},"seo-for-real-estate-listing-pages","SEO for real estate listing pages",[15,1286,1287],{},"Real estate is a category where SEO drives genuinely high-intent traffic, because buyers search very specifically (\"3 bedroom house Austin under 500k\").",[15,1289,1290,1293],{},[52,1291,1292],{},"Give every property its own indexable detail page",", with a title and meta description built from its actual fields, address, price, bedrooms, not one template string repeated across 200 pages.",[15,1295,1296,1299],{},[52,1297,1298],{},"Use structured data"," appropriate to the listing type so price and key details can appear in the result before the click.",[15,1301,1302,1305],{},[52,1303,1304],{},"Handle sold listings deliberately."," Either redirect a sold listing to a relevant active page or keep it live with a clear sold status. Deleting pages that accumulated search value is the worst of the three options.",[15,1307,1308,1311,1312,1316],{},[52,1309,1310],{},"Build location landing pages if volume supports it."," A page for \"homes for sale in ",[1313,1314,1315],"span",{},"neighborhood","\" that links into a pre-filtered result set captures location intent the grid alone won't reach, and with URL sync on, that pre-filtered link is one you can actually create.",[15,1318,1319,1320,1324],{},"Our ",[326,1321,1323],{"href":1322},"/blog/framer-seo-guide","Framer SEO guide"," covers the site-level settings behind all of this.",[22,1326],{},[25,1328,1330],{"id":1329},"lead-capture-and-supporting-content","Lead capture and supporting content",[15,1332,1333,1336],{},[52,1334,1335],{},"Enquiry and showing-request forms"," are the conversion point on a real estate site. Validate them properly, a broken contact form on a $600k listing page is an expensive bug, not a cosmetic one, and confirm submissions are actually arriving before handover, not after.",[15,1338,1339,1342],{},[52,1340,1341],{},"A mortgage or affordability calculator"," helps buyers self-qualify before they reach out, and it's a common reason a listings site gets bookmarked.",[15,1344,1345,1348],{},[52,1346,1347],{},"Neighborhood and area guides"," support both SEO and the buyer's actual decision, and they're the content an agent can genuinely write.",[15,1350,1351,1352,1053],{},"For the collection and reference-field mechanics underneath all of this, see the ",[326,1353,1354],{"href":668},"Framer CMS complete guide",[22,1356],{},[25,1358,1360],{"id":1359},"common-real-estate-site-mistakes","Common real estate site mistakes",[15,1362,1363,1366],{},[52,1364,1365],{},"Text fields instead of Number fields for price, beds and square footage."," This blocks range and threshold filtering entirely and is usually discovered after data entry.",[15,1368,1369,1372],{},[52,1370,1371],{},"No status filter, so sold properties clutter active results."," Buyers filtering for available homes shouldn't have to click through sold ones.",[15,1374,1375,1378],{},[52,1376,1377],{},"A single low-resolution hero image instead of a real gallery."," This undersells every listing on the site.",[15,1380,1381,1384],{},[52,1382,1383],{},"No mobile filter drawer."," A large share of property searching happens on a phone, often while driving through a neighborhood. Desktop-only filtering misses that entirely.",[15,1386,1387,1390],{},[52,1388,1389],{},"Promising an MLS feed before checking what it takes."," Every real estate client raises this one first.",[122,1392,1394],{"id":1393},"what-about-mlsidx-feeds","What about MLS/IDX feeds?",[15,1396,1397],{},"Be straight about this one, because it decides whether the project is a Framer build at all.",[15,1399,1400],{},"Framer's CMS has no MLS or IDX integration. There is no native connector, and nothing in the CMS pulls a feed on a schedule. That leaves three honest routes:",[45,1402,1403,1409,1415],{},[48,1404,1405,1408],{},[52,1406,1407],{},"Manual or CSV-based listings."," The agent or their assistant maintains listings in the Framer CMS, importing via CSV when there's a batch. This is the right answer for a single agent or a small boutique brokerage with their own inventory, and it's what most of these builds actually are.",[48,1410,1411,1414],{},[52,1412,1413],{},"A server-side job that writes into the CMS."," Something outside Framer reads the feed and writes items in through Framer's Server API. This is a real software project with real maintenance, not a plugin you install, budget it as one.",[48,1416,1417,1420],{},[52,1418,1419],{},"An embedded third-party IDX widget."," Fastest to ship, and it costs you design control: the listing pages come from the vendor's iframe, not your Framer template, so the filtering and detail design in this guide stop applying to those pages.",[15,1422,1423],{},"On top of the technical route, MLS display rules are set by each local board and association, and access is typically tied to a licensed member. Confirm what the client's board allows before you quote a feed-driven build. Telling a client \"not this way, here's what it would actually take\" early is much cheaper than discovering it in week three.",[22,1425],{},[25,1427,681],{"id":680},[122,1429,1431],{"id":1430},"can-framer-handle-a-real-estate-listings-website","Can Framer handle a real estate listings website?",[15,1433,1434],{},"Yes. Framer's CMS collections work well for property listings, with each property as a collection item holding price, location, bedrooms, square footage, and images. The part native Framer doesn't cover is a price range filter and several filters composed together with a live result count, both of which real estate sites need almost by default.",[122,1436,1438],{"id":1437},"how-do-i-add-a-price-range-slider-to-a-framer-real-estate-site","How do I add a price range slider to a Framer real estate site?",[15,1440,1441],{},"Framer's native Dynamic Filters cover tabs, dropdowns, checkboxes and toggles bound to a field, not a numeric range. The CMS Filter plugin adds a range filter type that binds to a numeric CMS field as a dual input or a slider, with unit formatting for prices.",[122,1443,1445],{"id":1444},"what-cms-fields-does-a-real-estate-website-need","What CMS fields does a real estate website need?",[15,1447,1448],{},"At minimum: price, city or neighborhood, bedrooms, bathrooms, square footage, property type, status, and images. Price, bedrooms, bathrooms and square footage must be Number fields, and city, property type and status should be Option fields, or you lose range and facet filtering later.",[122,1450,1452],{"id":1451},"can-a-framer-real-estate-site-pull-listings-from-an-mls-or-idx-feed","Can a Framer real estate site pull listings from an MLS or IDX feed?",[15,1454,1455],{},"Not natively. Framer's CMS has no MLS or IDX integration, so a feed has to reach the CMS some other way: a server-side job that writes items in through Framer's Server API, or an embedded third-party IDX widget, which costs you design control over the listing pages. MLS display rules are set by each local board, so confirm them before quoting the work.",[122,1457,1459],{"id":1458},"how-do-i-filter-properties-by-bedrooms-and-price-at-the-same-time-in-framer","How do I filter properties by bedrooms and price at the same time in Framer?",[15,1461,1462],{},"You need several filters composed together. Native Dynamic Filters combine with AND logic but have no numeric range control. CMS Filter composes a price range filter, a bedrooms threshold filter, and location and property type filters in one collection, with a result count and removable filter chips.",[22,1464],{},[25,1466,1468],{"id":1467},"bottom-line","Bottom line",[15,1470,1471,1472,1474],{},"A framer real estate site lives or dies on two things: number fields set correctly on day one, and filtering that composes price, bedrooms, location and property type at once. Native Framer gets you the CMS structure, the detail pages and a browsable grid, genuinely enough for a small single-agent site. Past that, the range filter, the result count and the shareable filtered URL are what buyers expect, and that's the gap ",[326,1473,659],{"href":658}," fills.",[15,1476,1477,1478,1483],{},"If you'd rather start from a finished design, we built ",[326,1479,1482],{"href":1480,"rel":1481,"target":795},"https://www.framer.com/marketplace/templates/marren-co/",[330],"Marren & Co",", a real estate template on the Framer Marketplace. Its listings page uses CMS Filter for search, filters and sorting, with grid, map and split views, and Form Kit powers the valuation and contact forms.",[15,1485,1486,1487,1490],{},"Look at the ",[326,1488,1489],{"href":794,"target":795},"real estate filtering demo"," before you scope the project. It's the fastest way to find out whether the client wants what you're about to quote.",[672,1492],{"button-link":658,"button-text":674,"description":1493,"title":1494,"variant":677},"Price ranges, bedroom thresholds, facet counts, saved favourites and shareable filtered URLs on any Framer CMS collection.","Filtering built for listings sites",[15,1496,1497],{},[1026,1498,1499],{},"Last updated: October 2026",{"title":719,"searchDepth":720,"depth":720,"links":1501},[1502,1503,1504,1505,1508,1509,1510,1511,1512,1515,1522],{"id":802,"depth":720,"text":803},{"id":996,"depth":720,"text":997},{"id":1008,"depth":720,"text":1009},{"id":1058,"depth":720,"text":1059,"children":1506},[1507],{"id":1149,"depth":727,"text":1150},{"id":1227,"depth":720,"text":1228},{"id":1268,"depth":720,"text":1269},{"id":1283,"depth":720,"text":1284},{"id":1329,"depth":720,"text":1330},{"id":1359,"depth":720,"text":1360,"children":1513},[1514],{"id":1393,"depth":727,"text":1394},{"id":680,"depth":720,"text":681,"children":1516},[1517,1518,1519,1520,1521],{"id":1430,"depth":727,"text":1431},{"id":1437,"depth":727,"text":1438},{"id":1444,"depth":727,"text":1445},{"id":1451,"depth":727,"text":1452},{"id":1458,"depth":727,"text":1459},{"id":1467,"depth":720,"text":1468},"How to build a real estate website in Framer: structuring property listings in the CMS, adding price range sliders and multi-field filters, and the design details that matter for buyers.","/framerhub/img/blog/framer-real-estate-website-guide.webp",{"metaTitle":1526,"metaDescription":1527,"primaryKeyword":1528,"secondaryKeywords":1529,"heroImage":1524,"ogImage":1524,"schema":1533,"createdAt":767},"How to Build a Real Estate Website in Framer | FramerHub","Build a real estate website in Framer with CMS-driven listings, price range sliders, and multi-field filtering for bedrooms, location, and property type.","framer real estate",[1530,1531,1532],"framer real estate website","framer property listing","real estate website framer",[1534,1535],{"type":750,"headline":782,"datePublished":751,"dateModified":751},{"type":753,"questions":1536},[1537,1538,1539,1540,1541],{"question":1431,"answer":1434},{"question":1438,"answer":1441},{"question":1445,"answer":1448},{"question":1452,"answer":1455},{"question":1459,"answer":1462},"/blog/framer-real-estate-website-guide",12,{"title":782,"description":1523},"framer-real-estate-website-guide","blog/framer-real-estate-website-guide",[777,1548,659,1549],"Real Estate","Tutorial","NpLuGaSCH6obT7agEuTLPFYYayF_Znh7mTy2IaWRuB8",{"id":1552,"title":1553,"author":1554,"body":1555,"category":735,"description":2061,"extension":737,"featured":738,"image":2062,"meta":2063,"navigation":768,"path":2090,"published":768,"publishedAt":2091,"readingTime":2092,"robots":772,"seo":2093,"slug":2094,"stem":2095,"tags":2096,"updatedAt":2091,"__hash__":2097},"blog/blog/framer-cms-gallery-guide.md","Framer Gallery: How to Build a CMS Image Gallery (2026)",{"name":8,"avatar":9,"bio":10},{"type":12,"value":1556,"toc":2035},[1557,1560,1563,1588,1592,1595,1621,1624,1627,1631,1634,1637,1641,1644,1648,1651,1655,1658,1662,1665,1669,1675,1679,1683,1686,1772,1775,1779,1796,1801,1805,1885,1888,1892,1895,1921,1925,1931,1937,1943,1947,1979,1984,1986,1990,1993,1997,2000,2004,2007,2011,2014,2018,2021,2025,2028,2032],[15,1558,1559],{},"To build a gallery in Framer, put your images in a CMS collection, add a Collection List to the page and design one image card. That gives you a working grid in a few minutes. Framer doesn't do lightbox or masonry natively, so for a full-screen viewer, varied-height layouts or thumbnail sliders you add a gallery component connected to the same collection.",[15,1561,1562],{},"We build Framer components used by 2,000+ Framer users, including the CMS gallery components covered below, so this guide starts with what Framer does natively and only reaches for a component where native stops.",[1564,1565,1566,1571],"blockquote",{},[15,1567,1568],{},[52,1569,1570],{},"Key Takeaways",[101,1572,1573,1576,1579,1582,1585],{},[48,1574,1575],{},"A native Framer gallery is a CMS collection plus a Collection List; it's the right choice for small, uniform grids.",[48,1577,1578],{},"Framer has no native lightbox or masonry layout. Both need a component or hand-built overlay states.",[48,1580,1581],{},"Framer's built-in Slideshow and Carousel cover simple sliders; CMS-driven sliders with thumbnails need a dedicated component.",[48,1583,1584],{},"Pick the layout by content: masonry and lightbox for photography, uniform grid for products, slider for before/after work.",[48,1586,1587],{},"Galleries are the easiest pages to make slow: compress before upload and lazy-load below the fold.",[25,1589,1591],{"id":1590},"step-1-set-up-your-cms-collection","Step 1: Set up your CMS collection",[15,1593,1594],{},"Open the CMS panel and create a collection (or add fields to an existing one):",[101,1596,1597,1603,1609,1615],{},[48,1598,1599,1602],{},[52,1600,1601],{},"Image field",": the photo itself. One image per item is the simplest setup.",[48,1604,1605,1608],{},[52,1606,1607],{},"Title field",": used for alt text and captions.",[48,1610,1611,1614],{},[52,1612,1613],{},"Category field"," (optional): if you'll filter or group the gallery.",[48,1616,1617,1620],{},[52,1618,1619],{},"Order or date field",": to control the display sequence.",[15,1622,1623],{},"If each item needs several images, such as a project with ten photos, use a gallery-style field that holds multiple images per item. The slider and popup components below read that kind of field directly.",[15,1625,1626],{},"Keeping images in the CMS means adding a photo later is filling in a form, not rebuilding a layout.",[25,1628,1630],{"id":1629},"step-2-build-a-native-collection-list-grid","Step 2: Build a native Collection List grid",[15,1632,1633],{},"Drag a Collection List onto the canvas and connect it to the collection. Design the card: usually the image, cropped to a consistent aspect ratio, with the title as alt text. Set the list to a grid with fixed columns and adjust the columns per breakpoint.",[15,1635,1636],{},"For a small, uniform gallery (team photos, a short list of past projects, logo walls) this native grid may be all you need.",[25,1638,1640],{"id":1639},"step-3-where-the-native-grid-stops","Step 3: Where the native grid stops",[15,1642,1643],{},"Four gaps show up once the gallery is the point of the page.",[122,1645,1647],{"id":1646},"no-lightbox","No lightbox",[15,1649,1650],{},"Clicking an image in a native Collection List does nothing. Visitors expect a thumbnail to open a full-screen view with next/previous navigation and keyboard support. Building that by hand means wiring overlay states, click handlers and key events yourself.",[122,1652,1654],{"id":1653},"no-masonry-layout","No masonry layout",[15,1656,1657],{},"Native stacks and grids use fixed rows, so images either get cropped to the same shape or leave uneven gaps. A masonry layout, where each image keeps its natural aspect ratio and the columns flow around different heights, isn't something Framer's layout tools produce. It's the look most photography and visual portfolios want.",[122,1659,1661],{"id":1660},"simple-sliders-only","Simple sliders only",[15,1663,1664],{},"Framer's built-in Slideshow and Carousel components work for a basic swipe-through. They don't read a multi-image CMS field per item or give you a thumbnail strip, which product pages and project galleries usually need.",[122,1666,1668],{"id":1667},"basic-category-filtering","Basic category filtering",[15,1670,1671,1672,1674],{},"For a gallery split into categories (\"Weddings\", \"Portraits\", \"Events\"), Framer's native Dynamic Filters on the Collection List handle simple single-category filtering. Our ",[326,1673,664],{"href":663}," covers the setup and where native filtering runs out.",[672,1676],{"button-link":658,"button-text":674,"description":1677,"title":1678,"variant":677},"CMS Filter adds multi-field search, AND/OR logic, facets with counts and sorting to any Framer CMS collection, galleries included.","Gallery needs search or multi-filters?",[25,1680,1682],{"id":1681},"step-4-add-the-layout-you-need-with-a-cms-gallery-component","Step 4: Add the layout you need with a CMS gallery component",[15,1684,1685],{},"Each of these connects to the CMS collection you built in Step 1, so content stays editable in the CMS:",[127,1687,1688,1703],{},[130,1689,1690],{},[133,1691,1692,1695,1698,1701],{},[136,1693,1694],{},"Component",[136,1696,1697],{},"Layout",[136,1699,1700],{},"What it adds",[136,1702,835],{},[146,1704,1705,1722,1739,1756],{},[133,1706,1707,1713,1716,1719],{},[151,1708,1709],{},[326,1710,1712],{"href":1711},"/components/cms-masonry-lightbox","CMS Masonry Lightbox",[151,1714,1715],{},"Masonry, 1–12 columns",[151,1717,1718],{},"Lightbox for images and video, category filter pills (single or multi-select), 4 hover effects",[151,1720,1721],{},"$29",[133,1723,1724,1730,1733,1736],{},[151,1725,1726],{},[326,1727,1729],{"href":1728},"/components/cms-gallery-lightbox","CMS Gallery Lightbox",[151,1731,1732],{},"Masonry or fixed-height grid",[151,1734,1735],{},"GLightbox viewer with CMS-driven captions; can extract images from a custom component slot",[151,1737,1738],{},"$18",[133,1740,1741,1747,1750,1753],{},[151,1742,1743],{},[326,1744,1746],{"href":1745},"/components/cms-gallery-slider","CMS Gallery Slider",[151,1748,1749],{},"Slider with thumbnails",[151,1751,1752],{},"CMS gallery-field or manual mode, thumbnails on any side, 5 transitions",[151,1754,1755],{},"$14",[133,1757,1758,1764,1767,1770],{},[151,1759,1760],{},[326,1761,1763],{"href":1762},"/components/cms-gallery-popup","CMS Gallery Popup",[151,1765,1766],{},"Lightbox popup with thumbnails",[151,1768,1769],{},"Thumbnail strip on any side, keyboard and swipe navigation",[151,1771,1738],{},[15,1773,1774],{},"All of them are also included in the Components plugin, which has 90+ components for $99 one-time.",[122,1776,1778],{"id":1777},"setting-one-up","Setting one up",[45,1780,1781,1784,1787,1790,1793],{},[48,1782,1783],{},"Add the component to the page (from its component page, or from the Components plugin inside Framer).",[48,1785,1786],{},"Connect it to your gallery collection and map the image field, plus the title for alt text and captions.",[48,1788,1789],{},"Set columns, gaps and breakpoints in the properties panel.",[48,1791,1792],{},"Turn on the extras you need: lightbox, category pills, thumbnails or hover effects.",[48,1794,1795],{},"Preview on a phone and test the swipe and close gestures before publishing.",[672,1797],{"button-link":537,"button-text":1798,"description":1799,"title":1800,"variant":677},"See Gallery Components","Masonry, lightbox, sliders and popups that connect to your CMS collection. Edit photos in the CMS, not the canvas.","Add a finished gallery to your Framer CMS",[25,1802,1804],{"id":1803},"which-gallery-layout-fits-your-project","Which gallery layout fits your project?",[127,1806,1807,1819],{},[130,1808,1809],{},[133,1810,1811,1814,1816],{},[136,1812,1813],{},"Project",[136,1815,1697],{},[136,1817,1818],{},"Why",[146,1820,1821,1834,1846,1859,1872],{},[133,1822,1823,1828,1831],{},[151,1824,1825],{},[52,1826,1827],{},"Photography portfolio",[151,1829,1830],{},"Masonry + lightbox",[151,1832,1833],{},"Photos have different aspect ratios, and visitors want full-screen viewing",[133,1835,1836,1841,1843],{},[151,1837,1838],{},[52,1839,1840],{},"Product gallery",[151,1842,1749],{},[151,1844,1845],{},"Several images per product, browsed one at a time",[133,1847,1848,1853,1856],{},[151,1849,1850],{},[52,1851,1852],{},"Before/after or process work",[151,1854,1855],{},"Slider",[151,1857,1858],{},"The sequence matters more than an overview",[133,1860,1861,1866,1869],{},[151,1862,1863],{},[52,1864,1865],{},"Agency case studies",[151,1867,1868],{},"Grid + popup lightbox",[151,1870,1871],{},"A tidy overview, with detail on click",[133,1873,1874,1879,1882],{},[151,1875,1876],{},[52,1877,1878],{},"Team photos or logos",[151,1880,1881],{},"Native grid",[151,1883,1884],{},"Small, uniform sets don't need more",[15,1886,1887],{},"Add a component when the project needs lightbox, masonry or thumbnail behaviour. A small uniform set is fine on the native grid.",[25,1889,1891],{"id":1890},"optimising-gallery-performance","Optimising gallery performance",[15,1893,1894],{},"Galleries are among the easiest pages to make slow.",[101,1896,1897,1903,1909,1915],{},[48,1898,1899,1902],{},[52,1900,1901],{},"Compress before upload."," Uploading a 12 MB photo and letting the layout shrink it still sends 12 MB to the visitor. Resize and compress before adding images to the CMS.",[48,1904,1905,1908],{},[52,1906,1907],{},"Serve thumbnail-sized images in the grid."," Let the lightbox load the larger version only when it opens.",[48,1910,1911,1914],{},[52,1912,1913],{},"Lazy-load below the fold."," Images far down the page shouldn't load until the visitor scrolls near them. Confirm your component does this rather than assuming.",[48,1916,1917,1920],{},[52,1918,1919],{},"Cap what renders at once."," For collections with hundreds of images, use pagination, a \"load more\" pattern or a featured subset.",[25,1922,1924],{"id":1923},"captions-alt-text-and-accessibility","Captions, alt text and accessibility",[15,1926,1927,1930],{},[52,1928,1929],{},"Alt text does two jobs."," It's an accessibility requirement and it earns image-search traffic. Map the CMS title (or a dedicated alt field) to alt text instead of leaving filenames.",[15,1932,1933,1936],{},[52,1934,1935],{},"Captions give context."," For portfolios and case studies, a short caption (project, location, one line of description) helps visitors who skim.",[15,1938,1939,1942],{},[52,1940,1941],{},"Keyboard support in the lightbox."," Arrow keys should move between images and Escape should close the viewer. Test it before launch.",[25,1944,1946],{"id":1945},"common-framer-gallery-mistakes","Common Framer gallery mistakes",[101,1948,1949,1955,1961,1967,1973],{},[48,1950,1951,1954],{},[52,1952,1953],{},"Mixed aspect ratios in a fixed grid."," Either crop consistently or switch to masonry.",[48,1956,1957,1960],{},[52,1958,1959],{},"No lightbox on a photography site."," Visitors expect to click through to the full image.",[48,1962,1963,1966],{},[52,1964,1965],{},"Full-resolution files as thumbnails."," The gallery becomes the slowest page on the site.",[48,1968,1969,1972],{},[52,1970,1971],{},"No phone testing."," Sliders and lightboxes depend on swipe feel; test on a real device.",[48,1974,1975,1978],{},[52,1976,1977],{},"No empty state for filters."," If a category has no items, say so instead of showing a blank section.",[15,1980,1981,1982,1053],{},"For structuring image-heavy CMS content in general, see the ",[326,1983,1354],{"href":668},[25,1985,681],{"id":680},[122,1987,1989],{"id":1988},"can-you-build-an-image-gallery-with-framers-cms","Can you build an image gallery with Framer's CMS?",[15,1991,1992],{},"Yes. Create a collection with an image field, add a Collection List, connect it and design one card. Every item becomes a gallery tile.",[122,1994,1996],{"id":1995},"does-framer-have-a-native-lightbox","Does Framer have a native lightbox?",[15,1998,1999],{},"No. A native Collection List doesn't open a full-screen viewer. Build overlay states by hand or use a gallery component with a lightbox built in.",[122,2001,2003],{"id":2002},"how-do-i-make-a-masonry-gallery-in-framer","How do I make a masonry gallery in Framer?",[15,2005,2006],{},"Native stacks and grids use fixed rows, so a true masonry layout needs a masonry gallery component connected to your CMS collection.",[122,2008,2010],{"id":2009},"does-framer-have-a-carousel-or-slideshow","Does Framer have a carousel or slideshow?",[15,2012,2013],{},"Yes. The built-in Slideshow and Carousel components handle simple sliders. For CMS-driven sliders with thumbnails, use a dedicated slider component.",[122,2015,2017],{"id":2016},"how-do-i-filter-a-framer-gallery-by-category","How do I filter a Framer gallery by category?",[15,2019,2020],{},"Use Framer's native Dynamic Filters for simple single-category filtering. CMS Masonry Lightbox also has built-in category pills with single or multi-select.",[122,2022,2024],{"id":2023},"whats-the-best-gallery-setup-for-a-photography-portfolio-in-framer","What's the best gallery setup for a photography portfolio in Framer?",[15,2026,2027],{},"Photos in a CMS collection, a masonry layout so aspect ratios aren't cropped, and a full-screen lightbox.",[25,2029,2031],{"id":2030},"build-order","Build order",[15,2033,2034],{},"Start native: collection, Collection List, one card. Publish it and look at it on a phone. If the content is photography or the images vary in shape, switch the grid to a masonry component with a lightbox; if each item has several images, use a slider with thumbnails. Then compress your images and check the page speed before you call it done.",{"title":719,"searchDepth":720,"depth":720,"links":2036},[2037,2038,2039,2045,2048,2049,2050,2051,2052,2060],{"id":1590,"depth":720,"text":1591},{"id":1629,"depth":720,"text":1630},{"id":1639,"depth":720,"text":1640,"children":2040},[2041,2042,2043,2044],{"id":1646,"depth":727,"text":1647},{"id":1653,"depth":727,"text":1654},{"id":1660,"depth":727,"text":1661},{"id":1667,"depth":727,"text":1668},{"id":1681,"depth":720,"text":1682,"children":2046},[2047],{"id":1777,"depth":727,"text":1778},{"id":1803,"depth":720,"text":1804},{"id":1890,"depth":720,"text":1891},{"id":1923,"depth":720,"text":1924},{"id":1945,"depth":720,"text":1946},{"id":680,"depth":720,"text":681,"children":2053},[2054,2055,2056,2057,2058,2059],{"id":1988,"depth":727,"text":1989},{"id":1995,"depth":727,"text":1996},{"id":2002,"depth":727,"text":2003},{"id":2009,"depth":727,"text":2010},{"id":2016,"depth":727,"text":2017},{"id":2023,"depth":727,"text":2024},{"id":2030,"depth":720,"text":2031},"How to build an image gallery in Framer: a native CMS grid step by step, where it stops, and how to add lightbox, masonry, sliders and category filters from your CMS.","/framerhub/img/blog/framer-cms-gallery-guide.webp",{"metaTitle":2064,"metaDescription":2065,"primaryKeyword":2066,"secondaryKeywords":2067,"heroImage":2062,"ogImage":2062,"schema":2073,"createdAt":767},"Framer Gallery: Build a CMS Image Gallery (2026) | FramerHub","Build a Framer gallery from your CMS: native Collection List grid first, then add lightbox, masonry, thumbnail sliders and category filters when you need them.","framer gallery",[2068,2069,2070,2071,2072],"framer cms gallery","framer image gallery","framer gallery component","framer lightbox","framer masonry gallery",[2074,2076],{"type":750,"headline":1553,"datePublished":2075,"dateModified":2075},"2026-10-09",{"type":753,"questions":2077},[2078,2080,2082,2084,2086,2088],{"question":1989,"answer":2079},"Yes. Create a collection with an image field, add a Collection List to the page, connect it to the collection and design one card. Every item becomes a gallery tile, and new photos are added by filling in a CMS item.",{"question":1996,"answer":2081},"No. Clicking an image in a native Collection List doesn't open a full-screen viewer. You either build overlay states by hand or use a gallery component with a lightbox built in, such as CMS Masonry Lightbox or CMS Gallery Lightbox.",{"question":2003,"answer":2083},"Framer's native stacks and grids use fixed rows, so they can't produce a true masonry layout where each image keeps its own height. Use a masonry gallery component connected to your CMS collection instead.",{"question":2010,"answer":2085},"Yes. Framer's built-in Slideshow and Carousel components handle simple swipeable galleries. For CMS-driven sliders with thumbnail navigation, or effects like coverflow, use a dedicated slider component.",{"question":2017,"answer":2087},"For simple single-category filtering, use Framer's native Dynamic Filters on the Collection List. CMS Masonry Lightbox also has built-in category filter pills with single or multi-select modes.",{"question":2024,"answer":2089},"Store photos in a CMS collection, show them in a masonry layout so different aspect ratios aren't cropped, and add a full-screen lightbox, since that's how visitors view photography.","/blog/framer-cms-gallery-guide","2026-10-09T00:00:00.000Z",9,{"title":1553,"description":2061},"framer-cms-gallery-guide","blog/framer-cms-gallery-guide",[777,311,54,1549],"vbCX3fFEboMUlFaIP9XWRoHsBK99V7PF4FlDYhd1OiI",{"id":2099,"title":2100,"author":2101,"body":2102,"category":735,"description":2620,"extension":737,"featured":738,"image":2621,"meta":2622,"navigation":768,"path":2643,"published":768,"publishedAt":2644,"readingTime":771,"robots":772,"seo":2645,"slug":2646,"stem":2647,"tags":2648,"updatedAt":2644,"__hash__":2650},"blog/blog/how-to-build-forms-in-framer.md","How to Build Forms in Framer (That Actually Work)",{"name":8,"avatar":9,"bio":10},{"type":12,"value":2103,"toc":2591},[2104,2107,2110,2113,2115,2119,2122,2125,2151,2155,2178,2181,2183,2187,2190,2194,2197,2201,2204,2208,2211,2215,2218,2222,2225,2229,2232,2239,2241,2245,2252,2255,2261,2267,2273,2279,2285,2291,2297,2303,2309,2312,2317,2321,2327,2333,2339,2345,2348,2350,2354,2388,2390,2394,2400,2406,2412,2418,2424,2430,2433,2435,2439,2442,2454,2457,2459,2463,2489,2491,2495,2501,2507,2513,2516,2518,2520,2524,2527,2531,2538,2542,2545,2549,2552,2556,2559,2563,2566,2568,2570,2573,2583,2586],[15,2105,2106],{},"Every Framer site needs at least one form. A contact form, a lead capture, a quote request.",[15,2108,2109],{},"Does Framer have forms? Yes. Framer ships a native Form element, it handles submission itself, and for a straightforward contact form you need nothing else. That native element is the starting point for framer forms, so this guide starts there.",[15,2111,2112],{},"The second question is the one that brings people here: what happens when the client asks for a three-step intake form with a file upload and fields that appear based on earlier answers. That's where the native form runs out, and this guide covers exactly which piece does what, including where our own plugin stops.",[22,2114],{},[25,2116,2118],{"id":2117},"how-native-framer-forms-work","How native Framer forms work",[15,2120,2121],{},"Drag a Form element onto the canvas from the Insert panel. Add input fields, connect a submit button, and configure where the submission goes in the element's settings. Framer handles the submission path. There is no backend to write, no service to sign up for, and no plugin to install.",[15,2123,2124],{},"That covers more than people assume:",[101,2126,2127,2133,2139,2145],{},[48,2128,2129,2132],{},[52,2130,2131],{},"Over ten input types",", including text, email, message (textarea), name, number, phone, date, time and location, plus checkboxes, radio buttons and dropdown menus.",[48,2134,2135,2138],{},[52,2136,2137],{},"A submit button"," wired to the form, with success and error states you can design.",[48,2140,2141,2144],{},[52,2142,2143],{},"Basic required-field and email-format checking",", so an empty required field or an obviously malformed address doesn't sail through.",[48,2146,2147,2150],{},[52,2148,2149],{},"Submission handling",", owned by Framer and configured on the form itself, with email, Google Sheets and custom webhook destinations, plus spam protection and rate limiting.",[122,2152,2154],{"id":2153},"setting-up-a-native-framer-contact-form","Setting up a native Framer contact form",[45,2156,2157,2160,2163,2166,2169,2172,2175],{},[48,2158,2159],{},"Drag a Form element onto your page from the Insert panel.",[48,2161,2162],{},"Add the fields you need: name, email, message.",[48,2164,2165],{},"Set each field's type correctly, an email field should be the email type, not plain text, so the built-in format check applies.",[48,2167,2168],{},"Open the form's settings and configure where submissions should go.",[48,2170,2171],{},"Style the submit button and design the success and error states. A form with no visible confirmation is the most common self-inflicted conversion bug on any site.",[48,2173,2174],{},"Preview and submit a test entry.",[48,2176,2177],{},"Publish and test again on the live URL, not just in preview.",[15,2179,2180],{},"For an early-stage site with a single contact form, stop here. This is a genuinely good baseline and reaching past it costs you money and complexity you don't need yet.",[22,2182],{},[25,2184,2186],{"id":2185},"where-native-framer-forms-run-into-real-limits","Where native Framer forms run into real limits",[15,2188,2189],{},"These aren't hypothetical. They're what shows up the moment a client asks for something past \"name, email, message\".",[122,2191,2193],{"id":2192},"field-depth","Field depth",[15,2195,2196],{},"The native set is broader than people expect, and it still runs out. Date, time, phone and number inputs are there. What isn't: a rating, an NPS scale, a signature pad, a country selector, a rich text input, or a repeatable field group. On a quote request or an application form, that gap is a real part of the form.",[122,2198,2200],{"id":2199},"validation-depth","Validation depth",[15,2202,2203],{},"Required and email-format are the extent of it. There's no minimum length, no maximum length, no phone or URL format rule, no regex pattern, and no way to write the error message yourself. \"This field is required\" is fine; \"Enter a UK postcode, like SW1A 1AA\" is what actually reduces abandonment.",[122,2205,2207],{"id":2206},"no-conditional-fields","No conditional fields",[15,2209,2210],{},"Every field is always visible. A form that asks \"are you an agency or a freelancer?\" and then shows different follow-up questions isn't possible natively, you either show everything to everyone or split it into separate pages.",[122,2212,2214],{"id":2213},"no-file-uploads","No file uploads",[15,2216,2217],{},"There's no upload field type. Job applications, quote requests with reference images, and support forms needing a screenshot all stop here.",[122,2219,2221],{"id":2220},"no-multi-step","No multi-step",[15,2223,2224],{},"Long forms convert better broken into steps with a progress indicator. The native form is single-step, so a fifteen-field form is a fifteen-field scroll.",[122,2226,2228],{"id":2227},"spam-handling","Spam handling",[15,2230,2231],{},"Any public form on any platform attracts bots eventually. Native Framer gives you basic protection; a captcha you choose and configure is a different level of control.",[15,2233,2234,2235,2238],{},"Submission itself is ",[1026,2236,2237],{},"not"," on that list. Framer's submission handling works. Sending limits, wherever they apply, belong to your Framer plan, no component plugin can raise them, and any article claiming a plugin removes them is describing a feature that doesn't exist.",[22,2240],{},[25,2242,2244],{"id":2243},"adding-the-missing-fields-with-framer-form-kit-plugin","Adding the missing fields with Framer Form Kit Plugin",[15,2246,2247,2251],{},[326,2248,2250],{"href":2249},"/plugins/framer-form-kit","Framer Form Kit"," is our plugin: a collection of field components that live inside Framer's native form. It doesn't replace the form, wrap it, or take over submission. You keep the native Form element and swap the fields inside it.",[15,2253,2254],{},"That also draws the boundary around what it fixes. It can solve everything in the list above. It cannot solve anything on the submission side, and it doesn't try to.",[15,2256,2257,2260],{},[52,2258,2259],{},"Field components, free."," Text, email, number, phone, URL, textarea, select, checkbox, and the submit button. That's the working set for most forms, and it costs nothing.",[15,2262,2263,2266],{},[52,2264,2265],{},"Validation, free."," Required rules, email/phone/URL format checks, minimum and maximum length, custom regex patterns, and your own error message per rule, shown inline when the field loses focus rather than after a failed submit.",[15,2268,2269,2272],{},[52,2270,2271],{},"Conditional logic, free."," Show, hide, enable, or disable a field based on another field's value, with eight comparison operators and AND/OR grouping. Hidden fields skip validation, which is the detail that makes conditional forms actually usable, a hidden required field that silently blocks submit is the classic bug here.",[15,2274,2275,2278],{},[52,2276,2277],{},"Multi-step, premium."," Split one form into steps, with a progress indicator, validation on each step before the reader can advance, and autosave to the browser so a half-filled form survives a reload.",[15,2280,2281,2284],{},[52,2282,2283],{},"File upload, premium."," Single file, multiple files, or image-only, with preview and upload progress.",[15,2286,2287,2290],{},[52,2288,2289],{},"Captcha, premium."," reCAPTCHA, hCaptcha, or Turnstile, you pick which, rather than getting whichever one the plugin author preferred.",[15,2292,2293,2296],{},[52,2294,2295],{},"URL parameter prefill and UTM capture, premium."," Read values out of the URL into fields, visible or hidden, so campaign attribution rides along with the submission.",[15,2298,2299,2302],{},[52,2300,2301],{},"Specialised inputs, premium and Pro."," Signature pad, rich text, colour picker, country selector with flags, NPS, rating, scale, slider, repeater, reset button.",[15,2304,2305,2308],{},[52,2306,2307],{},"One honest note about the free tier:"," the free submit button renders a small \"Powered by Framer Form Kit\" credit. It's not hidden in the settings, and you'd rather hear it here than discover it after you've built the form.",[15,2310,2311],{},"What Form Kit does not do matters just as much, because other pages on this topic will tell you otherwise. It does not send email. It does not post webhooks, and there is no Zapier, Make, or n8n connector. There is no Google Sheets, Notion, HubSpot, Airtable, or Mailchimp integration, and no payment collection. If a form you're scoping depends on any of those, that's a plan-and-tooling conversation before you build, not something to discover at handover.",[672,2313],{"button-link":2249,"button-text":2314,"description":2315,"title":2316,"variant":677},"See Form Kit","Validation, conditional logic, multi-step, file upload and captcha, all inside Framer's native form. Free tier available.","The fields Framer's form doesn't ship",[25,2318,2320],{"id":2319},"where-your-submissions-actually-go","Where your submissions actually go",[15,2322,2323,2326],{},[52,2324,2325],{},"Framer owns submission."," The Form element you dragged onto the canvas is still the thing that submits. Form Kit's submit button asks that native form to submit; it does not open its own connection to anywhere.",[15,2328,2329,2332],{},[52,2330,2331],{},"So submissions follow whatever you configured in Framer",", and the place to check whether one arrived is Framer, not the plugin.",[15,2334,2335,2338],{},[52,2336,2337],{},"Any sending limits are Framer's."," They're a function of your Framer plan. Adding field components changes nothing about them, in either direction.",[15,2340,2341,2344],{},[52,2342,2343],{},"One exception, and it's narrow."," Uploaded files can't travel inside a normal form submission, so the file upload component uploads the file to Form Kit's own storage and puts the resulting file URL into the form. What reaches your submission is a link to the file, not the file itself. Worth knowing when you're deciding whether that's acceptable for the kind of documents your client's form will receive.",[15,2346,2347],{},"That's the entire architecture, and it tells you where to look when something goes wrong.",[22,2349],{},[25,2351,2353],{"id":2352},"setting-up-form-kit-step-by-step","Setting up Form Kit: step by step",[45,2355,2356,2364,2367,2370,2373,2376,2379,2382,2385],{},[48,2357,2358,2359,1053],{},"Open the Framer Form Kit plugin from ",[326,2360,2363],{"href":2361,"rel":2362},"https://www.framer.com/marketplace/plugins/framer-form-kit/",[330],"the Framer form kit plugin page",[48,2365,2366],{},"Keep your native Framer Form element. Add Form Kit's field components inside it.",[48,2368,2369],{},"Replace the native inputs with the matching Form Kit fields, and give each one a name, that name is what identifies the value in the submission.",[48,2371,2372],{},"Configure validation per field in the properties panel: required, format, length, custom pattern, and the message the reader sees.",[48,2374,2375],{},"Add conditional rules where a field should only appear based on an earlier answer, and confirm the hidden branch doesn't block submit.",[48,2377,2378],{},"For a long form, group fields into steps and add the progress and next/back components.",[48,2380,2381],{},"Add a captcha before launch if the form is publicly reachable.",[48,2383,2384],{},"Confirm the submission destination on the native Form element, since that is still where submissions are handled.",[48,2386,2387],{},"Test the whole flow, including a deliberately invalid submission and one on a phone, and confirm the entry arrives where you expect.",[22,2389],{},[25,2391,2393],{"id":2392},"common-form-types-and-what-they-actually-need","Common form types and what they actually need",[15,2395,2396,2399],{},[52,2397,2398],{},"Simple contact form."," Name, email, message. Native Framer handles this. Don't add a plugin to a form this size.",[15,2401,2402,2405],{},[52,2403,2404],{},"Quote request form."," Needs more fields and conditional branching, show a budget range only after a project type is picked, so incomplete requests stop reaching sales. Conditional logic is the piece doing the work here, and it's on the free tier.",[15,2407,2408,2411],{},[52,2409,2410],{},"Job application form."," Needs a file upload for the CV, plus enough fields that multi-step is usually worth it. This is the clearest case where native Framer can't do the job at all.",[15,2413,2414,2417],{},[52,2415,2416],{},"Multi-step intake or onboarding form."," Progress indication and per-step validation are what stop a long form feeling long. Autosave matters more than people expect, because readers do reload.",[15,2419,2420,2423],{},[52,2421,2422],{},"Event registration."," A select for ticket type, a date field, and a captcha, because public registration forms are a spam magnet.",[15,2425,2426,2429],{},[52,2427,2428],{},"Support or bug report form."," File upload for screenshots plus structured fields (severity, page URL, browser) so the report arrives usable instead of starting a five-email thread.",[15,2431,2432],{},"Multi-step forms, file upload, conditional logic, and the submissions question each deserve more room than one paragraph. We're writing a proper guide for each of the four, and this page will link to them as they go up.",[22,2434],{},[25,2436,2438],{"id":2437},"designing-the-rest-of-the-page-around-your-form","Designing the rest of the page around your form",[15,2440,2441],{},"A form rarely lives alone. Contact, quote, and application pages usually need a short trust-building intro, an FAQ block, some social proof, and clear next-step messaging after submission.",[15,2443,2444,2445,2448,2449,2453],{},"Rather than custom-building those per project, ",[326,2446,2447],{"href":537},"FramerHub Components"," covers the accordions, testimonial sliders, and stat blocks that surround a form, so the page comes together while you spend your time on the form logic. The full ",[326,2450,2452],{"href":2451},"/plugins","plugin catalog"," covers what else pairs with a form-driven page.",[15,2455,2456],{},"The state after submit gets less attention than it deserves. \"Thanks, we'll be in touch\" is a wasted screen. Say who will respond and roughly when, and the same form starts feeling like a business rather than a void.",[22,2458],{},[25,2460,2462],{"id":2461},"testing-checklist-before-you-launch-a-form","Testing checklist before you launch a form",[101,2464,2465,2468,2471,2474,2477,2480,2483,2486],{},[48,2466,2467],{},"Submit a valid entry and confirm it arrives where you configured it",[48,2469,2470],{},"Submit an invalid entry, missing required field, malformed email, and confirm the inline error is clear and specific",[48,2472,2473],{},"Trigger every conditional branch, and confirm a hidden required field never blocks submit",[48,2475,2476],{},"On a multi-step form, confirm each step validates before advancing, and reload mid-form to check autosave",[48,2478,2479],{},"If using file upload, test an oversized file and confirm the limit is communicated rather than silently failing",[48,2481,2482],{},"Test on a real phone, since field spacing and keyboard behaviour differ from desktop",[48,2484,2485],{},"Confirm the captcha doesn't block a legitimate submission",[48,2487,2488],{},"Confirm the success state actually renders, rather than leaving a blank screen",[22,2490],{},[25,2492,2494],{"id":2493},"choosing-the-right-approach-for-your-project","Choosing the right approach for your project",[15,2496,2497,2500],{},[52,2498,2499],{},"Use native Framer forms when"," it's a straightforward contact form, you don't need file uploads or conditional fields, and the field types you need are already there. This is more projects than plugin vendors like to admit.",[15,2502,2503,2506],{},[52,2504,2505],{},"Use Form Kit when"," the form needs real validation, conditional fields, multiple steps, a file upload, or an input type Framer doesn't ship, and you want it to look like part of the page rather than an embed.",[15,2508,2509,2512],{},[52,2510,2511],{},"Use Tally or Typeform when"," the form itself is the product: a long survey, a quiz, complex logic and reporting, or a workflow your team will manage without a designer. Tally's free tier is genuinely generous and the embed works. What it costs you is design control, the form arrives in an iframe with its own layout rules, and on a carefully designed page it reads as a widget.",[15,2514,2515],{},"There's no universal right answer here. The question is whether the form is a piece of your page or a system of its own.",[22,2517],{},[25,2519,681],{"id":680},[122,2521,2523],{"id":2522},"does-framer-have-forms","Does Framer have forms?",[15,2525,2526],{},"Yes. Framer ships a native Form element with input fields, a submit button, and its own submission handling, and it needs no plugin. It covers a straightforward contact form well. What it doesn't cover is field depth: multi-step flows, file uploads, conditional fields, and validation with custom messages.",[122,2528,2530],{"id":2529},"where-do-framer-form-submissions-go","Where do Framer form submissions go?",[15,2532,2533,2534,2537],{},"Framer handles submission itself, so submissions follow whatever destination you configure on the native Form element inside Framer. A component plugin like ",[326,2535,2536],{"href":2249},"Form Kit"," adds fields and validation inside that same native form; it does not take over the submission path, and any sending limits are Framer's, not the plugin's.",[122,2539,2541],{"id":2540},"can-framer-forms-have-file-uploads","Can Framer forms have file uploads?",[15,2543,2544],{},"Framer's native form has no file upload field. Form Kit's premium file upload component adds one, with single, multiple, and image-only modes plus preview and progress. The file is uploaded to Form Kit's own storage and the resulting file URL is what gets stored with the submission.",[122,2546,2548],{"id":2547},"how-do-i-add-validation-to-a-framer-form","How do I add validation to a Framer form?",[15,2550,2551],{},"Native Framer forms validate required fields and basic email format. Form Kit's free field components add required rules, email, phone and URL format checks, minimum and maximum length, custom regex patterns, and custom error messages shown inline when a field loses focus.",[122,2553,2555],{"id":2554},"can-i-build-a-multi-step-form-in-framer","Can I build a multi-step form in Framer?",[15,2557,2558],{},"Not with the native Form element alone, which is single-step. Form Kit's premium multi-step components split one form into steps with a progress indicator, validation per step before the reader can advance, and autosave so a partly filled form survives a reload.",[122,2560,2562],{"id":2561},"whats-the-difference-between-framers-native-form-and-form-kit","What's the difference between Framer's native form and Form Kit?",[15,2564,2565],{},"Framer's native form owns submission. Form Kit is a collection of field components that live inside that native form, adding validation, conditional logic, multi-step flows, file upload, captcha, and specialised inputs like signature, rating and NPS. You use both together, not one instead of the other.",[22,2567],{},[25,2569,1468],{"id":1467},[15,2571,2572],{},"Native framer forms are the right answer more often than the internet suggests. A contact form on a small site needs nothing more, and adding a plugin to it is work you'll maintain for no gain.",[15,2574,2575,2576,2578,2579,1053],{},"What native forms don't give you is field depth: validation you can word yourself, fields that appear based on earlier answers, steps, uploads, and the specialised inputs that a real intake form is mostly made of. That's the gap ",[326,2577,2536],{"href":2249}," fills, inside Framer's own form rather than around it. Setup docs and live demos are at ",[326,2580,2582],{"href":2581,"target":795},"https://framerformkit.com","framerformkit.com",[15,2584,2585],{},"Whichever you pick, decide once and standardise across projects. Knowing the validation behaviour, the upload limits, and where submissions land before you start is worth more than re-litigating the choice on every build.",[15,2587,2588],{},[1026,2589,2590],{},"Last updated: August 2026",{"title":719,"searchDepth":720,"depth":720,"links":2592},[2593,2596,2604,2605,2606,2607,2608,2609,2610,2611,2619],{"id":2117,"depth":720,"text":2118,"children":2594},[2595],{"id":2153,"depth":727,"text":2154},{"id":2185,"depth":720,"text":2186,"children":2597},[2598,2599,2600,2601,2602,2603],{"id":2192,"depth":727,"text":2193},{"id":2199,"depth":727,"text":2200},{"id":2206,"depth":727,"text":2207},{"id":2213,"depth":727,"text":2214},{"id":2220,"depth":727,"text":2221},{"id":2227,"depth":727,"text":2228},{"id":2243,"depth":720,"text":2244},{"id":2319,"depth":720,"text":2320},{"id":2352,"depth":720,"text":2353},{"id":2392,"depth":720,"text":2393},{"id":2437,"depth":720,"text":2438},{"id":2461,"depth":720,"text":2462},{"id":2493,"depth":720,"text":2494},{"id":680,"depth":720,"text":681,"children":2612},[2613,2614,2615,2616,2617,2618],{"id":2522,"depth":727,"text":2523},{"id":2529,"depth":727,"text":2530},{"id":2540,"depth":727,"text":2541},{"id":2547,"depth":727,"text":2548},{"id":2554,"depth":727,"text":2555},{"id":2561,"depth":727,"text":2562},{"id":1467,"depth":720,"text":1468},"How to build forms in Framer: what the native Form element covers, where it runs out, and how to add validation, multi-step flows, conditional fields and file uploads.","/framerhub/img/blog/how-to-build-forms-in-framer.webp",{"metaTitle":2623,"metaDescription":2624,"primaryKeyword":2625,"secondaryKeywords":2626,"heroImage":2621,"ogImage":2621,"schema":2631,"createdAt":767},"How to Build Forms in Framer That Actually Work | FramerHub","Native Framer forms cover the basics. Here's how to add real validation, multi-step flows, conditional fields and file uploads without leaving Framer.","framer forms",[2627,2628,2629,2630],"does framer have forms","framer form validation","framer form builder","best forms for framer",[2632,2634],{"type":750,"headline":2100,"datePublished":2633,"dateModified":2633},"2026-09-04",{"type":753,"questions":2635},[2636,2637,2639,2640,2641,2642],{"question":2523,"answer":2526},{"question":2530,"answer":2638},"Framer handles submission itself, so submissions follow whatever destination you configure on the native Form element inside Framer. A component plugin like Form Kit adds fields and validation inside that same native form; it does not take over the submission path, and any sending limits are Framer's, not the plugin's.",{"question":2541,"answer":2544},{"question":2548,"answer":2551},{"question":2555,"answer":2558},{"question":2562,"answer":2565},"/blog/how-to-build-forms-in-framer","2026-09-04T00:00:00.000Z",{"title":2100,"description":2620},"how-to-build-forms-in-framer","blog/how-to-build-forms-in-framer",[777,2649,2536,1549],"Forms","P82Uo2YruuqBp6Yl-LPbXlZl0XeOB6jQ1AcxAFE2XQo",{"id":2652,"title":2653,"author":2654,"body":2655,"category":735,"description":3672,"extension":737,"featured":738,"image":3673,"meta":3674,"navigation":768,"path":663,"published":768,"publishedAt":3699,"readingTime":1543,"robots":772,"seo":3700,"slug":3701,"stem":3702,"tags":3703,"updatedAt":3705,"__hash__":3706},"blog/blog/framer-dynamic-filters-guide.md","Framer Dynamic Filters Guide: Where Native Filtering Stops",{"name":8,"avatar":9,"bio":10},{"type":12,"value":2656,"toc":3633},[2657,2660,2663,2670,2673,2680,2682,2686,2689,2692,2703,2706,2709,2715,2721,2723,2727,2730,2736,2740,2743,2746,2750,2753,2756,2760,2763,2766,2770,2773,2776,2780,2783,2786,2788,2792,2795,2800,2803,2809,2814,2817,2823,2828,2831,2837,2842,2845,2851,2856,2859,2865,2870,2873,2879,2884,2887,2893,2896,2898,2902,2905,2911,2917,2923,2929,2932,2938,2940,2944,2947,2950,2956,2960,2963,2970,2974,2977,2981,2984,2987,2991,3000,3004,3010,3014,3017,3028,3034,3038,3041,3045,3048,3052,3056,3293,3296,3298,3302,3305,3311,3315,3318,3323,3329,3333,3336,3342,3346,3349,3352,3356,3359,3362,3371,3373,3377,3380,3387,3402,3422,3434,3443,3451,3462,3474,3481,3483,3487,3490,3539,3542,3545,3547,3549,3553,3556,3560,3563,3567,3573,3577,3580,3584,3590,3592,3594,3597,3600,3606,3617,3629],[15,2658,2659],{},"You got the brief. Real estate listings. A car marketplace. A job board. A directory with 200+ items.",[15,2661,2662],{},"The client wants filtering like Amazon. Price range slider. Filter by location. Filter by type. All at once. Remove one filter without clearing the rest.",[15,2664,2665,2666,2669],{},"You open Framer, find ",[52,2667,2668],{},"framer dynamic filters"," in the CMS panel, and start wiring things up. For one dropdown, it works great. Then you try to combine search, sort, and a price range at the same time. That's where things stop.",[15,2671,2672],{},"This guide covers what native Framer Dynamic Filters actually do well, how to set them up step by step, and what to reach for when your project needs more than a single dropdown.",[15,2674,2675],{},[2676,2677],"img",{"alt":2678,"src":2679},"Real Estate Listing with Framer Dynamic Filters","/framerhub/img/blog/framer-dynamic-filters-guide/real-estate-listing-framer-dynamic-filters.webp",[22,2681],{},[25,2683,2685],{"id":2684},"what-are-framer-dynamic-filters","What are Framer Dynamic Filters?",[15,2687,2688],{},"Framer Dynamic Filters are native filtering controls that shipped in early 2026. They let you connect CMS fields to page variables. When a visitor clicks a tab or types in a search box, the collection list updates instantly without a page reload.",[15,2690,2691],{},"The core idea is simple:",[45,2693,2694,2697,2700],{},[48,2695,2696],{},"A CMS field (category, tag, location, price) binds to a page variable",[48,2698,2699],{},"A filter control (dropdown, tab, search input) updates that variable when a visitor interacts",[48,2701,2702],{},"The collection list re-renders showing only items that match the variable value",[15,2704,2705],{},"The key shift from older Framer filtering: no variants. Before Dynamic Filters, showing filtered states meant creating a separate variant for each filter combination. Five categories times four price tiers equals 20 variants to build and maintain. One CMS update meant touching 20 frames. Dynamic Filters eliminated that entirely.",[15,2707,2708],{},"Filter controls are also not tied to the collection list's position. You can place a search bar in the header, tabs in a sticky nav, and a checkbox group in a sidebar. All of them control the same collection. That layout flexibility matters for real site designs.",[15,2710,2711],{},[2676,2712],{"alt":2713,"src":2714},"Framer Dynamic Filters configuration panel","/framerhub/img/blog/framer-dynamic-filters-guide/framer-dynamic-filters-config-panel.webp",[15,2716,2717,2718,2720],{},"For a deeper look at how Framer's CMS system works overall, the ",[326,2719,1354],{"href":668}," covers collections, schemas, and content structure from the ground up.",[22,2722],{},[25,2724,2726],{"id":2725},"the-5-native-filter-types-in-framer","The 5 native filter types in Framer",[15,2728,2729],{},"Framer ships five filter control types. Each covers a different interaction pattern.",[15,2731,2732],{},[2676,2733],{"alt":2734,"src":2735},"Five native Framer Dynamic Filter types shown side by side: search, tabs, dropdown, checkboxes, and toggle","/framerhub/img/blog/framer-dynamic-filters-guide/framer-dynamic-filters-types.webp",[122,2737,2739],{"id":2738},"search-field","Search field",[15,2741,2742],{},"A text input that filters the collection as the visitor types. Matches against one CMS text field (title, name, or description). Real-time updates, no submit button needed.",[15,2744,2745],{},"Works well for: blog archives, team directories, simple resource libraries.",[122,2747,2749],{"id":2748},"dynamic-tabs","Dynamic tabs",[15,2751,2752],{},"Horizontal pill or tab-style buttons. Each button represents one value from a CMS option field. Clicking filters to that value.",[15,2754,2755],{},"Works well for: category switching on portfolios, product type filters on simple sites, \"All / Beginner / Advanced\" on course libraries.",[122,2757,2759],{"id":2758},"dropdowns","Dropdowns",[15,2761,2762],{},"A select menu. Visitor picks one value from a CMS option field.",[15,2764,2765],{},"Works well for: location filters, single-value attribute selectors, industry or sector filters.",[122,2767,2769],{"id":2768},"checkboxes","Checkboxes",[15,2771,2772],{},"Multi-select. Visitors pick several values and see results matching any selected option. OR logic within the filter.",[15,2774,2775],{},"Works well for: tag filters, feature filters, multi-category filtering where OR logic is acceptable.",[122,2777,2779],{"id":2778},"toggles","Toggles",[15,2781,2782],{},"Boolean control. Shows or hides items based on a true/false CMS field. Think \"Remote only,\" \"Featured,\" or \"Available now.\"",[15,2784,2785],{},"Works well for: availability states, featured-item highlights, boolean attribute filtering.",[22,2787],{},[25,2789,2791],{"id":2790},"how-to-set-up-framer-dynamic-filters-step-by-step","How to set up Framer Dynamic Filters: step by step",[15,2793,2794],{},"Setting up native filters takes under ten minutes on a clean project.",[15,2796,2797],{},[52,2798,2799],{},"Step 1: Build your CMS collection",[15,2801,2802],{},"Open the CMS panel. Create or select a collection. Confirm you have the right field types: option fields for tabs, dropdowns, and checkboxes; text fields for search; boolean fields for toggles.",[15,2804,2805],{},[2676,2806],{"alt":2807,"src":2808},"Framer CMS collection setup with option and text fields","/framerhub/img/blog/framer-dynamic-filters-guide/framer-cms-collection-setup.webp",[15,2810,2811],{},[52,2812,2813],{},"Step 2: Add a Collection List to your canvas",[15,2815,2816],{},"Drag a Collection List onto your page. Connect it to your collection. Design the item card.",[15,2818,2819],{},[2676,2820],{"alt":2821,"src":2822},"Framer Collection List on canvas","/framerhub/img/blog/framer-dynamic-filters-guide/framer-collection-list-on-canvas.webp",[15,2824,2825],{},[52,2826,2827],{},"Step 3: Open the Filters panel",[15,2829,2830],{},"Select the Collection List. Open the right sidebar and find the Filters tab.",[15,2832,2833],{},[2676,2834],{"alt":2835,"src":2836},"Framer Filters panel open for a Collection List","/framerhub/img/blog/framer-dynamic-filters-guide/framer-filters-panel.webp",[15,2838,2839],{},[52,2840,2841],{},"Step 4: Add a filter",[15,2843,2844],{},"Click \"Add Filter.\" Pick a type. Select the CMS field it should operate on. Framer creates a filter control and a page variable automatically.",[15,2846,2847],{},[2676,2848],{"alt":2849,"src":2850},"Add Filter button in Framer Filters panel","/framerhub/img/blog/framer-dynamic-filters-guide/add-filter-button.webp",[15,2852,2853],{},[52,2854,2855],{},"Step 5: Place the filter control",[15,2857,2858],{},"The control appears as a layer. Move it wherever your design needs it: above the collection, in a sidebar, in the header. It's decoupled from the collection list.",[15,2860,2861],{},[2676,2862],{"alt":2863,"src":2864},"Framer filter control on canvas","/framerhub/img/blog/framer-dynamic-filters-guide/framer-filter-control-on-canvas.webp",[15,2866,2867],{},[52,2868,2869],{},"Step 6: Add more filters",[15,2871,2872],{},"Repeat Steps 4 and 5 for each filter field. Multiple filters stack as AND logic by default. Each active filter narrows the collection further.",[15,2874,2875],{},[2676,2876],{"alt":2877,"src":2878},"Multiple filters in Framer Filters panel","/framerhub/img/blog/framer-dynamic-filters-guide/multiple-filters.webp",[15,2880,2881],{},[52,2882,2883],{},"Step 7: Preview and test",[15,2885,2886],{},"Use Preview mode (Cmd+P or Ctrl+P). Click your filter options, type in the search field, confirm the collection updates correctly.",[15,2888,2889],{},[2676,2890],{"alt":2891,"src":2892},"Framer Dynamic Filters preview mode","/framerhub/img/blog/framer-dynamic-filters-guide/framer-dynamic-filters-preview-mode.webp",[15,2894,2895],{},"That's the full native setup. For a single-filter use case on a small collection, this is all you need.",[22,2897],{},[25,2899,2901],{"id":2900},"where-native-framer-dynamic-filters-work-well","Where native Framer Dynamic Filters work well",[15,2903,2904],{},"Native filters are the right tool when your use case is genuinely simple.",[15,2906,2907,2910],{},[52,2908,2909],{},"Blog with category tabs."," Ten posts, five categories. Visitors click a tab to see posts in that category. One filter, one option field, done.",[15,2912,2913,2916],{},[52,2914,2915],{},"Portfolio with project type filter."," A designer's portfolio with a dropdown to filter by industry. Clean, fast, no maintenance.",[15,2918,2919,2922],{},[52,2920,2921],{},"Team page with department filter."," Department tabs on a small team directory. One filter dimension.",[15,2924,2925,2928],{},[52,2926,2927],{},"Simple resource library."," A collection of 30-50 resources with a category dropdown.",[15,2930,2931],{},"In all these cases, native Dynamic Filters do the job. Adding a plugin would introduce unnecessary complexity. Use the simpler tool.",[15,2933,2934],{},[2676,2935],{"alt":2936,"src":2937},"Simple blog page using native Framer Dynamic Filters with category tab navigation","/framerhub/img/blog/framer-dynamic-filters-guide/simple-blog-page-using-native-framer-dynamic-filters.webp",[22,2939],{},[25,2941,2943],{"id":2942},"where-native-filters-fall-short-for-real-cms-sites","Where native filters fall short for real CMS sites",[15,2945,2946],{},"This is where the gap becomes visible. These are not edge cases. They're standard requirements for directories, job boards, real estate listings, car marketplaces, and any serious listing site.",[15,2948,2949],{},"I've seen Framer designers hit this same wall. You start with one dropdown, it works great. Then the client says \"I want a price range filter like Amazon.\" Or \"users need to filter by location AND property type AND bedrooms all at once.\" Or you try to build a desktop sidebar that stays in sync with a mobile drawer. That's where native filtering stops.",[15,2951,2952],{},[2676,2953],{"alt":2954,"src":2955},"Comparison of native Framer filtering versus Framer CMS Filter plugin for a real estate directory site","/framerhub/img/blog/framer-dynamic-filters-guide/comparison-of-native-framer-filtering-versus-framer-cms-filter-plugin.webp",[122,2957,2959],{"id":2958},"multi-field-search","Multi-field search",[15,2961,2962],{},"Native search matches against one CMS text field. If your job board has a title, description, company name, and tags, visitors can only search one field. They type \"product designer\" and only the title is searched. Matching descriptions and tags are invisible.",[15,2964,2965,2966,2969],{},"The ",[326,2967,2968],{"href":658},"CMS Filter plugin"," runs search across multiple fields simultaneously: title, description, tags, and author in one query.",[122,2971,2973],{"id":2972},"sorting","Sorting",[15,2975,2976],{},"Native Dynamic Filters have no built-in sorting. Visitors can't sort by price, date, relevance, or name. For any collection where order matters to the visitor, this is a hard gap.",[122,2978,2980],{"id":2979},"active-filter-chips-users-can-remove","Active filter chips users can remove",[15,2982,2983],{},"When a visitor applies three filters, native Framer shows nothing that tells them what's active. No chips. No \"you're viewing: Remote / Design / London.\" They can't remove one filter without clearing everything.",[15,2985,2986],{},"Active filter chips are standard UX on any real filtering experience. They communicate what's applied and let visitors refine without starting over. That's the \"filter by location, price, and type all at once, then remove just the price filter\" experience clients ask for.",[122,2988,2990],{"id":2989},"result-counts","Result counts",[15,2992,2993,2994,2996,2997,2999],{},"Knowing there are \"14 results\" before clicking a filter helps visitors make better decisions. Native Dynamic Filters don't display a result count. The ",[326,2995,2968],{"href":658}," includes a ",[63,2998,1186],{}," component that updates in real time as filters change.",[122,3001,3003],{"id":3002},"clear-all","Clear-all",[15,3005,3006,3007,3009],{},"Native filters don't ship a coordinated clear-all control. You can wire one manually via page variable resets, but it's custom work. The plugin includes a ",[63,3008,1193],{}," component that resets all active filters in one click.",[122,3011,3013],{"id":3012},"synchronized-filter-groups-across-layouts","Synchronized filter groups across layouts",[15,3015,3016],{},"This is the one native filters can't solve. Real responsive sites often need:",[101,3018,3019,3022,3025],{},[48,3020,3021],{},"A top bar with Location and Category filters on desktop",[48,3023,3024],{},"A sidebar with Price Range and Bedrooms",[48,3026,3027],{},"A mobile drawer with all of the above in a different layout",[15,3029,3030,3031,3033],{},"Native page variables can drive one control per filter. They can't keep a sidebar checkbox and a mobile drawer checkbox synchronized when they both represent the same filter. The CMS Filter plugin is built around a shared-state architecture: multiple controls coordinate through a ",[63,3032,1165],{},". Desktop sidebar and mobile drawer stay in sync automatically.",[122,3035,3037],{"id":3036},"price-range-sliders","Price range sliders",[15,3039,3040],{},"Native Framer supports option fields, text, and booleans. Range filters (price: $500k to $1M, area: 1,000 to 2,500 sq ft) require a range slider with dual handles. Native filtering doesn't provide that. The plugin includes dual-handle range sliders with min/max values and unit formatting.",[122,3042,3044],{"id":3043},"filtering-on-reference-fields","Filtering on reference fields",[15,3046,3047],{},"Real CMS models use reference fields. A job board where each posting references a Company item. A directory where each listing references a Category item. Native Dynamic Filters work cleanly with option fields. Filtering on single-reference and multi-reference fields is where the native system runs thin. The plugin handles both.",[672,3049],{"button-link":658,"button-text":674,"description":3050,"title":3051,"variant":677},"CMS Filter adds multi-field search, range sliders, facets with counts, sorting, result counts and synchronised filter groups to any Framer CMS collection.","Need filtering past the native baseline?",[25,3053,3055],{"id":3054},"native-vs-cms-filter-plugin-comparison-table","Native vs CMS Filter plugin: comparison table",[127,3057,3058,3071],{},[130,3059,3060],{},[133,3061,3062,3065,3068],{},[136,3063,3064],{},"Capability",[136,3066,3067],{},"Framer Native",[136,3069,3070],{},"CMS Filter Plugin",[146,3072,3073,3083,3096,3106,3116,3126,3139,3152,3164,3172,3184,3195,3207,3221,3236,3246,3257,3267,3277],{},[133,3074,3075,3078,3081],{},[151,3076,3077],{},"Search (single field)",[151,3079,3080],{},"Yes",[151,3082,3080],{},[133,3084,3085,3087,3090],{},[151,3086,2959],{},[151,3088,3089],{},"No",[151,3091,3092,3093,3095],{},"Yes (",[63,3094,1180],{},", debounced across several fields)",[133,3097,3098,3101,3104],{},[151,3099,3100],{},"Tabs, dropdowns, checkboxes, toggles",[151,3102,3103],{},"Yes (5 types)",[151,3105,3080],{},[133,3107,3108,3111,3113],{},[151,3109,3110],{},"Match operators (contains, starts with, is set, and so on)",[151,3112,3089],{},[151,3114,3115],{},"Yes (8 text, 8 number operators)",[133,3117,3118,3121,3123],{},[151,3119,3120],{},"Number and price range filtering",[151,3122,3089],{},[151,3124,3125],{},"Yes (dual input and slider)",[133,3127,3128,3131,3133],{},[151,3129,3130],{},"Date range filtering",[151,3132,3089],{},[151,3134,3092,3135,3138],{},[63,3136,3137],{},"CMSDateRangeToggle",")",[133,3140,3141,3143,3145],{},[151,3142,2973],{},[151,3144,3089],{},[151,3146,3092,3147,66,3149,3138],{},[63,3148,1203],{},[63,3150,3151],{},"CMSSortToggle",[133,3153,3154,3157,3159],{},[151,3155,3156],{},"Facets with option counts",[151,3158,3089],{},[151,3160,3092,3161,3163],{},[63,3162,1189],{},", auto-detected from CMS enum fields)",[133,3165,3166,3168,3170],{},[151,3167,2980],{},[151,3169,3089],{},[151,3171,3080],{},[133,3173,3174,3177,3179],{},[151,3175,3176],{},"Active filter count",[151,3178,3089],{},[151,3180,3092,3181,3138],{},[63,3182,3183],{},"CMSActiveFilterCount",[133,3185,3186,3189,3191],{},[151,3187,3188],{},"Result count display",[151,3190,3089],{},[151,3192,3092,3193,3138],{},[63,3194,1186],{},[133,3196,3197,3200,3203],{},[151,3198,3199],{},"Clear-all button",[151,3201,3202],{},"No (manual workaround)",[151,3204,3092,3205,3138],{},[63,3206,1193],{},[133,3208,3209,3212,3214],{},[151,3210,3211],{},"Pagination / prev-next",[151,3213,3089],{},[151,3215,3092,3216,66,3218,3138],{},[63,3217,1199],{},[63,3219,3220],{},"CMSPrevNext",[133,3222,3223,3226,3228],{},[151,3224,3225],{},"Saved favourites",[151,3227,3089],{},[151,3229,3092,3230,66,3233,3138],{},[63,3231,3232],{},"CMSFavoriteButton",[63,3234,3235],{},"CMSFavoriteItems",[133,3237,3238,3241,3243],{},[151,3239,3240],{},"Synchronized filter groups",[151,3242,3089],{},[151,3244,3245],{},"Yes (top bar, sidebar, mobile share one store)",[133,3247,3248,3251,3254],{},[151,3249,3250],{},"AND/OR logic across filters",[151,3252,3253],{},"AND only",[151,3255,3256],{},"Composed at three levels: per filter, per builder, per collection",[133,3258,3259,3262,3265],{},[151,3260,3261],{},"Single-reference field filtering",[151,3263,3264],{},"Limited",[151,3266,3080],{},[133,3268,3269,3272,3275],{},[151,3270,3271],{},"Multi-reference field filtering",[151,3273,3274],{},"Unpredictable",[151,3276,3080],{},[133,3278,3279,3282,3285],{},[151,3280,3281],{},"Shareable URL parameters for a filtered state",[151,3283,3284],{},"Yes, driven by the page variables behind each filter",[151,3286,3287,3288,3290,3291],{},"Yes, one ",[63,3289,1139],{}," toggle on ",[63,3292,1161],{},[15,3294,3295],{},"For small collections with simple filter needs, native is the right starting point. For directories, real estate listings, job boards, marketplaces, and resource libraries, the plugin covers what native doesn't.",[22,3297],{},[25,3299,3301],{"id":3300},"real-projects-that-need-more-than-native-filtering","Real projects that need more than native filtering",[15,3303,3304],{},"These are the project types where native filtering hits its limits fast. They're also the exact use cases where the CMS Filter plugin was built to deliver.",[15,3306,3307],{},[2676,3308],{"alt":3309,"src":3310},"Four project types requiring advanced Framer CMS filtering: real estate, cars, job board, resource library","/framerhub/img/blog/framer-dynamic-filters-guide/four-project-types-requiring-advanced-framer-cms-filtering.webp",[122,3312,3314],{"id":3313},"real-estate-listings","Real estate listings",[15,3316,3317],{},"You need: price range slider, location, bedrooms (3 OR 4 OR 5), property type, and amenity checkboxes. Desktop shows a top bar with location and type, a sidebar with price range and bedrooms. Mobile shows a drawer with everything. Both layouts need to share filter state.",[15,3319,3320,3321],{},"Try this live: ",[326,3322,796],{"href":794,"target":795},[15,3324,3325,3326,3328],{},"That synchronized layout is what the plugin's ",[63,3327,1165],{}," system solves. One key, multiple filter groups, shared state automatically.",[122,3330,3332],{"id":3331},"car-marketplace","Car marketplace",[15,3334,3335],{},"You need: make, model, year range, mileage range, fuel type, and transmission. \"I tried the variant workaround and hit a wall past 30 items\" is the exact feedback from Framer designers who built car sites before this existed. Six filters on 200+ listings is not a variant problem. It's a filter system problem.",[15,3337,3320,3338],{},[326,3339,3341],{"href":3340,"target":795},"https://framercmsfilter.com/demo?demo=cars","framercmsfilter.com/demo?demo=cars",[122,3343,3345],{"id":3344},"job-board","Job board",[15,3347,3348],{},"You need: role, location, remote/hybrid/on-site toggle, department, and seniority. Visitors apply three filters, then want to see \"12 jobs match\" and remove just \"Seniority: Senior\" without clearing everything else.",[15,3350,3351],{},"That's active filter chips, result count, and clear-all working together. None of those ship with native Dynamic Filters.",[122,3353,3355],{"id":3354},"directory-and-listing-sites","Directory and listing sites",[15,3357,3358],{},"A local business directory needs: category, city, price range, and tags. Four simultaneous filters. Active chips. A clear-all button. A result count.",[15,3360,3361],{},"Native handles one of those cleanly. The rest need the plugin.",[15,3363,3364,3365,3367,3368,1053],{},"For more on structuring CMS content for complex sites, the ",[326,3366,1354],{"href":668}," covers collections, reference fields, and layout patterns in detail. A long filtered listing also lives or dies on load time, which is covered in ",[326,3369,3370],{"href":1255},"optimising a Framer site",[22,3372],{},[25,3374,3376],{"id":3375},"setting-up-the-cms-filter-plugin","Setting up the CMS Filter plugin",[15,3378,3379],{},"The setup follows a similar pattern to native filters, with a broader component set.",[3381,3382,3386],"video",{"src":3383,"autoPlay":768,"controls":768,"playsInline":768,"className":3384},"/framerhub/video/FramerCMSFilter-Filters.webm",[3385],"rounded-xl","\nYour browser does not support the video tag.\n",[15,3388,3389,3392,3393,3396,3397,1053],{},[52,3390,3391],{},"Step 1."," Install from ",[326,3394,3395],{"href":658},"framerhub.io/plugins/framer-cms-filter"," or directly from the ",[326,3398,3401],{"href":3399,"rel":3400},"https://www.framer.com/marketplace/plugins/framer-cms-filter/",[330],"Framer Marketplace",[15,3403,3404,3407,3408,3410,3411,3413,3414,3417,3418,3421],{},[52,3405,3406],{},"Step 2."," Replace your Collection List with a ",[63,3409,1161],{}," component. Connect it to your CMS collection. Set a ",[63,3412,1165],{}," (a string that names this filter group, e.g., ",[63,3415,3416],{},"\"listings\""," or ",[63,3419,3420],{},"\"jobs\"",").",[15,3423,3424,3427,3428,3430,3431,3433],{},[52,3425,3426],{},"Step 3."," Add a ",[63,3429,1171],{}," component. Set the same ",[63,3432,1165],{},". Configure each filter: pick the type, select the CMS field, set display options.",[15,3435,3436,3439,3440,3442],{},[52,3437,3438],{},"Step 4."," Add ",[63,3441,1180],{}," for multi-field search. Configure which fields to search across.",[15,3444,3445,3439,3448,3450],{},[52,3446,3447],{},"Step 5.",[63,3449,1203],{}," to give visitors sorting controls (newest, price: low to high, alphabetical, etc.).",[15,3452,3453,3439,3456,3458,3459,3461],{},[52,3454,3455],{},"Step 6.",[63,3457,1186],{}," to show \"X results\" and ",[63,3460,1193],{}," to reset all active filters.",[15,3463,3464,3467,3468,3470,3471,3473],{},[52,3465,3466],{},"Step 7."," For synchronized layouts, duplicate the ",[63,3469,1171],{}," block for your mobile layout. Set the same ",[63,3472,1165],{},". Both filter groups share state automatically. Select a location on desktop. The mobile drawer reflects it.",[15,3475,3476,3477,1053],{},"Full documentation lives at ",[326,3478,3480],{"href":3479,"target":795},"https://framercmsfilter.com","framercmsfilter.com",[22,3482],{},[25,3484,3486],{"id":3485},"pricing-and-access","Pricing and access",[15,3488,3489],{},"Framer CMS Filter is a one-time purchase. No subscription.",[127,3491,3492,3504],{},[130,3493,3494],{},[133,3495,3496,3499,3501],{},[136,3497,3498],{},"Plan",[136,3500,835],{},[136,3502,3503],{},"Who it's for",[146,3505,3506,3517,3528],{},[133,3507,3508,3511,3514],{},[151,3509,3510],{},"Free",[151,3512,3513],{},"$0",[151,3515,3516],{},"Basic filtering, try before buying",[133,3518,3519,3522,3525],{},[151,3520,3521],{},"Personal",[151,3523,3524],{},"$79 one-time",[151,3526,3527],{},"Freelancers, single-site use",[133,3529,3530,3533,3536],{},[151,3531,3532],{},"Agency",[151,3534,3535],{},"$179 one-time",[151,3537,3538],{},"Unlimited client projects",[15,3540,3541],{},"The Agency tier covers unlimited client projects. Trusted by 2,000+ Framer users.",[15,3543,3544],{},"If you build more than one or two client sites per year, the Agency plan covers everything for the cost of a few hours of work.",[22,3546],{},[25,3548,681],{"id":680},[122,3550,3552],{"id":3551},"does-framer-have-built-in-filtering","Does Framer have built-in filtering?",[15,3554,3555],{},"Yes. Framer ships native Dynamic Filters that let you bind CMS fields to page variables. You can add search, tabs, dropdowns, checkboxes, and toggles without writing code. It works well for basic single-field filtering. For multi-field search, sort, active filter chips, result counts, and synchronized filter groups across layouts, a dedicated plugin is the practical next step.",[122,3557,3559],{"id":3558},"what-are-the-limitations-of-framers-native-dynamic-filters","What are the limitations of Framer's native Dynamic Filters?",[15,3561,3562],{},"Native Dynamic Filters are page-variable-driven and work cleanly for simple use cases. They don't cover multi-field search, built-in sorting, active filter chips users can remove, result counts, a clear-all button, price range sliders, or synchronized filter groups across desktop and mobile layouts. For directories, job boards, real estate listings, and marketplaces, you'll hit those limits fast.",[122,3564,3566],{"id":3565},"what-is-the-difference-between-framer-dynamic-filters-and-the-cms-filter-plugin","What is the difference between Framer Dynamic Filters and the CMS Filter plugin?",[15,3568,3569,3570,3572],{},"Framer's native Dynamic Filters let you bind one field to one page variable. The ",[326,3571,2968],{"href":658}," is a full filtering system: multi-field search, 8+ filter types, sort, active filter chips, result counts, clear-all, AND/OR logic, and filter groups that stay synchronized across top bar, sidebar, and mobile layouts. Native is the baseline. The plugin is the advanced layer for real CMS sites.",[122,3574,3576],{"id":3575},"do-framer-dynamic-filters-work-on-mobile","Do Framer Dynamic Filters work on mobile?",[15,3578,3579],{},"Framer Dynamic Filters render and function on mobile because they sit outside the collection list and can be placed anywhere on the canvas. However, native filters don't support synchronized duplicate filter groups. Building a desktop sidebar and a mobile drawer that share state isn't possible natively. The CMS Filter plugin supports synchronized filter groups across layouts.",[122,3581,3583],{"id":3582},"when-should-i-use-the-cms-filter-plugin-instead-of-native-dynamic-filters","When should I use the CMS Filter plugin instead of native Dynamic Filters?",[15,3585,3586,3587,3589],{},"Use native filters when you need one or two simple dropdowns or tabs on a small collection. Upgrade to the ",[326,3588,2968],{"href":658}," when you need: multi-field search, sorting, active filter chips users can remove, result counts, a clear-all button, price range sliders, reference-aware filtering, or filter groups that stay in sync across desktop and mobile layouts.",[22,3591],{},[25,3593,1468],{"id":1467},[15,3595,3596],{},"Framer's native Dynamic Filters solved the variant hell problem. For simple sites, one or two dropdowns on a small collection, they're all you need.",[15,3598,3599],{},"For real CMS sites, native is the starting point, not the finish line. Multi-field search, sorting, filter chips users can remove, result counts, synchronized filter groups, and reference-aware filtering are what turn a CMS list into a real discovery experience.",[15,3601,3602,3603,3605],{},"If your project needs any of those, the ",[326,3604,2968],{"href":658}," is the dedicated tool for that gap.",[15,3607,3608,3609,3612,3613,3616],{},"Browse the ",[326,3610,3611],{"href":794,"target":795},"live real estate demo"," or the ",[326,3614,3615],{"href":3340,"target":795},"cars demo"," to see it in a real project context. If that's what your client needs, the setup takes about 15 minutes.",[15,3618,3619,3620,3623,3624,3628],{},"Browse the full ",[326,3621,3622],{"href":2451},"plugin catalog at FramerHub",", or our ",[326,3625,3627],{"href":3626},"/blog/best-framer-plugins","round-up of Framer plugins",", to see what else extends Framer's native capabilities.",[15,3630,3631],{},[1026,3632,2590],{},{"title":719,"searchDepth":720,"depth":720,"links":3634},[3635,3636,3643,3644,3645,3655,3656,3662,3663,3664,3671],{"id":2684,"depth":720,"text":2685},{"id":2725,"depth":720,"text":2726,"children":3637},[3638,3639,3640,3641,3642],{"id":2738,"depth":727,"text":2739},{"id":2748,"depth":727,"text":2749},{"id":2758,"depth":727,"text":2759},{"id":2768,"depth":727,"text":2769},{"id":2778,"depth":727,"text":2779},{"id":2790,"depth":720,"text":2791},{"id":2900,"depth":720,"text":2901},{"id":2942,"depth":720,"text":2943,"children":3646},[3647,3648,3649,3650,3651,3652,3653,3654],{"id":2958,"depth":727,"text":2959},{"id":2972,"depth":727,"text":2973},{"id":2979,"depth":727,"text":2980},{"id":2989,"depth":727,"text":2990},{"id":3002,"depth":727,"text":3003},{"id":3012,"depth":727,"text":3013},{"id":3036,"depth":727,"text":3037},{"id":3043,"depth":727,"text":3044},{"id":3054,"depth":720,"text":3055},{"id":3300,"depth":720,"text":3301,"children":3657},[3658,3659,3660,3661],{"id":3313,"depth":727,"text":3314},{"id":3331,"depth":727,"text":3332},{"id":3344,"depth":727,"text":3345},{"id":3354,"depth":727,"text":3355},{"id":3375,"depth":720,"text":3376},{"id":3485,"depth":720,"text":3486},{"id":680,"depth":720,"text":681,"children":3665},[3666,3667,3668,3669,3670],{"id":3551,"depth":727,"text":3552},{"id":3558,"depth":727,"text":3559},{"id":3565,"depth":727,"text":3566},{"id":3575,"depth":727,"text":3576},{"id":3582,"depth":727,"text":3583},{"id":1467,"depth":720,"text":1468},"How to set up Framer's native Dynamic Filters step by step, where they fall short for real CMS sites, and when the CMS Filter plugin becomes the better tool.","/framerhub/img/blog/framer-dynamic-filters-guide/real-estate-site.webp",{"metaTitle":3675,"metaDescription":3676,"primaryKeyword":2668,"secondaryKeywords":3677,"heroImage":3673,"ogImage":3673,"schema":3682,"order":3697,"createdAt":3698},"Framer Dynamic Filters: Where Native Stops | FramerHub","Set up Framer's native Dynamic Filters step by step, then see exactly where they stop: multi-field search, price ranges, facets, sorting and result counts.",[3678,3679,3680,3681],"framer cms filter","framer cms filtering","filter framer cms collection","framer directory filtering",[3683,3686],{"type":750,"headline":2653,"datePublished":3684,"dateModified":3685},"2026-06-09","2026-08-23",{"type":753,"questions":3687},[3688,3690,3691,3693,3695],{"question":3552,"answer":3689},"Yes. Framer ships native Dynamic Filters that let you bind CMS fields to page variables. You can add search, tabs, dropdowns, checkboxes, and toggles without writing code. It works well for basic single-field filtering. For multi-field search, sort, active filter chips, counts, and synchronized filter groups across layouts, a dedicated plugin is the practical next step.",{"question":3559,"answer":3562},{"question":3566,"answer":3692},"Framer's native Dynamic Filters let you bind one field to one page variable. The CMS Filter plugin is a full filtering system: multi-field search, 8+ filter types, sort, active filter chips, result counts, clear-all, AND/OR logic across filters, and filter groups that stay synchronized across top bar, sidebar, and mobile layouts. Native is the baseline. The plugin is the advanced layer for real CMS sites.",{"question":3576,"answer":3694},"Framer Dynamic Filters render and function on mobile because they sit outside the collection list and can be placed anywhere on the canvas. However, native filters don't support synchronized duplicate filter groups, so building a desktop sidebar plus a mobile drawer that share state isn't possible natively. The CMS Filter plugin supports synchronized filter groups across layouts.",{"question":3583,"answer":3696},"Use native filters when you need one or two simple dropdowns or tabs on a small collection. Upgrade to the CMS Filter plugin when you need: multi-field search, sorting, active filter chips users can remove, result counts, a clear-all button, price range sliders, reference-aware filtering, or filter groups that stay in sync across desktop and mobile layouts.",1,"2026-06-16","2026-06-16T00:00:00.000Z",{"title":2653,"description":3672},"framer-dynamic-filters-guide","blog/framer-dynamic-filters-guide",[777,54,3704,1549],"Filtering","2026-08-23T00:00:00.000Z","iyc8vYJcCgozv8Yn5zhhs6FGaB6VB51dQWW6y3pFDqM",{"id":3708,"title":3709,"author":3710,"body":3711,"category":735,"description":5349,"extension":737,"featured":738,"image":5350,"meta":5351,"navigation":768,"path":668,"published":768,"publishedAt":5373,"readingTime":5374,"robots":772,"seo":5375,"slug":5376,"stem":5377,"tags":5378,"updatedAt":3705,"__hash__":5380},"blog/blog/framer-cms-complete-guide.md","Framer CMS: How It Works and Where It Stops (2026)",{"name":8,"avatar":9,"bio":10},{"type":12,"value":3712,"toc":5290},[3713,3716,3723,3726,3728,3732,3741,3748,3755,3758,3761,3766,3792,3798,3800,3804,3807,3817,3820,3824,3827,3966,3976,3981,3983,3987,3990,4015,4018,4024,4035,4039,4060,4065,4071,4075,4079,4090,4094,4117,4120,4124,4130,4135,4156,4160,4170,4173,4179,4181,4185,4188,4199,4203,4234,4238,4264,4270,4276,4278,4282,4287,4291,4323,4327,4330,4353,4356,4363,4369,4371,4375,4378,4389,4393,4396,4428,4435,4446,4448,4452,4455,4458,4461,4467,4478,4485,4491,4494,4506,4511,4516,4520,4527,4531,4534,4539,4550,4554,4623,4626,4629,4635,4637,4641,4647,4650,4655,4684,4690,4696,4699,4705,4711,4717,4719,4723,4726,4729,4735,4752,4755,4761,4763,4767,4770,4820,4823,4825,4829,4832,4836,4843,4852,4855,4865,4869,4882,4885,4889,4900,4903,4907,4910,4916,4919,4923,4930,4936,4942,4944,4948,4951,4955,5023,5026,5029,5033,5039,5043,5046,5050,5053,5057,5060,5064,5067,5071,5174,5181,5183,5187,5190,5199,5208,5216,5218,5220,5223,5226,5230,5233,5237,5240,5244,5252,5256,5262,5266,5269,5271,5273,5276,5279,5282,5285],[15,3714,3715],{},"You're building a client site in Framer. It needs a blog. Or a property directory. Or a job board where users can search and filter listings. You've heard about Framer CMS, but you're not sure how far it goes, where it stops, and what you need to extend it.",[15,3717,3718,3719,3722],{},"This guide is your reference. What ",[52,3720,3721],{},"Framer CMS"," is, how collections and fields work, reference fields, CMS-powered pages, CSV import, the API, scheduled publishing, filtering, SEO setup, and the real limits you'll hit in production.",[15,3724,3725],{},"I built the FramerHub CMS plugins. I work in Framer CMS daily. Here's everything I know.",[22,3727],{},[25,3729,3731],{"id":3730},"what-is-framer-cms","What is Framer CMS?",[15,3733,3734,3735,1190,3738,1053],{},"Framer CMS is built around two things: ",[52,3736,3737],{},"collections",[52,3739,3740],{},"items",[15,3742,3743,3744,3747],{},"A ",[52,3745,3746],{},"collection"," is a structured set of content. Think of it as a spreadsheet tab. Each collection has fields that define the shape of the content: a title field, a date field, an image field, a rich text field, and so on.",[15,3749,3750,3751,3754],{},"An ",[52,3752,3753],{},"item"," is one row in that collection. One blog post. One team member. One job listing. One property.",[15,3756,3757],{},"When you connect a collection to a design component in Framer, every item gets its own version of that component, populated with its own data. Add a new item to the CMS, and a new page or card appears. Remove one, and it disappears. No manual duplication. No copy-pasting.",[15,3759,3760],{},"Design once. The structure scales to however many items you have.",[15,3762,3763],{},[52,3764,3765],{},"What Framer professionals use CMS for:",[101,3767,3768,3771,3774,3777,3780,3783,3786,3789],{},[48,3769,3770],{},"Client blogs and content sites",[48,3772,3773],{},"Team member and about pages",[48,3775,3776],{},"Portfolio case studies",[48,3778,3779],{},"Product or service listings",[48,3781,3782],{},"Job boards",[48,3784,3785],{},"Property directories (real estate, rentals)",[48,3787,3788],{},"Resource libraries",[48,3790,3791],{},"Testimonials and customer stories",[15,3793,3794],{},[2676,3795],{"alt":3796,"src":3797},"Framer CMS structure: collections and items","/framerhub/img/blog/framer-cms-complete-guide/framer-cms-complete-guides.webp",[22,3799],{},[25,3801,3803],{"id":3802},"collections-the-foundation-of-framer-cms","Collections: the foundation of Framer CMS",[15,3805,3806],{},"Every CMS project starts with a collection. Here's how to create one and set it up.",[15,3808,3809,3810,66,3812,66,3814,3816],{},"A collection is created from the CMS icon in the left sidebar, either empty, from a CSV, or from Framer's sample blog structure. Name it with a plural noun (",[63,3811,65],{},[63,3813,69],{},[63,3815,72],{},") because that name follows you into the design panel and into the URL structure for CMS pages.",[15,3818,3819],{},"That is the whole setup, and it is deliberately short here: the step-by-step build, field by field, lives in the Framer CMS collections tutorial. What matters for the rest of this guide is the field model.",[122,3821,3823],{"id":3822},"collection-field-types","Collection field types",[15,3825,3826],{},"Each collection supports up to 30 fields.",[127,3828,3829,3842],{},[130,3830,3831],{},[133,3832,3833,3836,3839],{},[136,3834,3835],{},"Field Type",[136,3837,3838],{},"What It Stores",[136,3840,3841],{},"Best Used For",[146,3843,3844,3855,3867,3878,3888,3898,3909,3920,3930,3941,3953],{},[133,3845,3846,3850,3852],{},[151,3847,3848],{},[52,3849,155],{},[151,3851,158],{},[151,3853,3854],{},"Titles, names, labels, slugs",[133,3856,3857,3861,3864],{},[151,3858,3859],{},[52,3860,168],{},[151,3862,3863],{},"Formatted HTML content",[151,3865,3866],{},"Blog body, descriptions",[133,3868,3869,3873,3876],{},[151,3870,3871],{},[52,3872,181],{},[151,3874,3875],{},"Image file or URL",[151,3877,187],{},[133,3879,3880,3884,3886],{},[151,3881,3882],{},[52,3883,194],{},[151,3885,197],{},[151,3887,200],{},[133,3889,3890,3894,3896],{},[151,3891,3892],{},[52,3893,207],{},[151,3895,210],{},[151,3897,213],{},[133,3899,3900,3904,3906],{},[151,3901,3902],{},[52,3903,220],{},[151,3905,223],{},[151,3907,3908],{},"Prices, ratings, counts",[133,3910,3911,3915,3918],{},[151,3912,3913],{},[52,3914,233],{},[151,3916,3917],{},"True/False toggle",[151,3919,239],{},[133,3921,3922,3926,3928],{},[151,3923,3924],{},[52,3925,259],{},[151,3927,262],{},[151,3929,265],{},[133,3931,3932,3936,3938],{},[151,3933,3934],{},[52,3935,272],{},[151,3937,275],{},[151,3939,3940],{},"PDFs, downloads",[133,3942,3943,3947,3950],{},[151,3944,3945],{},[52,3946,285],{},[151,3948,3949],{},"Link to another collection item",[151,3951,3952],{},"Author on a Blog Post",[133,3954,3955,3960,3963],{},[151,3956,3957],{},[52,3958,3959],{},"Multi-Reference",[151,3961,3962],{},"Link to multiple items",[151,3964,3965],{},"Tags on a Blog Post",[15,3967,3968,3969,1190,3972,3975],{},"The last two, ",[52,3970,3971],{},"reference",[52,3973,3974],{},"multi-reference"," fields, are worth understanding in depth.",[15,3977,3978],{},[2676,3979],{"alt":125,"src":3980},"/framerhub/img/blog/framer-cms-complete-guide/framer-cms-field-types.webp",[22,3982],{},[25,3984,3986],{"id":3985},"reference-fields-connecting-collections","Reference fields: connecting collections",[15,3988,3989],{},"Reference fields create relationships between collections.",[15,3991,3992,3995,3996,3998,3999,4002,4003,4005,4006,4008,4009,4011,4012,4014],{},[52,3993,3994],{},"Example",": You have a ",[63,3997,65],{}," collection and an ",[63,4000,4001],{},"Authors"," collection. Each blog post has one author. Instead of typing the author's name into every post manually, you create an ",[63,4004,449],{}," field in ",[63,4007,65],{}," as a ",[52,4010,285],{}," to the ",[63,4013,4001],{}," collection.",[15,4016,4017],{},"When you write a post, you pick an author from a dropdown. When an author's photo or bio changes, it updates everywhere automatically.",[15,4019,4020,4023],{},[52,4021,4022],{},"Multi-reference fields"," allow selecting multiple items. Common uses:",[101,4025,4026,4029,4032],{},[48,4027,4028],{},"Tags (a post can have multiple tags)",[48,4030,4031],{},"Categories (a product can belong to multiple categories)",[48,4033,4034],{},"Team members on a project",[122,4036,4038],{"id":4037},"setting-up-a-reference-field","Setting up a reference field",[45,4040,4041,4047,4054,4057],{},[48,4042,4043,4044],{},"In your collection, click ",[52,4045,4046],{},"Add Field",[48,4048,4049,4050,3417,4052],{},"Choose ",[52,4051,285],{},[52,4053,3959],{},[48,4055,4056],{},"Select the target collection",[48,4058,4059],{},"Save. The field now shows a picker when editing items.",[15,4061,4062,4063,4014],{},"When you bind this field in your design, you can pull any field from the referenced collection. An author reference on a blog card can display the author's name, photo, and bio, all from the ",[63,4064,4001],{},[15,4066,4067],{},[2676,4068],{"alt":4069,"src":4070},"Framer CMS reference fields","/framerhub/img/blog/framer-cms-complete-guide/framer-cms-reference-fields.webp",[672,4072],{"button-link":658,"button-text":674,"description":4073,"title":4074,"variant":677},"CMS Filter adds multi-field search, price range sliders, result counts, and more to any Framer CMS collection. Trusted by 2,000+ Framer users.","Building a directory or listing site in Framer?",[25,4076,4078],{"id":4077},"cms-pages-and-slugs","CMS pages and slugs",[15,4080,4081,4082,4085,4086,4089],{},"CMS items can have their own dedicated pages. A blog post collection generates a ",[63,4083,4084],{},"/blog/[slug]"," page for each item. A job listings collection generates a ",[63,4087,4088],{},"/jobs/[slug]"," page. Here's how it works.",[122,4091,4093],{"id":4092},"creating-a-cms-detail-page","Creating a CMS detail page",[45,4095,4096,4099,4108,4111,4114],{},[48,4097,4098],{},"In Framer, create a new page",[48,4100,4101,4102,4105,4106],{},"In the page settings, switch the ",[52,4103,4104],{},"Page Type"," to ",[52,4107,54],{},[48,4109,4110],{},"Select the collection this page should pull from",[48,4112,4113],{},"Design your layout using bound fields from that collection",[48,4115,4116],{},"Set the URL structure using the slug field",[15,4118,4119],{},"Every item in the collection now has its own URL and its own rendered version of that page.",[122,4121,4123],{"id":4122},"slug-field-setup","Slug field setup",[15,4125,2965,4126,4129],{},[52,4127,4128],{},"slug"," is the URL-safe identifier for each item. Framer generates slugs automatically from the title (spaces become hyphens, special characters are stripped). You can also set slugs manually.",[15,4131,4132],{},[52,4133,4134],{},"Best practices for slugs:",[101,4136,4137,4140,4143,4146],{},[48,4138,4139],{},"Keep them short and descriptive",[48,4141,4142],{},"Use lowercase and hyphens only",[48,4144,4145],{},"Avoid dates in slugs if you want evergreen URLs",[48,4147,4148,4149,4152,4153],{},"Make them readable: ",[63,4150,4151],{},"/blog/framer-cms-guide"," not ",[63,4154,4155],{},"/blog/12345",[122,4157,4159],{"id":4158},"index-pages","Index pages",[15,4161,4162,4163,4166,4167,4169],{},"Beyond the detail page, you'll usually want an ",[52,4164,4165],{},"index page"," that lists all items. This is a regular Framer page where you place a ",[52,4168,556],{}," component and bind it to your collection.",[15,4171,4172],{},"The Collection List renders one instance of your card design for each CMS item. This is your blog index, your team page, your property grid.",[15,4174,4175],{},[2676,4176],{"alt":4177,"src":4178},"Framer CMS index and detail pages","/framerhub/img/blog/framer-cms-complete-guide/framer-cms-index-detail-pages.webp",[22,4180],{},[25,4182,4184],{"id":4183},"importing-content-via-csv","Importing content via CSV",[15,4186,4187],{},"Framer CMS supports bulk content import via CSV. Useful when:",[101,4189,4190,4193,4196],{},[48,4191,4192],{},"Migrating from WordPress, Webflow, or Notion",[48,4194,4195],{},"Managing content in a spreadsheet and pushing updates to Framer",[48,4197,4198],{},"Bootstrapping a large collection quickly",[122,4200,4202],{"id":4201},"how-to-import-a-csv","How to import a CSV",[45,4204,4205,4208,4218,4225,4228],{},[48,4206,4207],{},"Open your collection in the CMS panel",[48,4209,4210,4211,4214,4215],{},"Click the ",[52,4212,4213],{},"three-dot menu"," and then ",[52,4216,4217],{},"Import CSV",[48,4219,4220,4221,4224],{},"Upload your ",[63,4222,4223],{},".csv"," file",[48,4226,4227],{},"Map each CSV column to a collection field",[48,4229,4230,4231],{},"Click ",[52,4232,4233],{},"Import",[122,4235,4237],{"id":4236},"csv-format-tips","CSV format tips",[101,4239,4240,4243,4248,4258,4261],{},[48,4241,4242],{},"First row must be headers",[48,4244,4245,4246,3138],{},"Date fields: use ISO format (",[63,4247,3684],{},[48,4249,4250,4251,4254,4255],{},"Boolean fields: ",[63,4252,4253],{},"true"," / ",[63,4256,4257],{},"false",[48,4259,4260],{},"Image fields: use a public URL (Framer fetches and hosts the image)",[48,4262,4263],{},"Rich text: Framer accepts basic HTML in rich text fields via CSV",[15,4265,4266,4269],{},[52,4267,4268],{},"Limitation",": CSV import does not support reference fields. Set those manually after import, or use the Framer CMS API to automate it.",[15,4271,4272],{},[2676,4273],{"alt":4274,"src":4275},"Framer CMS CSV import","/framerhub/img/blog/framer-cms-complete-guide/framer-cms-csv-import.webp",[22,4277],{},[25,4279,4281],{"id":4280},"dynamic-content-with-collection-lists","Dynamic content with Collection Lists",[15,4283,2965,4284,4286],{},[52,4285,556],{}," is the design component that pulls CMS data into your canvas. Add it to any frame, bind it to a collection, design one card, and Framer replicates it for every item.",[122,4288,4290],{"id":4289},"adding-a-collection-list","Adding a Collection List",[45,4292,4293,4304,4307,4310,4313],{},[48,4294,4295,4296,4299,4300,4299,4302],{},"In Framer, go to ",[52,4297,4298],{},"Insert",", then ",[52,4301,54],{},[52,4303,556],{},[48,4305,4306],{},"Drag it onto your canvas",[48,4308,4309],{},"In the properties panel, select your collection",[48,4311,4312],{},"Design the item card inside the Collection List",[48,4314,4315,4316,4318,4319,4322],{},"Bind each element to its field: text element to ",[63,4317,378],{},", image to ",[63,4320,4321],{},"Cover Image",", and so on",[122,4324,4326],{"id":4325},"sorting-and-limiting","Sorting and limiting",[15,4328,4329],{},"In the Collection List properties:",[101,4331,4332,4338,4344],{},[48,4333,4334,4337],{},[52,4335,4336],{},"Sort by",": Any field (date descending for blogs, name ascending for directories, price for listings)",[48,4339,4340,4343],{},[52,4341,4342],{},"Limit",": Show only the first N items (useful for \"Latest 3 Posts\" on a homepage)",[48,4345,4346,4349,4350,3138],{},[52,4347,4348],{},"Filter",": Show items matching specific field values (only items where ",[63,4351,4352],{},"Published = true",[15,4354,4355],{},"This built-in filtering is good for static conditions. For visitor-driven interactive filtering, you need Dynamic Filters or a plugin.",[15,4357,4358,4359,4362],{},"The same Collection List pattern powers image galleries; our ",[326,4360,4361],{"href":2090},"Framer gallery guide"," covers lightbox, masonry and slider layouts on top of it.",[15,4364,4365],{},[2676,4366],{"alt":4367,"src":4368},"Framer CMS Collection List properties","/framerhub/img/blog/framer-cms-complete-guide/framer-cms-collection-list-properties.webp",[22,4370],{},[25,4372,4374],{"id":4373},"framer-cms-api","Framer CMS API",[15,4376,4377],{},"Framer provides a REST API for reading and writing CMS collection items. Useful for:",[101,4379,4380,4383,4386],{},[48,4381,4382],{},"Syncing content from Notion, Airtable, or your own database",[48,4384,4385],{},"Automating content updates (pull fresh job listings nightly)",[48,4387,4388],{},"Integrating with Zapier, Make, or n8n",[122,4390,4392],{"id":4391},"how-the-framer-cms-api-works","How the Framer CMS API works",[15,4394,4395],{},"The API is REST-based. Endpoints follow a consistent pattern:",[101,4397,4398,4404,4410,4416,4422],{},[48,4399,4400,4403],{},[63,4401,4402],{},"GET /collections",", list all collections in a project",[48,4405,4406,4409],{},[63,4407,4408],{},"GET /collections/{id}/items",", list all items in a collection",[48,4411,4412,4415],{},[63,4413,4414],{},"POST /collections/{id}/items",", create a new item",[48,4417,4418,4421],{},[63,4419,4420],{},"PATCH /collections/{id}/items/{itemId}",", update an existing item",[48,4423,4424,4427],{},[63,4425,4426],{},"DELETE /collections/{id}/items/{itemId}",", delete an item",[15,4429,4430,4431,4434],{},"Authentication uses an ",[52,4432,4433],{},"API token"," generated from your Framer project settings. Include it as a Bearer token in request headers.",[15,4436,4437,4440,4441],{},[52,4438,4439],{},"Official documentation",": ",[326,4442,4445],{"href":4443,"rel":4444},"https://www.framer.com/developers/api",[330],"Framer CMS API Docs",[22,4447],{},[25,4449,4451],{"id":4450},"scheduled-publishing-in-framer-cms","Scheduled publishing in Framer CMS",[15,4453,4454],{},"Here is something Framer does not have natively: scheduled publishing.",[15,4456,4457],{},"If you manage a client blog, you know the pain. You write a post in advance but Framer has no \"go live at 9am Tuesday\" option. You either publish it early or set an alarm to click Publish at the right time. If you're coming from WordPress, this is the first thing you miss.",[15,4459,4460],{},"The real-world scenario: a client wants three posts a week, queued up during one work session, publishing on a schedule. That is not possible with native Framer CMS.",[15,4462,4463,4466],{},[52,4464,4465],{},"CMS Scheduler"," is the plugin that fills this gap. Write your CMS items now, set a publish date and time, walk away. The plugin handles the rest.",[101,4468,4469,4472,4475],{},[48,4470,4471],{},"Free: 3 posts can sit in the queue at once, on one connected project. When one publishes, its slot frees up.",[48,4473,4474],{},"Pro, $49/year: unlimited queued posts, still one connected project.",[48,4476,4477],{},"Unlimited, $99/year: unlimited queued posts and unlimited connected projects.",[15,4479,4480,4481,4484],{},"It runs on Framer's Server API, which Framer still lists as open beta, and it schedules ",[52,4482,4483],{},"drafts"," — an already-published item is not a scheduling target.",[15,4486,4487,4490],{},[52,4488,4489],{},"Important caveat",": scheduled publish pushes any other unpublished site changes at the same time. If you have work in progress, use a separate production project or hold off on scheduling until those edits are ready.",[15,4492,4493],{},"For agencies and content-heavy clients, this is the WordPress scheduling you're missing in Framer.",[15,4495,4496,4501,4502],{},[326,4497,4500],{"href":4498,"rel":4499},"https://www.framer.com/marketplace/plugins/framer-cms-scheduler/",[330],"CMS Scheduler on Framer Marketplace"," · ",[326,4503,4505],{"href":4504},"/plugins/cms-scheduler","CMS Scheduler on FramerHub",[15,4507,4508],{},[2676,4509],{"alt":4500,"src":4510},"/framerhub/img/blog/framer-cms-complete-guide/framer-cms-scheduler.webp",[672,4512],{"button-link":2451,"button-text":4513,"description":4514,"title":4515,"variant":677},"Browse Plugins","Browse all Framer plugins, filtering, scheduling, bulk editing, and more. One place for everything Framer doesn't do natively.","Want deeper CMS capabilities?",[25,4517,4519],{"id":4518},"native-dynamic-filters-what-they-cover","Native Dynamic Filters: what they cover",[15,4521,4522,4523,4526],{},"Framer added native ",[52,4524,4525],{},"Dynamic Filters"," to the CMS in early 2026. They work well for simple cases. Here's what they do and when they're enough.",[122,4528,4530],{"id":4529},"what-dynamic-filters-do","What Dynamic Filters do",[15,4532,4533],{},"Dynamic Filters let you bind a page variable to a Collection List filter. The visitor selects a value, the page variable updates, and the Collection List re-renders to show only matching items.",[15,4535,4536],{},[52,4537,4538],{},"Works well for:",[101,4540,4541,4544,4547],{},[48,4542,4543],{},"Single-field category filtering (show only \"Design\" posts)",[48,4545,4546],{},"Boolean toggles (show only \"Featured\" items)",[48,4548,4549],{},"Simple dropdown selections on small collections",[122,4551,4553],{"id":4552},"where-native-dynamic-filters-fall-short","Where native Dynamic Filters fall short",[127,4555,4556,4566],{},[130,4557,4558],{},[133,4559,4560,4563],{},[136,4561,4562],{},"Requirement",[136,4564,4565],{},"Native Dynamic Filters",[146,4567,4568,4575,4582,4589,4596,4603,4610,4616],{},[133,4569,4570,4573],{},[151,4571,4572],{},"Single-field filter",[151,4574,3080],{},[133,4576,4577,4580],{},[151,4578,4579],{},"Combine search + category + location at once",[151,4581,3089],{},[133,4583,4584,4587],{},[151,4585,4586],{},"Real-time text search",[151,4588,3089],{},[133,4590,4591,4594],{},[151,4592,4593],{},"Price or number range slider",[151,4595,3089],{},[133,4597,4598,4601],{},[151,4599,4600],{},"URL parameters (shareable filter state)",[151,4602,3089],{},[133,4604,4605,4608],{},[151,4606,4607],{},"Show result counts per filter option",[151,4609,3089],{},[133,4611,4612,4614],{},[151,4613,2980],{},[151,4615,3089],{},[133,4617,4618,4621],{},[151,4619,4620],{},"Filter sync across desktop and mobile layouts",[151,4622,3089],{},[15,4624,4625],{},"For a blog with three categories, native Dynamic Filters are the right tool. For a real estate directory with price range, location, bedrooms, and property type, you will run into the limits quickly.",[15,4627,4628],{},"The real signal: if a client asks \"can users filter by price range and location at the same time?\", that is where native filtering stops.",[15,4630,4631],{},[2676,4632],{"alt":4633,"src":4634},"Framer Dynamic Filters","/framerhub/img/blog/framer-cms-complete-guide/framer-dynamic-filters.webp",[22,4636],{},[25,4638,4640],{"id":4639},"advanced-filtering-with-cms-filter","Advanced filtering with CMS Filter",[15,4642,4643,4644,4646],{},"When a client needs filtering that native Dynamic Filters cannot deliver, ",[326,4645,659],{"href":658}," is the system built for it. We build and sell it, and it is used by Framer teams shipping directory, listing and catalogue sites.",[15,4648,4649],{},"The ICP describes the need in project terms: \"I'm building a real estate site with price, location, and property type filters.\" Or \"a car listing site with 6 filters.\" Or \"a job board where users can search by role and filter by location.\" Native Dynamic Filters handle one condition at a time. CMS Filter handles all of them together.",[15,4651,4652],{},[52,4653,4654],{},"What CMS Filter adds:",[101,4656,4657,4660,4663,4666,4669,4672,4675,4678,4681],{},[48,4658,4659],{},"Real-time text search across multiple fields at once (title, description, tags, and more in one input)",[48,4661,4662],{},"8+ filter types: dropdowns, checkboxes, toggle buttons, range sliders, tag clouds",[48,4664,4665],{},"URL parameters so filter state persists and is shareable",[48,4667,4668],{},"Result counts and active filter count badges",[48,4670,4671],{},"Active filter chips users can remove individually",[48,4673,4674],{},"Clear all controls",[48,4676,4677],{},"Filter sync across breakpoints (sidebar on desktop, drawer on mobile, both stay in sync)",[48,4679,4680],{},"Reference-aware filtering (filter by author, category, or any linked collection)",[48,4682,4683],{},"Sort controls integrated with filter state",[15,4685,4686,4689],{},[52,4687,4688],{},"Setup",": Drag in the CMS Filter component, connect your collection, configure filter fields in the properties panel. No custom code. Under five minutes for a basic setup.",[15,4691,4692,4695],{},[52,4693,4694],{},"Pricing",": Free tier for basic setups. $79 Personal, $179 Agency, both one-time. Licensed for unlimited client projects.",[15,4697,4698],{},"This is the tool for directory sites, real estate listings, job boards, product catalogs, and any CMS page where users need to find specific items from a large collection.",[15,4700,4701,4702,1053],{},"For a deeper walkthrough, see our ",[326,4703,4704],{"href":663},"guide to Framer Dynamic Filters",[15,4706,4707],{},[326,4708,4710],{"href":3399,"rel":4709},[330],"CMS Filter on Framer Marketplace",[15,4712,4713],{},[2676,4714],{"alt":4715,"src":4716},"Framer CMS Filter","/framerhub/img/blog/framer-cms-complete-guide/framer-cms-filter.webp",[22,4718],{},[25,4720,4722],{"id":4721},"bulk-editing-cms-content-cms-find-and-replace","Bulk editing CMS content: CMS Find and Replace",[15,4724,4725],{},"One more CMS pain that comes up in real project work: bulk text edits.",[15,4727,4728],{},"A client rebrands. A URL changes across 200 blog posts. A product name is misspelled in 50 listing items. In native Framer, you edit each item manually, one by one.",[15,4730,4731,4734],{},[52,4732,4733],{},"CMS Find and Replace"," handles this in a single pass. Search across an entire collection, preview matches before applying, and update in bulk. Free, no paid tier.",[101,4736,4737,4740,4743,4746,4749],{},[48,4738,4739],{},"Case-sensitive, whole word, and regex matching",[48,4741,4742],{},"Filter by field and item status (All, Draft, Published)",[48,4744,4745],{},"Preview grouped matches before applying",[48,4747,4748],{},"Export a CSV report",[48,4750,4751],{},"Undo the last replace",[15,4753,4754],{},"This is a CMS hygiene tool. You don't use it daily, but when you need it, it saves an hour of manual work. Free, so install it and have it ready.",[15,4756,4757],{},[326,4758,4760],{"href":4759},"/plugins/cms-find-replace","CMS Find and Replace on FramerHub",[22,4762],{},[25,4764,4766],{"id":4765},"the-framerhub-cms-toolkit","The FramerHub CMS toolkit",[15,4768,4769],{},"Three plugins that cover what native Framer CMS leaves out:",[127,4771,4772,4783],{},[130,4773,4774],{},[133,4775,4776,4779,4781],{},[136,4777,4778],{},"Plugin",[136,4780,1700],{},[136,4782,4694],{},[146,4784,4785,4797,4809],{},[133,4786,4787,4791,4794],{},[151,4788,4789],{},[52,4790,659],{},[151,4792,4793],{},"Filtering, search, sort for discovery-driven pages",[151,4795,4796],{},"Free / $79 / $179 one-time",[133,4798,4799,4803,4806],{},[151,4800,4801],{},[52,4802,4465],{},[151,4804,4805],{},"Scheduled publishing (the WordPress scheduling you're missing)",[151,4807,4808],{},"Free / $49 per year / $99 per year",[133,4810,4811,4815,4818],{},[151,4812,4813],{},[52,4814,4733],{},[151,4816,4817],{},"Bulk text editing across entire CMS collections",[151,4819,3510],{},[15,4821,4822],{},"CMS Filter and the component library are one-time purchases; CMS Scheduler is a yearly subscription. Trusted by 2,000+ Framer users.",[22,4824],{},[25,4826,4828],{"id":4827},"seo-for-framer-cms-pages","SEO for Framer CMS pages",[15,4830,4831],{},"CMS detail pages can rank well in search, if they're set up correctly.",[122,4833,4835],{"id":4834},"page-titles-and-meta-descriptions","Page titles and meta descriptions",[15,4837,4838,4839,4842],{},"In Framer's page settings for your CMS detail page, use ",[52,4840,4841],{},"template variables"," pulled from your CMS fields:",[4844,4845,4850],"pre",{"className":4846,"code":4848,"language":4849},[4847],"language-text","Title: {{Title}} | Your Site Name\nMeta Description: {{Excerpt}}\n","text",[63,4851,4848],{"__ignoreMap":719},[15,4853,4854],{},"Every blog post, every property, every listing automatically gets a unique title and meta description from its CMS data. No manual settings per item.",[15,4856,4857,4860,4861,4864],{},[52,4858,4859],{},"Best practice",": add a dedicated ",[63,4862,4863],{},"Meta Description"," field to every collection you want to rank. Keep it under 160 characters.",[122,4866,4868],{"id":4867},"slug-structure-and-urls","Slug structure and URLs",[101,4870,4871,4876],{},[48,4872,4873,4875],{},[63,4874,4151],{},", good. Readable, keyword-relevant.",[48,4877,4878,4881],{},[63,4879,4880],{},"/blog/abc123",", bad. No keyword signal.",[15,4883,4884],{},"Use keyword-relevant slugs for CMS pages you want to rank. One of the lowest-effort, highest-impact SEO moves.",[122,4886,4888],{"id":4887},"image-alt-text","Image alt text",[15,4890,4891,4892,4895,4896,4899],{},"Add an ",[63,4893,4894],{},"Image Alt Text"," field (type: text) to your collection. Bind it to the ",[63,4897,4898],{},"alt"," attribute of your image elements. Every image in every CMS item now has a unique alt attribute automatically.",[15,4901,4902],{},"Without this, all CMS images share a static alt text or have none. Both are bad for SEO and accessibility.",[122,4904,4906],{"id":4905},"open-graph-and-social-sharing","Open Graph and social sharing",[15,4908,4909],{},"Set the Open Graph fields on your CMS detail page to pull from CMS fields:",[4844,4911,4914],{"className":4912,"code":4913,"language":4849},[4847],"OG Image: {{Cover Image}}\nOG Title: {{Title}}\nOG Description: {{Excerpt}}\n",[63,4915,4913],{"__ignoreMap":719},[15,4917,4918],{},"Every CMS page gets its own social card, pulled automatically from its content.",[122,4920,4922],{"id":4921},"structured-data","Structured data",[15,4924,4925,4926,1053],{},"For blog posts, add Article schema markup. For property listings, add Product or RealEstateListing schema. Framer doesn't inject schema automatically. You'll need a custom code component or a script in the site's custom code section. The same JSON-LD block is what makes a CMS page quotable by AI search, which is covered in ",[326,4927,4929],{"href":4928},"/blog/framer-site-chatgpt-ai-discovery","llms.txt for Framer",[15,4931,4932,4933,4935],{},"For a full SEO setup checklist for Framer sites, our ",[326,4934,1323],{"href":1322}," covers every technical and on-page element to check before launch.",[15,4937,4938],{},[2676,4939],{"alt":4940,"src":4941},"Framer CMS SEO","/framerhub/img/blog/framer-cms-complete-guide/framer-cms-seo.webp",[22,4943],{},[25,4945,4947],{"id":4946},"real-framer-cms-limitations-honest","Real Framer CMS limitations (honest)",[15,4949,4950],{},"Framer CMS is solid for small-to-medium content sites. Here's where it hits real walls.",[122,4952,4954],{"id":4953},"item-and-field-limits","Item and field limits",[127,4956,4957,4969],{},[130,4958,4959],{},[133,4960,4961,4963,4966],{},[136,4962,3498],{},[136,4964,4965],{},"CMS Items per Collection",[136,4967,4968],{},"Collections per Site",[146,4970,4971,4980,4991,5002,5013],{},[133,4972,4973,4975,4978],{},[151,4974,3510],{},[151,4976,4977],{},"Not available",[151,4979],{},[133,4981,4982,4985,4988],{},[151,4983,4984],{},"Mini",[151,4986,4987],{},"50 items",[151,4989,4990],{},"1 collection",[133,4992,4993,4996,4999],{},[151,4994,4995],{},"Basic",[151,4997,4998],{},"250 items",[151,5000,5001],{},"2 collections",[133,5003,5004,5007,5010],{},[151,5005,5006],{},"Pro",[151,5008,5009],{},"1,000 items",[151,5011,5012],{},"Unlimited",[133,5014,5015,5018,5021],{},[151,5016,5017],{},"Scale",[151,5019,5020],{},"10,000 items",[151,5022,5012],{},[15,5024,5025],{},"For a blog with 200 posts or a directory with 500 listings, Pro is enough. For large product catalogs or high-volume content sites, Scale is the ceiling.",[15,5027,5028],{},"Beyond Scale, a headless CMS (Contentful, Sanity, Hygraph) connected to Framer via the API makes more sense.",[122,5030,5032],{"id":5031},"no-scheduled-publishing-native","No scheduled publishing (native)",[15,5034,5035,5036,5038],{},"As covered above, Framer has no native way to schedule a CMS item to publish at a specific time. ",[326,5037,4465],{"href":4504}," fills this gap. If you're managing a content calendar for a client, plan for this before the project starts.",[122,5040,5042],{"id":5041},"no-versioning-or-drafts-workflow","No versioning or drafts workflow",[15,5044,5045],{},"Framer CMS has no version history for content. If you overwrite a field, it's gone. There's no per-item drafts and approval workflow. For content-heavy teams where writers, editors, and reviewers all touch the same content, this is friction.",[122,5047,5049],{"id":5048},"no-user-generated-content","No user-generated content",[15,5051,5052],{},"Framer CMS is editor-only. Visitors cannot submit content to your collections from a form. You can connect a form to push data to Framer CMS via the API, but it's not built-in.",[122,5054,5056],{"id":5055},"no-built-in-search","No built-in search",[15,5058,5059],{},"There's no native search bar that queries CMS content by text. Dynamic Filters handle category-style filtering, but a free-text search box that finds items across title, body, and tags requires a plugin.",[122,5061,5063],{"id":5062},"relational-depth","Relational depth",[15,5065,5066],{},"Reference fields work one level deep cleanly. Multi-level relationships can get complicated and slow page render if you're pulling deeply nested referenced data.",[122,5068,5070],{"id":5069},"framer-cms-vs-webflow-cms","Framer CMS vs Webflow CMS",[127,5072,5073,5085],{},[130,5074,5075],{},[133,5076,5077,5080,5082],{},[136,5078,5079],{},"Feature",[136,5081,3721],{},[136,5083,5084],{},"Webflow CMS",[146,5086,5087,5097,5108,5119,5128,5137,5146,5155,5164],{},[133,5088,5089,5092,5095],{},[151,5090,5091],{},"Max items (top plan)",[151,5093,5094],{},"10,000",[151,5096,5094],{},[133,5098,5099,5102,5105],{},[151,5100,5101],{},"Native filtering",[151,5103,5104],{},"Dynamic Filters (basic)",[151,5106,5107],{},"More capable natively",[133,5109,5110,5113,5116],{},[151,5111,5112],{},"Scheduled publishing",[151,5114,5115],{},"Plugin required",[151,5117,5118],{},"Native",[133,5120,5121,5124,5126],{},[151,5122,5123],{},"CMS API",[151,5125,3080],{},[151,5127,3080],{},[133,5129,5130,5133,5135],{},[151,5131,5132],{},"Drafts/versioning",[151,5134,3089],{},[151,5136,3264],{},[133,5138,5139,5142,5144],{},[151,5140,5141],{},"Rich text editor",[151,5143,3080],{},[151,5145,3080],{},[133,5147,5148,5151,5153],{},[151,5149,5150],{},"Reference fields",[151,5152,3080],{},[151,5154,3080],{},[133,5156,5157,5160,5162],{},[151,5158,5159],{},"CSV import",[151,5161,3080],{},[151,5163,3080],{},[133,5165,5166,5169,5171],{},[151,5167,5168],{},"Full-text search",[151,5170,5115],{},[151,5172,5173],{},"Plugin/code required",[15,5175,5176,5177,1053],{},"For a detailed comparison of the full platforms, see our ",[326,5178,5180],{"href":5179},"/blog/framer-vs-webflow","Framer vs Webflow guide",[22,5182],{},[25,5184,5186],{"id":5185},"putting-it-together-cms-for-real-projects","Putting it together: CMS for real projects",[15,5188,5189],{},"Here's how the pieces connect for common project types.",[15,5191,5192,5195,5196,5198],{},[52,5193,5194],{},"Client blog",": One collection (",[63,5197,65],{},") with Title, Slug, Date, Author (reference to Authors), Cover Image, Excerpt, Body (rich text), Tags (multi-reference to Tags). CMS detail page with template variable SEO. Index page with Collection List sorted by date descending. Native Dynamic Filters for category. CMS Scheduler if the client wants to queue posts in advance.",[15,5200,5201,5195,5204,5207],{},[52,5202,5203],{},"Property directory",[63,5205,5206],{},"Listings",") with Name, Location, Category (reference), Price, Images, Description, Tags. Index page with CMS Filter for category, location, and price range. Detail page per listing. SEO meta variables on detail page. CMS Find and Replace ready for any client rebranding.",[15,5209,5210,5195,5212,5215],{},[52,5211,3345],{},[63,5213,5214],{},"Jobs",") with Title, Company, Location, Salary Range, Job Type, Description, Apply URL, Published Date. Index page with CMS Filter for location, job type, and salary range. Detail page for each listing. CSV import from job aggregator.",[22,5217],{},[25,5219,681],{"id":680},[122,5221,3731],{"id":5222},"what-is-framer-cms-1",[15,5224,5225],{},"Framer CMS is the built-in content management system inside Framer. It lets you create collections of structured content, blog posts, team members, products, listings, and display them dynamically across your site without rebuilding pages manually.",[122,5227,5229],{"id":5228},"what-are-the-limitations-of-framer-cms","What are the limitations of Framer CMS?",[15,5231,5232],{},"Framer CMS limits you to 1,000 items per collection on the Pro plan (10,000 on Scale). Collections max out at 30 fields. There is no native scheduled publishing, no versioning, no user-generated content, and no built-in full-text search. Native Dynamic Filters handle basic filtering but cannot combine search, price ranges, and multiple filter types at the same time.",[122,5234,5236],{"id":5235},"can-i-import-content-into-framer-cms","Can I import content into Framer CMS?",[15,5238,5239],{},"Yes. Framer supports CSV import directly from the CMS panel. Map your CSV columns to collection fields, and Framer populates your items in bulk. Useful for migrating from another platform or managing content in a spreadsheet externally.",[122,5241,5243],{"id":5242},"does-framer-cms-have-an-api","Does Framer CMS have an API?",[15,5245,5246,5247,5251],{},"Yes. Framer provides a REST-based CMS API that lets you read and write collection items programmatically. You can fetch items from external apps, push content from third-party tools, or sync Framer CMS with an external data source. API access requires a paid plan. See the ",[326,5248,5250],{"href":4443,"rel":5249},[330],"official Framer API documentation"," for endpoint reference and authentication setup.",[122,5253,5255],{"id":5254},"how-do-i-add-advanced-filtering-to-framer-cms","How do I add advanced filtering to Framer CMS?",[15,5257,5258,5259,5261],{},"Framer's native Dynamic Filters handle simple, single-field filtering. For multi-field search, price range sliders, active filter chips, result counts, and URL parameters, you need a dedicated plugin. ",[326,5260,659],{"href":658}," adds all of this with a drag-and-drop setup, no custom code required. Free tier available, paid plans from $79 lifetime.",[122,5263,5265],{"id":5264},"how-do-i-schedule-blog-posts-in-framer-cms","How do I schedule blog posts in Framer CMS?",[15,5267,5268],{},"Framer has no native scheduled publishing. To publish a post at a specific time, you either click Publish manually or use a plugin. CMS Scheduler handles this: connect your project, pick a collection, set a date and time. The free tier holds 3 posts in the queue at once on one project; Pro is $49/year and Unlimited $99/year. A scheduled publish deploys the whole project, not just that post.",[22,5270],{},[25,5272,1468],{"id":1467},[15,5274,5275],{},"Framer CMS handles most small-to-medium content projects well. Collections, reference fields, CMS pages, CSV import, and the API cover the fundamentals. Native Dynamic Filters work for simple category filtering.",[15,5277,5278],{},"Where it runs short: no scheduled publishing, no versioning, no built-in search, and native filtering that can only handle one condition at a time.",[15,5280,5281],{},"The FramerHub CMS toolkit fills those gaps. CMS Filter for multi-field filtering and search. CMS Scheduler for the scheduled publishing you're missing. CMS Find and Replace for bulk edits when a client rebrands or a URL changes across hundreds of items.",[15,5283,5284],{},"Build with native Framer CMS where it's enough. Reach for plugins when the project needs more.",[15,5286,5287],{},[1026,5288,5289],{},"Last updated: June 2026",{"title":719,"searchDepth":720,"depth":720,"links":5291},[5292,5293,5296,5299,5304,5308,5312,5315,5316,5320,5321,5322,5323,5330,5339,5340,5348],{"id":3730,"depth":720,"text":3731},{"id":3802,"depth":720,"text":3803,"children":5294},[5295],{"id":3822,"depth":727,"text":3823},{"id":3985,"depth":720,"text":3986,"children":5297},[5298],{"id":4037,"depth":727,"text":4038},{"id":4077,"depth":720,"text":4078,"children":5300},[5301,5302,5303],{"id":4092,"depth":727,"text":4093},{"id":4122,"depth":727,"text":4123},{"id":4158,"depth":727,"text":4159},{"id":4183,"depth":720,"text":4184,"children":5305},[5306,5307],{"id":4201,"depth":727,"text":4202},{"id":4236,"depth":727,"text":4237},{"id":4280,"depth":720,"text":4281,"children":5309},[5310,5311],{"id":4289,"depth":727,"text":4290},{"id":4325,"depth":727,"text":4326},{"id":4373,"depth":720,"text":4374,"children":5313},[5314],{"id":4391,"depth":727,"text":4392},{"id":4450,"depth":720,"text":4451},{"id":4518,"depth":720,"text":4519,"children":5317},[5318,5319],{"id":4529,"depth":727,"text":4530},{"id":4552,"depth":727,"text":4553},{"id":4639,"depth":720,"text":4640},{"id":4721,"depth":720,"text":4722},{"id":4765,"depth":720,"text":4766},{"id":4827,"depth":720,"text":4828,"children":5324},[5325,5326,5327,5328,5329],{"id":4834,"depth":727,"text":4835},{"id":4867,"depth":727,"text":4868},{"id":4887,"depth":727,"text":4888},{"id":4905,"depth":727,"text":4906},{"id":4921,"depth":727,"text":4922},{"id":4946,"depth":720,"text":4947,"children":5331},[5332,5333,5334,5335,5336,5337,5338],{"id":4953,"depth":727,"text":4954},{"id":5031,"depth":727,"text":5032},{"id":5041,"depth":727,"text":5042},{"id":5048,"depth":727,"text":5049},{"id":5055,"depth":727,"text":5056},{"id":5062,"depth":727,"text":5063},{"id":5069,"depth":727,"text":5070},{"id":5185,"depth":720,"text":5186},{"id":680,"depth":720,"text":681,"children":5341},[5342,5343,5344,5345,5346,5347],{"id":5222,"depth":727,"text":3731},{"id":5228,"depth":727,"text":5229},{"id":5235,"depth":727,"text":5236},{"id":5242,"depth":727,"text":5243},{"id":5254,"depth":727,"text":5255},{"id":5264,"depth":727,"text":5265},{"id":1467,"depth":720,"text":1468},"Everything you need to know about Framer CMS: collections, fields, CMS pages, CSV import, dynamic filtering, SEO, and real limitations. Updated 2026.","/framerhub/img/blog/framer-cms-complete-guide/framer-cms-complete-guide.webp",{"metaTitle":5352,"metaDescription":5353,"primaryKeyword":5354,"secondaryKeywords":5355,"heroImage":5350,"ogImage":5350,"schema":5360,"createdAt":5372},"Framer CMS: How It Works and Where It Stops | FramerHub","Collections, fields, references, CSV import, the CMS API, filtering and SEO in Framer CMS, plus the plan caps and limits nobody mentions until you hit them.","framer cms",[5356,742,5357,5358,5359],"framer cms tutorial","framer cms api","framer cms limitations","how to use framer cms",[5361,5362],{"type":750,"headline":3709,"datePublished":3684,"dateModified":3685},{"type":753,"questions":5363},[5364,5365,5366,5367,5369,5371],{"question":3731,"answer":5225},{"question":5229,"answer":5232},{"question":5236,"answer":5239},{"question":5243,"answer":5368},"Yes. Framer provides a REST-based CMS API that lets you read and write collection items programmatically. You can fetch items from external apps, push content from third-party tools, or sync Framer CMS with an external data source. API access requires a paid plan.",{"question":5255,"answer":5370},"Framer's native Dynamic Filters handle simple, single-field filtering. For multi-field search, price range sliders, active filter chips, result counts, and URL parameters, you need a dedicated plugin. CMS Filter adds all of this with a drag-and-drop setup, no custom code required. Free tier available, paid plans from $79.",{"question":5265,"answer":5268},"2026-05-22","2026-05-22T00:00:00.000Z",16,{"title":3709,"description":5349},"framer-cms-complete-guide","blog/framer-cms-complete-guide",[777,54,5379],"Guide","h1hncO1hXzRxxXxIRZBM2zk_4ygSfcVnYR6mVhhfrHI",{"id":5382,"title":5383,"author":5384,"body":5385,"category":735,"description":6061,"extension":737,"featured":768,"image":6062,"meta":6063,"navigation":768,"path":6091,"published":768,"publishedAt":6092,"readingTime":2092,"robots":772,"seo":6093,"slug":6094,"stem":6095,"tags":6096,"updatedAt":6100,"__hash__":6101},"blog/blog/getting-started-framer-components.md","How to Add Code Components to Framer (Complete Guide for Beginners)",{"name":8,"avatar":9,"bio":10},{"type":12,"value":5386,"toc":6027},[5387,5397,5404,5408,5413,5416,5430,5437,5441,5444,5448,5451,5455,5458,5462,5465,5469,5472,5531,5534,5538,5542,5553,5559,5562,5566,5601,5608,5612,5615,5631,5635,5645,5676,5679,5683,5686,5726,5730,5733,5753,5757,5761,5767,5771,5776,5780,5788,5792,5801,5805,5809,5816,5820,5832,5836,5843,5847,5853,5857,5860,5901,5904,5912,5915,5935,5938,5942,5945,5972,5982,5986,5993,5996,6001,6020],[15,5388,5389,5390,5393,5394],{},"If you're new to ",[52,5391,5392],{},"Framer code components",", you're probably wondering: ",[1026,5395,5396],{},"\"How hard is it to actually add these to my site?\"",[15,5398,5399,5400,5403],{},"The honest answer: it's easier than duplicating a frame. This guide walks through exactly how to ",[52,5401,5402],{},"add code components to Framer",", customize them without touching code, troubleshoot the handful of things that commonly go wrong, and unlock functionality a raw Framer frame simply can't do on its own.",[25,5405,5407],{"id":5406},"what-are-framer-code-components","What Are Framer Code Components?",[15,5409,5410,5412],{},[52,5411,5392],{}," are pre-built React components you drop directly into your Framer project, the same way you'd drag in a native frame or shape.",[15,5414,5415],{},"Think of them as a level up from regular design elements:",[101,5417,5418,5424],{},[48,5419,5420,5423],{},[52,5421,5422],{},"Regular frames"," = static shapes, text, and images with Framer's built-in interactions.",[48,5425,5426,5429],{},[52,5427,5428],{},"Code components"," = interactive elements with real logic underneath — filterable galleries, CMS carousels, animated counters, form validation, scroll-triggered effects.",[15,5431,5432,5433,5436],{},"They're built by developers using React and TypeScript, but the entire point is that they're ",[1026,5434,5435],{},"designed for designers"," — every meaningful option is exposed as a control in the Properties Panel, no code editing required.",[25,5438,5440],{"id":5439},"why-use-code-components-in-framer","Why Use Code Components in Framer?",[15,5442,5443],{},"Here's what a good code component unlocks that native Framer layers generally can't:",[122,5445,5447],{"id":5446},"_1-advanced-functionality-without-code","1. Advanced Functionality Without Code",[15,5449,5450],{},"Want a filterable CMS gallery with multi-field filtering? A countdown timer with a real backend-synced deadline? An animated pricing table with plan comparison logic? Code components give you these instantly, instead of hacking together a workaround with overrides and states.",[122,5452,5454],{"id":5453},"_2-save-real-hours-of-build-time","2. Save Real Hours of Build Time",[15,5456,5457],{},"Instead of spending an afternoon figuring out how to build a custom accordion with the exact animation curve you want, you install a tested one in two minutes and spend that afternoon on the client's actual design instead.",[122,5459,5461],{"id":5460},"_3-professional-looking-sites-faster","3. Professional-Looking Sites, Faster",[15,5463,5464],{},"High-quality components are already tested across breakpoints, accessibility basics, and performance — you inherit that quality instead of re-deriving it from scratch on every project.",[25,5466,5468],{"id":5467},"code-components-vs-code-overrides-vs-native-layers","Code Components vs. Code Overrides vs. Native Layers",[15,5470,5471],{},"Beginners often conflate three different things Framer offers. They solve different problems:",[127,5473,5474,5487],{},[130,5475,5476],{},[133,5477,5478,5481,5484],{},[136,5479,5480],{},"Approach",[136,5482,5483],{},"What it is",[136,5485,5486],{},"Best for",[146,5488,5489,5502,5519],{},[133,5490,5491,5496,5499],{},[151,5492,5493],{},[52,5494,5495],{},"Native layers",[151,5497,5498],{},"Frames, text, images, Framer's built-in interactions",[151,5500,5501],{},"Standard layouts, simple hover/tap states, basic scroll effects",[133,5503,5504,5509,5516],{},[151,5505,5506],{},[52,5507,5508],{},"Code overrides",[151,5510,5511,5512,5515],{},"Small React snippets applied ",[1026,5513,5514],{},"on top of"," an existing layer to modify its behavior",[151,5517,5518],{},"Tweaking one specific interaction (e.g., custom easing, conditional visibility)",[133,5520,5521,5525,5528],{},[151,5522,5523],{},[52,5524,5428],{},[151,5526,5527],{},"Standalone React components with their own internal logic and property controls",[151,5529,5530],{},"Complex, reusable functionality (galleries, filters, forms, carousels)",[15,5532,5533],{},"If you're not sure which you need: if a native frame with variants and interactions can do it, use that — it's simpler to maintain. If you need logic (filtering, data fetching, complex state), you need a code component. If you just need to tweak how an existing layer behaves in one specific way, a code override is often the lighter-weight fix.",[25,5535,5537],{"id":5536},"how-to-add-code-components-to-framer-step-by-step","How to Add Code Components to Framer (Step-by-Step)",[122,5539,5541],{"id":5540},"step-1-get-the-component-url","Step 1: Get the Component URL",[15,5543,5544,5545,5548,5549,5552],{},"After purchasing a component from ",[52,5546,5547],{},"FramerHub"," (or any marketplace), you'll receive a ",[52,5550,5551],{},"component URL",". It looks like this:",[4844,5554,5557],{"className":5555,"code":5556,"language":4849},[4847],"https://framer.com/m/ComponentName-XyZ1.js\n",[63,5558,5556],{"__ignoreMap":719},[15,5560,5561],{},"Copy this URL to your clipboard — you won't need to download or upload any files manually.",[122,5563,5565],{"id":5564},"step-2-add-the-component-to-your-framer-project","Step 2: Add the Component to Your Framer Project",[45,5567,5568,5573,5582,5589,5595],{},[48,5569,5570],{},[52,5571,5572],{},"Open your Framer project.",[48,5574,4210,5575,5578,5579,3421],{},[52,5576,5577],{},"\"+\" button"," in the toolbar (or press ",[63,5580,5581],{},"Cmd/Ctrl + K",[48,5583,5584,5585,5588],{},"Select ",[52,5586,5587],{},"\"Code Component\""," from the menu.",[48,5590,5591,5594],{},[52,5592,5593],{},"Paste the component URL"," into the field.",[48,5596,5597,5598,1053],{},"Hit ",[52,5599,5600],{},"Enter",[15,5602,5603,5604,5607],{},"That's it — the component now appears in your project's ",[52,5605,5606],{},"Assets panel",", ready to use on any page.",[122,5609,5611],{"id":5610},"step-3-drag-it-onto-your-canvas","Step 3: Drag It Onto Your Canvas",[15,5613,5614],{},"Just like any other layer:",[45,5616,5617,5623,5628],{},[48,5618,5619,5620,5622],{},"Find the component in the ",[52,5621,5606],{}," (left sidebar).",[48,5624,5625,5627],{},[52,5626,4306],{},", wherever you need it.",[48,5629,5630],{},"Resize and reposition it like a normal frame.",[122,5632,5634],{"id":5633},"step-4-customize-the-component","Step 4: Customize the Component",[15,5636,5637,5638,5640,5641,5644],{},"Most ",[52,5639,5392],{}," ship with a full set of customizable properties in the ",[52,5642,5643],{},"Properties Panel"," (right sidebar). Typical controls include:",[101,5646,5647,5653,5658,5664,5670],{},[48,5648,5649,5652],{},[52,5650,5651],{},"Colors"," — primary, secondary, background, text.",[48,5654,5655,5657],{},[52,5656,155],{}," — headings, labels, button copy.",[48,5659,5660,5663],{},[52,5661,5662],{},"Sizing"," — padding, spacing, width/height, corner radius.",[48,5665,5666,5669],{},[52,5667,5668],{},"Animation"," — speed, easing curve, trigger (on load, on scroll, on hover).",[48,5671,5672,5675],{},[52,5673,5674],{},"CMS connections"," — if the component supports it, a dropdown to connect a collection and map fields.",[15,5677,5678],{},"No code required at any point — just point, click, and adjust.",[25,5680,5682],{"id":5681},"common-setup-mistakes-and-how-to-fix-them","Common Setup Mistakes (And How to Fix Them)",[15,5684,5685],{},"Even a two-minute install has a few predictable failure points:",[101,5687,5688,5698,5704,5714,5720],{},[48,5689,5690,5693,5694,5697],{},[52,5691,5692],{},"Pasting the wrong URL format."," The component URL must end in ",[63,5695,5696],{},".js"," and come directly from the marketplace listing — pasting a marketing page URL instead of the actual component file URL will fail silently.",[48,5699,5700,5703],{},[52,5701,5702],{},"Forgetting to connect CMS fields."," A CMS-ready component installed without connecting the collection will show placeholder/demo content. Check the Properties Panel for a \"Collection\" or \"Data Source\" dropdown.",[48,5705,5706,5709,5710,5713],{},[52,5707,5708],{},"Stacking too many heavy components on one page."," Each code component adds some JavaScript weight. A page with 8-10 heavy animated components can start to feel sluggish — see our guide on ",[326,5711,5712],{"href":1255},"optimizing Framer site performance"," if you notice lag.",[48,5715,5716,5719],{},[52,5717,5718],{},"Not testing responsive behavior."," Some components have separate mobile/tablet property overrides — always check the Breakpoints panel after installing, don't assume desktop settings carry over perfectly.",[48,5721,5722,5725],{},[52,5723,5724],{},"Using an outdated component URL after a marketplace update."," If a component gets a major version update, older embed URLs may be deprecated — check the marketplace listing for the current URL if something stops working after months of no changes on your end.",[25,5727,5729],{"id":5728},"updating-a-code-component-after-install","Updating a Code Component After Install",[15,5731,5732],{},"Code components installed via URL update automatically when the developer ships a new version to that same URL — you don't need to reinstall manually in most cases. That said, a few habits keep updates from surprising you mid-project:",[101,5734,5735,5741,5747],{},[48,5736,5737,5740],{},[52,5738,5739],{},"Check the changelog before a client handoff."," If a component received a major update recently, verify your specific property configuration still looks right before delivering the final site.",[48,5742,5743,5746],{},[52,5744,5745],{},"Screenshot key pages before a known update window."," If a marketplace announces a breaking change to a component you rely on heavily, a quick before/after comparison saves debugging time later.",[48,5748,5749,5752],{},[52,5750,5751],{},"Don't panic over minor visual shifts."," A well-maintained component library treats visual changes as intentional improvements (better default spacing, refined animation curves), not bugs — check the release notes before assuming something broke.",[25,5754,5756],{"id":5755},"common-questions-about-framer-code-components","Common Questions About Framer Code Components",[122,5758,5760],{"id":5759},"q-do-i-need-to-know-react-to-use-code-components","Q: Do I need to know React to use code components?",[15,5762,5763,5766],{},[52,5764,5765],{},"A:"," No. Code components are designed to be used by designers. You customize them through the Properties Panel, just like regular frames — React knowledge is only relevant if you choose to edit the underlying code.",[122,5768,5770],{"id":5769},"q-can-i-edit-the-code-inside-a-component","Q: Can I edit the code inside a component?",[15,5772,5773,5775],{},[52,5774,5765],{}," Yes, if you want to. You can \"Unlink\" a component and edit the code directly. But most users never need to do this — the exposed controls cover nearly every customization a typical project needs.",[122,5777,5779],{"id":5778},"q-will-code-components-slow-down-my-site","Q: Will code components slow down my site?",[15,5781,5782,5784,5785,5787],{},[52,5783,5765],{}," Not if they're built well. High-quality components (like those from ",[52,5786,5547],{},") are optimized for performance, using memoization and minimal bundle size so they don't add noticeable load time.",[122,5789,5791],{"id":5790},"q-can-i-use-code-components-with-framer-cms","Q: Can I use code components with Framer CMS?",[15,5793,5794,5796,5797,5800],{},[52,5795,5765],{}," Absolutely. Many components are ",[1026,5798,5799],{},"designed"," for CMS integration — filterable galleries, dynamic cards, CMS-connected carousels are common use cases.",[25,5802,5804],{"id":5803},"pro-tips-for-using-framer-code-components","Pro Tips for Using Framer Code Components",[122,5806,5808],{"id":5807},"_1-use-component-variants","1. Use Component Variants",[15,5810,5811,5812,5815],{},"Many components have built-in ",[52,5813,5814],{},"variants"," (Light/Dark, Small/Large, Compact/Expanded). Use these to match your design system instead of manually restyling every instance.",[122,5817,5819],{"id":5818},"_2-create-master-components","2. Create Master Components",[15,5821,5822,5823,5826,5827,5831],{},"If you use the same code component across multiple pages, wrap it in a ",[52,5824,5825],{},"Master Component"," so changes sync everywhere it's used. This is the foundation of ",[326,5828,5830],{"href":5829},"/blog/scalable-framer-architecture-for-agencies","scalable agency architecture"," — one place to update, not a dozen.",[122,5833,5835],{"id":5834},"_3-test-on-mobile-early-not-last","3. Test on Mobile Early, Not Last",[15,5837,5838,5839,5842],{},"Always preview on mobile ",[1026,5840,5841],{},"before"," you've finished the whole page. Some components expose separate responsive properties you'll want to adjust per breakpoint, and catching this early avoids a rebuild pass at the end.",[122,5844,5846],{"id":5845},"_4-start-with-a-library-not-one-off-purchases","4. Start with a Library, Not One-Off Purchases",[15,5848,5849,5850,5852],{},"Instead of buying components one at a time as you hit each need, start with a ",[52,5851,538],{}," (like FramerHub's bundles) to get a broad toolkit at once — it's almost always cheaper per-component and means you're not searching mid-project for a specific piece.",[25,5854,5856],{"id":5855},"a-real-example-adding-a-cms-connected-gallery","A Real Example: Adding a CMS-Connected Gallery",[15,5858,5859],{},"To make this concrete, here's what installing a real CMS-connected component looks like end to end, using a gallery component as the example.",[45,5861,5862,5871,5877,5883,5889,5895],{},[48,5863,5864,5867,5868,1053],{},[52,5865,5866],{},"Install the component"," via its URL, following Steps 1-2 above. It appears in the Assets panel as ",[63,5869,5870],{},"Gallery Kit / CMS Gallery",[48,5872,5873,5876],{},[52,5874,5875],{},"Drag it onto a page"," where you want the gallery — typically a portfolio or case-studies page.",[48,5878,5879,5882],{},[52,5880,5881],{},"Open the Properties Panel"," and look for a \"Collection\" dropdown. Select the CMS collection you want to display (e.g., \"Projects\").",[48,5884,5885,5888],{},[52,5886,5887],{},"Map the fields."," Most gallery components ask you to map the collection's image field, title field, and optionally a category field for filtering. This takes 30 seconds if your CMS fields are already named sensibly.",[48,5890,5891,5894],{},[52,5892,5893],{},"Choose a layout variant"," — masonry, grid, or carousel are common options exposed directly in the Properties Panel.",[48,5896,5897,5900],{},[52,5898,5899],{},"Preview and adjust spacing/sizing"," for your specific page width, then publish.",[15,5902,5903],{},"Building the equivalent from scratch — a responsive masonry layout with a lightbox, connected dynamically to a CMS collection — would typically take an experienced Framer developer several hours. Installing a tested one takes minutes, and you inherit browser and accessibility testing you didn't have to do yourself.",[25,5905,5907,5908,5911],{"id":5906},"when-not-to-use-a-code-component","When ",[1026,5909,5910],{},"Not"," to Use a Code Component",[15,5913,5914],{},"Code components solve real problems, but they're not always the right tool. Reach for a native Framer layer instead when:",[101,5916,5917,5923,5929],{},[48,5918,5919,5922],{},[52,5920,5921],{},"The interaction is genuinely simple"," — a basic hover color change or a fade-in on scroll doesn't need a code component; Framer's native Hover/Tap variants and Scroll Transform handle it with zero added weight.",[48,5924,5925,5928],{},[52,5926,5927],{},"You need pixel-perfect control over a one-off layout"," that won't repeat elsewhere — a component's abstraction can get in the way when you need to hand-tune something unique to a single page.",[48,5930,5931,5934],{},[52,5932,5933],{},"Performance is already tight"," and the component would add meaningful weight for a marginal visual improvement — weigh the interaction's value against its cost on a page that's already near your performance budget.",[15,5936,5937],{},"The rule of thumb: reach for a code component when you need real logic or a proven, reusable pattern. Reach for native layers when the interaction is simple enough that a component would be over-engineering it.",[25,5939,5941],{"id":5940},"where-to-find-high-quality-framer-code-components","Where to Find High-Quality Framer Code Components",[15,5943,5944],{},"Not all components are built to the same standard. Before installing one, check for:",[101,5946,5947,5954,5960,5966],{},[48,5948,5949,5950,5953],{},"✅ ",[52,5951,5952],{},"Performance-tested"," — loads fast, doesn't introduce jank on scroll.",[48,5955,5949,5956,5959],{},[52,5957,5958],{},"Well-documented"," — clear instructions and labeled property controls, not cryptic abbreviations.",[48,5961,5949,5962,5965],{},[52,5963,5964],{},"Regularly updated"," — bug fixes and ongoing compatibility with new Framer releases.",[48,5967,5949,5968,5971],{},[52,5969,5970],{},"Real support"," — a way to reach the developer directly if something breaks.",[15,5973,5974,5977,5978,5981],{},[326,5975,5547],{"href":5976},"/plugins/framer-components"," offers a curated library of premium components built specifically for ",[52,5979,5980],{},"Framer freelancers and agencies",". Every component is tested, optimized, and ready for client work out of the box.",[25,5983,5985],{"id":5984},"conclusion","Conclusion",[15,5987,5988,5989,5992],{},"Adding ",[52,5990,5991],{},"code components to Framer"," is one of the fastest ways to level up a project without writing a single line of code yourself.",[15,5994,5995],{},"Instead of spending hours building a custom interaction from scratch, you get a battle-tested component running in minutes — and your clients get a more polished, more interactive site as a result.",[15,5997,5998],{},[52,5999,6000],{},"Next steps:",[45,6002,6003,6014,6017],{},[48,6004,3608,6005,6008,6009,6013],{},[326,6006,6007],{"href":537},"FramerHub component library",". Starting from a category, such as ",[326,6010,6012],{"href":6011},"/components/category/backgrounds","animated backgrounds",", narrows the choice quickly.",[48,6015,6016],{},"Pick a component that solves a real pain point in your current build.",[48,6018,6019],{},"Install it, connect any CMS fields it needs, and see how much build time it saves you.",[15,6021,6022,6023,6026],{},"Ready to build faster? ",[326,6024,6025],{"href":537},"Explore FramerHub Components →"," and see for yourself how much time a tested library saves on your very next client project.",{"title":719,"searchDepth":720,"depth":720,"links":6028},[6029,6030,6035,6036,6042,6043,6044,6050,6056,6057,6059,6060],{"id":5406,"depth":720,"text":5407},{"id":5439,"depth":720,"text":5440,"children":6031},[6032,6033,6034],{"id":5446,"depth":727,"text":5447},{"id":5453,"depth":727,"text":5454},{"id":5460,"depth":727,"text":5461},{"id":5467,"depth":720,"text":5468},{"id":5536,"depth":720,"text":5537,"children":6037},[6038,6039,6040,6041],{"id":5540,"depth":727,"text":5541},{"id":5564,"depth":727,"text":5565},{"id":5610,"depth":727,"text":5611},{"id":5633,"depth":727,"text":5634},{"id":5681,"depth":720,"text":5682},{"id":5728,"depth":720,"text":5729},{"id":5755,"depth":720,"text":5756,"children":6045},[6046,6047,6048,6049],{"id":5759,"depth":727,"text":5760},{"id":5769,"depth":727,"text":5770},{"id":5778,"depth":727,"text":5779},{"id":5790,"depth":727,"text":5791},{"id":5803,"depth":720,"text":5804,"children":6051},[6052,6053,6054,6055],{"id":5807,"depth":727,"text":5808},{"id":5818,"depth":727,"text":5819},{"id":5834,"depth":727,"text":5835},{"id":5845,"depth":727,"text":5846},{"id":5855,"depth":720,"text":5856},{"id":5906,"depth":720,"text":6058},"When Not to Use a Code Component",{"id":5940,"depth":720,"text":5941},{"id":5984,"depth":720,"text":5985},"Learn how to install and customize Framer code components in minutes. A beginner-friendly guide to adding advanced functionality without writing code.","/framerhub/img/blog/getting-started.webp",{"metaTitle":6064,"metaDescription":6065,"primaryKeyword":6066,"secondaryKeywords":6067,"heroImage":6062,"ogImage":6062,"schema":6071,"createdAt":6073},"How to Add Code Components to Framer | FramerHub","A complete beginner's guide to Framer code components — how to install, customize, and troubleshoot them without writing a single line of code yourself.","framer code components",[6068,6069,6070],"add code components to framer","framer code component tutorial","framer code override",[6072,6074],{"type":750,"headline":5383,"datePublished":6073,"dateModified":767},"2026-01-16",{"type":753,"questions":6075},[6076,6079,6082,6085,6088],{"question":6077,"answer":6078},"Do I need to know React to use Framer code components?","No. Code components are built by developers but designed for designers — you customize them entirely through the Properties Panel, the same way you'd style a regular frame. Knowing React only matters if you want to edit the underlying code yourself.",{"question":6080,"answer":6081},"Can I edit the code inside a Framer code component?","Yes, if you want to. Select the component instance and choose 'Unlink' (or open it as a code file) to edit the React/TypeScript source directly. Most users never need to — the exposed property controls cover the vast majority of customization needs.",{"question":6083,"answer":6084},"Will code components slow down my Framer site?","Not if they're built well. High-quality components are optimized for performance — using memoization, lazy-loading where appropriate, and minimal bundle size. Poorly built components (heavy unoptimized loops, unnecessary re-renders) can add lag, which is why sourcing components from a tested library matters.",{"question":6086,"answer":6087},"Can I use code components with Framer's CMS?","Absolutely. Many components are purpose-built for CMS integration — filterable galleries, dynamic cards, CMS-connected carousels. You connect a CMS collection to the component's properties the same way you'd connect it to a native Framer element.",{"question":6089,"answer":6090},"Where do I find the component URL to install a code component?","After purchasing or downloading a component from a marketplace like FramerHub, you'll receive a URL in the format https://framer.com/m/ComponentName-XyZ1.js. Paste this into Framer's Code Component insertion dialog (Cmd/Ctrl + K → Code Component) to add it to your project's Assets panel.","/blog/getting-started-framer-components","2026-01-16T00:00:00.000Z",{"title":5383,"description":6061},"getting-started-framer-components","blog/getting-started-framer-components",[777,1549,6097,6098,6099],"Beginner","Components","Code Components","2026-07-06T00:00:00.000Z","k-elLLcksHBgYEzxJbfm9ppZOXJPFCqXJzZ04LFjgJQ",1792857356527]