5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T915,

CMSSearch provides a native-feeling search input for Framer CMS collections. It works by generating a lightweight JSON index of your content, which is stored directly on the component. This allows for immediate search results and filtering without server-side latency.

Core Functions

Free Forever Version

Local Indexing: Search runs entirely in the browser using a pre-generated index.
Fuzzy Search: A self-contained matcher handles typos and approximate matches.
Styling Control: Full control over input borders, colors, shadows, and typography.

Pro Version

Tag Filtering: Map a CMS field to generate clickable filter tags.
Results Preview: Display content snippets alongside titles in the dropdown.
Premium Micro-interactions: Polished hover effects and smooth dropdown animations for a cohesive feel.

Quick Start

Open the CMSSearch plugin.
Click Insert Component to add the CMSSearch component to your page.
Select the inserted component, then choose the target CMS collection.
Click Generate Index to create the search data.
Configure appearance and specialized fields (Tags, Preview) in the properties panel.

Why is Manual Indexing Required?

Framer sites are statically optimized for performance, meaning your CMS database is not directly accessible to the browser at runtime.

CMSSearch bridges this gap by using the Framer Plugin API to safely read your collection at design time and create a search-optimized index. This enables:

Zero Latency: Search runs instantly without waiting for server requests.
Security: Only the data needed for search is exposed to the client.
Reliability: Works perfectly even on static hosting or flaky connections.

Note: You simply need to click "Generate Index" again whenever you add new or update content to your CMS.

5a:[["$","$L5d",null,{"post":{"id":"019b34d7-abc8-71eb-b894-e9575be121b6","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"d95cfc43-69c3-4ff4-ac0a-76a13cfd5d26","name":"CodePerfect","slug":"code-perfect","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1390421/avatar-6rFGKMnHu9nxku5dQctcxcF3mSQq7i.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"668","resolved":true,"title":"CMS Search","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"CMSSearch","marks":[{"type":"bold"}]},{"type":"text","text":" provides a native-feeling search input for Framer CMS collections. It works by generating a lightweight JSON index of your content, which is stored directly on the component. This allows for immediate search results and filtering without server-side latency."}]},{"type":"customHeading","content":[{"type":"text","text":"Core Functions"}],"attrs":{"level":1}},{"type":"customHeading","content":[{"type":"text","text":"Free Forever Version"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Local Indexing:","marks":[{"type":"bold"}]},{"type":"text","text":" Search runs entirely in the browser using a pre-generated index."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fuzzy Search:","marks":[{"type":"bold"}]},{"type":"text","text":" A self-contained matcher handles typos and approximate matches."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Styling Control:","marks":[{"type":"bold"}]},{"type":"text","text":" Full control over input borders, colors, shadows, and typography."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Pro Version"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tag Filtering:","marks":[{"type":"bold"}]},{"type":"text","text":" Map a CMS field to generate clickable filter tags."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Results Preview:","marks":[{"type":"bold"}]},{"type":"text","text":" Display content snippets alongside titles in the dropdown."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Premium Micro-interactions:","marks":[{"type":"bold"}]},{"type":"text","text":" Polished hover effects and smooth dropdown animations for a cohesive feel."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Quick Start"}],"attrs":{"level":1}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Open the "},{"type":"text","text":"CMSSearch","marks":[{"type":"bold"}]},{"type":"text","text":" plugin."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Click "},{"type":"text","text":"Insert Component","marks":[{"type":"bold"}]},{"type":"text","text":" to add the CMSSearch component to your page."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Select the inserted component, then choose the target CMS collection."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Click "},{"type":"text","text":"Generate Index","marks":[{"type":"bold"}]},{"type":"text","text":" to create the search data."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Configure appearance and specialized fields (Tags, Preview) in the properties panel."}]}]}],"attrs":{"type":null,"start":1}},{"type":"customHeading","content":[{"type":"text","text":"Why is Manual Indexing Required?"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Framer sites are statically optimized for performance, meaning your CMS database is not directly accessible to the browser at runtime."}]},{"type":"paragraph","content":[{"type":"text","text":"CMSSearch","marks":[{"type":"bold"}]},{"type":"text","text":" bridges this gap by using the Framer Plugin API to safely read your collection at design time and create a search-optimized index. This enables:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Zero Latency:","marks":[{"type":"bold"}]},{"type":"text","text":" Search runs instantly without waiting for server requests."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Security:","marks":[{"type":"bold"}]},{"type":"text","text":" Only the data needed for search is exposed to the client."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reliability:","marks":[{"type":"bold"}]},{"type":"text","text":" Works perfectly even on static hosting or flaky connections."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Note: You simply need to click \"Generate Index\" again whenever you add new or update content to your CMS.","marks":[{"type":"italic"}]}]}]},"introduction":"Client-Side CMS Search","slug":"cms-search","author":{"framerUserId":"d95cfc43-69c3-4ff4-ac0a-76a13cfd5d26","name":"CodePerfect","slug":"code-perfect","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1390421/avatar-6rFGKMnHu9nxku5dQctcxcF3mSQq7i.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/668-SVbTiCYCiJkH3aKi114H43mDSeo56G","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/668-VBaLOjxFETAUOMSaxEgBn0K1l3bthF","metadata":{"tint":{"h":180,"s":53,"l":42},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-12-15T01:04:17.781Z","updatedAt":"2026-07-18T14:48:41.716Z","publishedAt":"2026-07-18T14:48:41.710Z","featuredAt":null,"approvedAt":null,"type":"plugin","attributes":{"framerPluginId":"27u4sv352lrj6vv5zgoz1kqx6","paid":true,"categories":[{"id":"1ad3e7b2-bc61-42ce-b01a-7c8bb2278f1a","name":"CMS","slug":"cms"}],"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-12-19T04:21:48.104Z","updatedAt":"2025-12-19T04:21:48.104Z","reported":false}}],"$L5f"]

Suggested for you