Multi-page Designs

Create multi-page designs such as presentations, social media carousels, or multi-page documents. Each page maintains its own canvas state with independent objects, and thumbnails are auto-generated for navigation.

PageManager API

Access the PageManager through engine.getPageManager(). It handles page creation, switching, deletion, and serialization.

// Get the PageManager instance
const pm = engine.getPageManager();

// Add a new blank page
await pm.addPage();

// Switch to page 2 (zero-indexed)
await pm.switchToPage(1);

// Delete the first page
await pm.deletePage(0);

// Duplicate page at index 0
pm.duplicatePage(0);

// Save current canvas state to the active page
pm.saveCurrentPage();

// Get total number of pages
const count = pm.getPageCount();
// Returns: number

PageManager Methods

Name	Type	Default	Description
`addPage()`	`Promise<void>`	—	Add a new blank page at the end
`switchToPage(index)`	`Promise<void>`	—	Save current page and switch to the page at the given index
`deletePage(index)`	`Promise<void>`	—	Delete the page at the given index
`duplicatePage(index)`	`void`	—	Create a copy of the page at the given index
`saveCurrentPage()`	`void`	—	Serialize the current canvas state to the active page slot
`getPageCount()`	`number`	—	Get the total number of pages
`getCurrentPageIndex()`	`number`	—	Get the zero-based index of the active page
`getAllPages()`	`PageData[]`	—	Get serialized data for all pages
`loadPages(data)`	`Promise<void>`	—	Load pages from previously saved data
`reorderPages(from, to)`	`void`	—	Move a page from one index to another

How Pages Work

Each page stores a serialized snapshot of the Fabric.js canvas as JSON. When switching pages, the current canvas state is saved to the active page slot, the canvas is cleared, and the target page JSON is loaded onto the canvas.

⚠️

Undo history

The undo/redo history is cleared when switching between pages. Each page does not maintain its own separate undo stack. Plan your edits accordingly.

Page Data

// Get all page data (for save/load)
const pages = pm.getAllPages();
// Returns: Array<{ id: string, data: string, thumbnail: string }>

// Load pages from saved data
await pm.loadPages(savedPages);

// Get current page index
const currentIndex = pm.getCurrentPageIndex();

// Reorder pages
pm.reorderPages(fromIndex, toIndex);

Thumbnails

Thumbnails are automatically generated when saving or switching pages. They are stored as base64 data URLs at a reduced resolution for performance.

Thumbnails update automatically on page save/switch
Resolution: 200px wide, proportional height
Format: JPEG with 0.7 quality for compact storage

Complete Example

// Multi-page design workflow
async function createMultiPageDesign(engine) {
  const pm = engine.getPageManager();

  // Page 1: Cover slide
  engine.addShape('rect', {
    left: 0, top: 0,
    width: 1080, height: 1080,
    fill: '#4f46e5',
  });
  engine.addText('Welcome', {
    left: 200, top: 400,
    fontSize: 72, fontWeight: 'bold',
    fill: '#ffffff',
  });
  pm.saveCurrentPage();

  // Page 2: Content slide
  await pm.addPage();
  engine.addText('Key Features', {
    left: 100, top: 100,
    fontSize: 48, fontWeight: 'bold',
    fill: '#1a1a1a',
  });
  engine.addText('Feature 1: Fast and lightweight', {
    left: 100, top: 200,
    fontSize: 24, fill: '#666666',
  });
  pm.saveCurrentPage();

  // Page 3: Duplicate page 1 as closing slide
  pm.duplicatePage(0);

  // Switch back to page 1
  await pm.switchToPage(0);
}

UI: Page Panel

The Page Panel appears as a horizontal strip below the canvas area. It provides:

Page tabs — thumbnail previews of each page, click to switch
Add button (+) — add a new blank page at the end
Context menu — right-click a page tab for Duplicate, Delete, and Move options
Drag to reorder — drag page tabs to rearrange page order

💡

Quick duplicate

Right-click any page thumbnail and select "Duplicate" to quickly create a copy. This is useful for creating variations of a slide.