PLAYBOOK · CMS
Content & CMS
Build collections, connect sections, and clean up content in bulk.
PROMPT LIBRARY
40 prompts for content & the CMS
live preview
Content & CMSBeginner~50 credits
Swap images in place
Drag in files; the agent places them.
Replace the placeholder images on this page with these uploaded files, putting each in its correct slot based on context. Preserve the existing crop, aspect ratio, and alt-text fields, and optimize the files so they don't bloat the page.
live preview
Content & CMSBeginner~100 credits
Collection from a section
Turn a built section into CMS content.
Create a Testimonials CMS collection from these selected cards, defining fields for quote, name, role, and avatar. Connect this section to the collection so it repeats over the items, limit it to six, and keep the existing card design.
live preview
Content & CMSIntermediate~100 credits
Link two collections
Add relational references.
Add a multi-reference field on the Projects collection that links each project to its matching items in the Clients collection. Backfill the references for existing projects where the client is obvious, and surface the linked client on the project detail page.
live preview
Content & CMSIntermediate~100 credits
Group records from CMS
Render data exactly how you want.
Using this team section, show team members from the CMS grouped by department, with each department label on the left and its member cards in a grid on the right. Sort members alphabetically within each group and keep it responsive.
$ npx @framer/agent
✓ connected to canvas
generate a pricing table
generating nodes
live preview
Content & CMSAdvanced~100 credits
Batch rename + redirects
Clean entries, keep URLs working.
Batch rename these blog CMS items to clear, polished, consistent titles. Then simplify each slug to match, and create 308 redirects from every old slug to the new one so existing links don't break.
$ npx @framer/agent
✓ connected to canvas
build a hero, dark, one accent
generating nodes
live preview
Content & CMSAdvanced~150 credits
Build a CMS from files
Folder to relational CMS.
I attached a folder of CSVs, markdown, and images. Analyze them, design a relational CMS, and create the collections with appropriate field types, mapping every row and reference. Ask me before guessing on any field whose mapping is ambiguous.
live preview
Content & CMSBeginner~100 credits
Generate a blog index
A real, CMS-backed article grid.
Create a blog index page backed by the CMS: a featured post on top and a responsive grid of recent posts showing thumbnail, title, date, and read time. Link each card to its detail page and add an empty state.
live preview
Content & CMSIntermediate~100 credits
Detail page from a collection
A templated single-item page.
Create a blog detail page bound to the Articles collection, with the title, hero image, rich-text body, author, and date pulled from the item, plus working previous/next links. Style the rich text with per-tag presets and make it responsive.
Rx.
live preview
Content & CMSBeginner~50 credits
Audit content tone
Find and fix overused words.
Tell me which adjective appears most often across all the written copy on the site. Then replace some of those instances with varied synonyms that better fit our brand tone, without changing the meaning of any sentence.
Tg.
live preview
Content & CMSBeginner~50 credits
Rewrite to active voice
Punchier copy sitewide.
Find every passive-voice sentence across the site and rewrite it in clear, active voice. Keep the meaning and tone intact, don't shorten anything below its needed detail, and list what you changed when you're done.
$ npx @framer/agent
✓ connected to canvas
build a hero, dark, one accent
generating nodes
live preview
Content & CMSIntermediate~150 credits
Sync from an API
Live external content.
Fetch posts from this API endpoint and upsert them into the Posts collection keyed by slug: update rows that changed, add new ones, and remove rows that no longer exist in the source. Map the fields carefully and run it without duplicating anything.
live preview
Content & CMSIntermediate~100 credits
Filterable collection list
Runtime category filters.
Add category filter buttons above this collection list so visitors can filter items live without a page reload. Drive the filter from a page variable, show an active state on the selected category, and include an empty state when a filter has no matches.
live preview
Content & CMSBeginner~50 credits
Add a field and backfill
Extend a collection cleanly.
Add a Read Time field to the Articles collection and estimate a sensible value for every existing item based on its body length. Keep the field optional, place it after the date, and surface it on the cards and detail page.
✦
◇
■
✚
❋
◆
▲
●
✦
◇
✦
◇
■
✚
❋
◆
▲
●
✦
◇
live preview
Content & CMSAdvanced~150 credits
Localize the CMS
Prep multi-language content.
Add a Spanish locale and create translation entries for every CMS item, leaving the original English untouched. Translate titles, summaries, and body text in our tone, and flag any item where a translation needs a human review.
live preview
Content & CMSIntermediate~100 credits
Products from CMS
An e-commerce-style grid.
Build a products section from the CMS with image, name, price, and an add-to-cart button per item, filterable by collection. Use tabular figures for prices, give cards equal height, and keep the grid responsive down to one column.
live preview
Content & CMSBeginner~100 credits
Featured + recent split
Editorial CMS layout.
Lay out this collection as one large pinned featured item at the top and the rest as a compact list below, all pulled from the CMS. Make the featured item span full width with a larger image, and keep the list scannable.
live preview
Content & CMSAdvanced~150 credits
Migrate between collections
Port items safely.
Port every item from the old News collection into the new Articles collection, mapping each field to its counterpart and preserving the original slug. Verify every value transferred — including rich text and images — before removing anything from the source.
live preview
Content & CMSIntermediate~100 credits
Generate item summaries
Auto-write excerpts.
Generate a concise, one-sentence summary in our brand voice for every article that doesn't already have one. Keep each under 140 characters, make it specific to the article rather than generic, and write it into the summary field.
live preview
Content & CMSBeginner~50 credits
Pin and reorder
Curate the feed.
Pin these three items to the top of the collection list in the order I gave, then sort the remaining items by date with the newest first. Add a small 'Pinned' badge to the pinned items.
live preview
Content & CMSIntermediate~100 credits
Pagination + load more
Handle large collections.
Add infinite-scroll pagination to this collection list so it loads the next batch as the visitor scrolls, with a subtle loading indicator. Fall back to a 'Load more' button, and keep the layout from jumping as new items come in.
live preview
Content & CMSAdvanced~300 credits
Team Directory From CMS
Build a staff directory page bound to a people collection
Create a People collection with fields for name, role, department, headshot, bio, and a social link, then seed eight realistic records. Build a directory page that binds a responsive card grid to this collection: three columns on desktop, two on tablet, one on mobile via breakpoints. Each card pulls the headshot, name, and role from fields. Add a stagger reveal so cards fade and rise 16px on scroll, and respect prefers-reduced-motion by disabling motion. Apply a text style to names and a muted color style to roles.
live preview
Content & CMSAdvanced~350 credits
Search Across Records
Add a live client-side search filtering CMS cards by title
Add a live search box above an existing CMS-bound list that filters records as the user types. Build a code override that reads each card's title and excerpt text, debounces input by 200ms, and hides non-matching items using opacity and display so layout reflows cleanly. Wire the input through a shared store so the count badge updates to show matches found. Handle the empty state with a friendly no-results message and a clear button. Keep it keyboard accessible with a visible focus ring on the input.
live preview
Content & CMSAdvanced~350 credits
Tag Filter Chips
Filter a collection by clickable tag chips with active states
Add a row of filter chips derived from a multi-reference Tags field on the current collection. Build an override that toggles an active variant on each chip and filters the bound list to records carrying the selected tags, supporting multiple active chips with AND logic. Style chips with a pill text style, an accent color style on the active state, and a subtle scale-down press effect. Show a result count and an All chip to reset. Make chips wrap on mobile and ensure each is a real button with aria-pressed.
live preview
Content & CMSAdvanced~400 credits
Sortable Collection List
Let visitors reorder records by date, name, or price
Add a sort dropdown to a CMS list that reorders records by newest, alphabetical, or price low-to-high. Build an override holding sort state in a store, reading the bound collection's date, title, and number fields, and reordering the rendered items accordingly with a smooth FLIP-style position transition. Style the dropdown to match the site using a color style and a small text style for the label. Default to newest first, persist the choice in sessionStorage, and disable animation under prefers-reduced-motion so reordering snaps instantly.
live preview
Content & CMSAdvanced~350 credits
Related Posts Block
Show related articles by shared category on detail pages
On the blog detail page, add a Related Posts section that surfaces three other records sharing the current item's category reference, excluding the current article. Build an override that reads the page's bound category and queries the collection for matches, falling back to most recent if fewer than three exist. Render results in an equal-height card grid using the same card component as the index. Add a staggered fade-up reveal, a hover lift with a soft shadow, and a section heading set in your display text style.
LONDON
live preview
Content & CMSAdvanced~300 credits
Reading Time Field
Compute and backfill an estimated reading time per article
Add a numeric readingTime field to the blog collection, then compute it for every existing record by counting words in the body rich text at 220 words per minute and rounding up. Backfill all records in one pass and display the value as a small meta label on both the index card and the detail header, formatted as X min read. Bind it through a text style so typography stays consistent, place it beside the publish date with a dot separator, and verify new records auto-populate when body text is added.
live preview
Content & CMSAdvanced~400 credits
CMS-Driven Nav Menu
Generate the site navigation from a menu collection
Create a Navigation collection with fields for label, url, order, and an optional parent reference for dropdowns, then seed your primary links. Bind the header nav to it so menu items render in order, with parent items revealing a child submenu on hover and focus. Build an override for the dropdown that animates height and opacity, traps focus, and closes on Escape. Make the menu collapse into a mobile drawer below the tablet breakpoint, and ensure the active page link receives a distinct color style.
live preview
Content & CMSAdvanced~400 credits
Testimonial Carousel
Rotate customer quotes pulled from a testimonials collection
Create a Testimonials collection with quote, author, company, and avatar fields, seed six entries, then build an auto-advancing carousel bound to it. Write an override that cycles one quote every five seconds with a crossfade, pauses on hover and on focus, and exposes prev/next plus dot controls tied to the live record index. Style quotes in a large serif text style and attribution in a muted style. Support swipe on touch, announce changes politely for screen readers, and freeze auto-rotation under prefers-reduced-motion.
live preview
Content & CMSAdvanced~350 credits
Draft And Publish Workflow
Add a status field and hide drafts from the live site
Add a status field with Draft, Scheduled, and Published options to the main content collection and set existing records to Published. Update the index binding so only Published items render on the live page, and build an override that also hides Scheduled records until their publishDate has passed using a date comparison. Add a small status pill visible only in a preview context for editors. Confirm the filter holds across the list, related blocks, and any featured slot, and document the field for the content team.
live preview
Content & CMSAdvanced~450 credits
Image Gallery From CMS
Build a lightbox gallery bound to an image collection
Create a Gallery collection with image, caption, and orderIndex fields, seed twelve records, and bind them to a masonry grid that preserves each image's aspect ratio. Build a lightbox override that opens the clicked image full-screen, supports arrow-key and swipe navigation across the bound records, shows the caption, and closes on Escape or backdrop click. Animate the open with a shared-element scale, lock body scroll while open, restore focus to the trigger on close, and disable the zoom animation under prefers-reduced-motion.
AMSTERDAM
live preview
Content & CMSAdvanced~400 credits
Event List With Countdown
Show upcoming events with a live countdown per record
Create an Events collection with title, startDate, location, and url fields, seed several future and past entries, then build a list that shows only upcoming events sorted by soonest. Bind each card to its fields and add a code override rendering a live countdown to startDate that ticks every second and switches to a Live now label once it begins. Format dates in the visitor's locale, move past events to a collapsible Past section, and pause timer updates when the tab is hidden to save resources.
live preview
Content & CMSAdvanced~450 credits
Author Pages And Bylines
Link posts to authors and generate per-author archive pages
Create an Authors collection with name, avatar, bio, and slug, then add an author reference to the blog collection and assign each post. Generate an author detail template page that shows the author's bio header and a grid of every post referencing them, sorted newest first. Add a clickable byline with avatar on each article that links to the author page. Style the bio block with your display and body text styles, lazy-load avatars, and ensure the archive grid matches the main index card layout responsively.
live preview
Content & CMSAdvanced~450 credits
Price Range Filter
Filter products by an interactive min-max price slider
Add a dual-handle price range slider above a products list bound to a CMS collection. Build an override that reads each product's price field, drives the slider min and max from the actual data range, and filters visible cards live as handles move, with a 150ms debounce. Show the current range as formatted currency labels and animate filtered cards out with a fade and height collapse. Make handles keyboard operable with arrow keys, provide a reset, and ensure touch targets are at least 44px on mobile.
▲
●
✦
◇
■
✚
❋
◆
▲
●
▲
●
✦
◇
■
✚
❋
◆
▲
●
live preview
Content & CMSIntermediate~250 credits
Breaking News Ticker
Scroll latest headlines from a CMS in a marquee bar
Create or reuse a News collection and build a thin ticker bar that scrolls the five most recent headlines horizontally in a seamless loop. Write an override that duplicates the bound items to create an infinite marquee, pauses on hover and on focus-within, and links each headline to its detail page. Style the bar with an accent color style and a compact text style, add a Latest label badge on the left, and stop the animation entirely under prefers-reduced-motion, falling back to a static list of headlines.
live preview
Content & CMSAdvanced~350 credits
FAQ Accordion From CMS
Render an accordion of question-answer records
Create an FAQ collection with question, answer rich text, and order fields, seed eight entries, then bind them to an accordion list. Build an override where each item expands and collapses with an animated height and chevron rotation, allowing only one open at a time, and deep-links via URL hash so a shared link opens the right question. Use proper button semantics with aria-expanded and aria-controls, set questions in a heading text style, and ensure the open animation respects prefers-reduced-motion by snapping instead.
live preview
Content & CMSAdvanced~350 credits
Stats Counters From CMS
Animate key metrics stored as CMS number fields
Create a Metrics collection with label, value, prefix, and suffix fields, seed four KPIs, and bind them to a four-up stat band. Build an override that counts each number up from zero to its CMS value when the band scrolls into view, easing over 1.2 seconds and formatting with thousands separators plus any prefix or suffix. Trigger once via an intersection observer, fall back to the final value immediately under prefers-reduced-motion, and lay the band out as two columns on mobile with the value in a large display text style.
$ npx @framer/agent
✓ connected to canvas
generate a pricing table
generating nodes
live preview
Content & CMSAdvanced~400 credits
Sitemap From Collections
Auto-generate an HTML sitemap page from every collection
Build an HTML sitemap page that lists links to every static page plus every record across your CMS collections, grouped by collection with a heading for each group. Write an override that iterates the bound collections and renders item titles linking to their detail slugs, sorted alphabetically within each group. Add a count badge per group, use your link color style for entries, and keep the layout to a clean multi-column list that collapses to one column on mobile. Confirm the page itself is excluded from indexing if desired.
live preview
Content & CMSAdvanced~450 credits
Case Study Showcase
Build an alternating split layout from a projects collection
Create a Projects collection with title, client, summary, hero image, result metric, and url, seed five entries, then build a showcase where each record renders as a full-width split row alternating image-left and image-right down the page. Bind every field, drive the alternation by record index in an override, and add a scroll-linked parallax on each hero image plus a fade-up on the text column. Stack rows to single column on mobile with the image first, and set the result metric in a bold accent text style.
live preview
Content & CMSAdvanced~450 credits
Recipe Cards With Schema
Build recipe records and inject structured data markup
Create a Recipes collection with title, image, prepTime, cookTime, servings, ingredients, and steps fields, seed three recipes, and build a detail template binding each field with a clear ingredient list and numbered steps. Add a code override that injects Recipe JSON-LD structured data into the page head from the bound fields so search engines can parse it. Style times as small meta pills, set steps in a readable body text style with generous line height, and ensure the layout reflows to a single readable column on mobile.
$ npx @framer/agent
✓ connected to canvas
generate a pricing table
generating nodes
live preview
Content & CMSAdvancedFree - setup
Connect Sheets To CMS
Sync a Google Sheet into a collection via MCP automation
Using the MCP connection and CLI, set up a sync that pulls rows from a Google Sheet into a CMS collection, mapping each column to a field and using a stable key column to upsert so re-runs update existing records instead of duplicating. Establish the field mapping, run an initial import, and report how many records were created versus updated. Handle empty rows gracefully, trim whitespace from values, and outline how to re-run the sync on demand when the sheet changes.