Your CMS,
as a magazine.
Documentation · Version 1.0.1
How to feed it from a Gallery field or a Collection List, chapters and contents, the page turn, full screen, every setting in the panel, and five looks to start from.
01
Start here.
Add it to your project. Open the link in your purchase email (or the Marketplace page) and drop CMS Page Flip on a page. It arrives with a demo lookbook so you can see it work.
Feed it pages. On a CMS page, connect a Gallery field to Pages. Or set Source to CMS and put a Page Item in the item of a Collection List. The next sections show both.
Shape the book. Cover, contents, chapter openers and back cover, the page shape, photos with margin or full bleed, your fonts and colours.
Preview. Drag a page, tap it, or use the arrows and the keyboard. On a phone it shows one page at a time.
02
How it works.
The component turns a list of photos into a magazine. On wide screens it shows two pages side by side; narrower than One page below, it shows one. A page follows the finger or the mouse as it turns, and the paper bends and shades as it goes.
The first page, with a label, a two-line title and an image (your own, or the first photo).
A page listing the chapters, each a link to its page.
A page with the number, title and intro before each chapter.
The photo, with a caption and the page number.
The last page, so the book closes on it.
Every part can be turned off. The component makes no network requests of its own; only your images load, and only the pages near the open spread carry their content.
Autumn
2026
Contents
Live component with the demo lookbook. Drag a page, tap it or use the arrows.
03
Pages from a Gallery field.
Use this for one book per CMS item: a project’s lookbook, a property’s brochure, a menu.
Open the CMS page of your collection (for example /projects/:slug).
Drop CMS Page Flip on it and leave Source on Gallery.
Connect Pages to your Gallery field and map its image to Image. If your gallery has a caption sub-field, map it to Caption.
Write the cover in the panel, or connect Cover title to the item’s title field.
Each photo becomes a page, in the gallery’s order. A gallery has no chapters, so the contents page and the openers don’t show.
04
Pages from a Collection List, step by step.
Use this for one book made of many CMS items: a collection as a catalogue, a season as a lookbook.
Add a Collection List of your collection anywhere on the same page.
Put a Page Item inside its item and connect its fields: Image, Title, Caption (a place, a year, a price), Chapter (a category; for an Option field, pick Display option), Chapter intro and Link.
Select the book, set Source to CMS and use the same Kit name as the Page Items (“book” by default on both).
Preview. Every item becomes a page.
On the published site, Page Items show nothing and take no space. Set the Collection List’s gap and padding to 0. In the canvas, each Page Item shows a small dashed label like “Page Item · Red Hour · Fashion”.
Good to know:
Group by chapter keeps each chapter’s pages together, in the order the chapters first appear, however the list is sorted. Turn it off to keep the list’s order exactly.
The Chapter intro of the first page in a chapter shows on its opener.
A page with a Link opens it on a tap; dragging it still turns the page.
Leave the Collection List’s limit high enough to include every page.
05
Turning pages.
A page from anywhere on it. Past halfway, or with a quick flick, it turns; otherwise it falls back.
A page to turn it, unless it carries a link.
Under the book, and the keyboard: left and right arrows, Page Up and Page Down, Home for the cover and End for the back cover.
Lines jump straight to their chapter.
The page curves as it turns. Off, it turns flat.
On a computer, the page edge lifts as the mouse comes near its outer corner.
The block of pages on each side, thicker the more pages lie there.
How long a page takes, in seconds.
A button next to the arrows shows the book as large as the screen allows.
The address follows the page (#p-7), so a link can open the book at that page.
06
Customize the look.
Page
Page sets the shape: 3:4, 4:5 or A4. Photos shows them with a white margin and a caption underneath, or full bleed with the caption over the photo. Turn Captions and Page numbers on or off.
Colours
Paper, Ink, Muted, Accent (the second line of the cover, the chapter numbers), Cover and Cover text, Photo fill (behind photos while they load) and Buttons. Pick your site’s colour styles so the book follows your palette.
Type
Title font for the cover, contents and openers, with Uppercase for condensed display fonts like Anton. Text font for captions, intros and the counter. The book scales its type with its size, so it reads the same on a phone and in full screen.
Recipes
Page 3:4 · Photos With margin · Cover on · Contents on · Openers on · Title font Anton, Uppercase
Source CMS · Chapter = course · Page A4 · Photos With margin · Cover title “Menu”
Source Gallery on the property page · Page A4 · Contents off · Back text with the agent’s contact
Contents off · Openers off · Captions off · Photos Full bleed · Page 4:5
One page below 9999 · Max width 420 · Cover dark
07
Settings reference.
In the order they appear in the property panel. Settings that don’t apply are hidden.
Content
Gallery (connect a Gallery field to Pages), CMS (Page Items with the same Kit name) or Manual.
CMS: the name shared with the Page Items.
Gallery and Manual: Image, Title, Caption, Chapter, Chapter intro and Link. Up to 120.
Structure
Cover, Cover label, Cover title, Second line, Cover image.
Contents, Contents title.
Openers, Group by chapter.
Back cover, Back title, Back second line, Back text.
Layout
3:4, 4:5 or A4.
Of the open book.
Narrower than this, one page at a time.
With margin or Full bleed. Captions, Page numbers.
Motion
Paper bend, Corner lift, Page edges, Turn.
Start at — spreads already turned when the page opens.
Page in address.
Controls
Controls, Full screen.
Look
Paper, Ink, Muted, Accent, Cover, Cover text, Photo fill, Buttons.
Title font, Uppercase, Text font.
Labels
Book name — what screen readers call the book.
Previous label, Next label, Full screen label.
Page word, Pages word, Of word — screen readers hear “Pages 4–5 of 20”.
When empty.
All of them are translated by Framer Localization.
Page Item
Kit name, Image, Title, Caption, Chapter, Chapter intro, Link.
08
Performance
No network requests of its own, no scripts from other sites, no tracking.
Only the pages near the open spread carry their content; the rest are plain paper until you come close.
Images load from Framer’s own srcSet, at the size the page needs.
The page turn is CSS 3D, posed straight from the animation frame, without re-rendering the book on every frame.
On the canvas and in Framer’s static previews, the book shows as flat pages at Start at, without the turning machinery.
09
Accessibility
The book is a labelled region with the “book” role description, and it takes keyboard focus.
Screen readers hear the open pages after every turn (“Pages 4–5 of 20”).
The arrows and the full screen button are real buttons with labels you can translate; the contents lines are buttons too.
Photos keep their alt text from the CMS or the panel, and a page with a link is named after its title and caption.
Visitors who prefer reduced motion get pages that change at once, without the bend.
10
Troubleshooting
Source is on Gallery or Manual with no pages of your own, or on CMS with no Page Items. Connect Pages, or add Page Items with the same Kit name.
No Page Item uses the book’s Kit name, or the Page Items have no image and no title.
Your pages have no chapters. Connect Chapter on the Page Items.
Group by chapter is off and the list isn’t sorted by chapter. Turn it on, or sort the list.
The Option field was connected without Display option.
It carries a link: the tap opens it. Drag it to turn.
Set its gap and padding to 0.
11
Updates
New versions are free and listed here. To update, insert the book again from the Marketplace page or from the link in your order, which always points to the latest version, and copy your settings across. The Page Items you already connected keep working: newer books read them.
— On the canvas and in static previews the book shows as flat pages, without the turning machinery. Linked pages carry a name for screen readers (title and caption). The stylesheet is built once, so the book does less work as it resizes. On phones, a swipe to the right brings the previous page back.
— First release: pages from a Gallery field, a Collection List or the panel, cover, contents, chapter openers and back cover, group by chapter, paper that bends as it turns, corner lift and page edges, spread and single page, drag, tap, arrows and keys, full screen, page in the address, and full documentation.
12
Support and licence.
Questions or a bug? Write to info@miguelrecio.es. A person replies within two business days (Mon–Fri, CET).
One licence covers one website or project, the same Single-Use licence as Framer’s Marketplace. For several sites, buy one licence per site. Reselling or redistributing the component isn’t allowed.
The demo photos are samples. Replace them with your own before you publish.
Questions? Get in touch.
Email info@miguelrecio.es with your question and a link to your project.