Skip to main content
Page templates allow you to add professionally designed individual pages to your stories without choosing an entire template. They’re based on the same designs as full story templates but applied one page at a time.

​
Overview

Page templates provide:
  • Individual page designs from full templates
  • Quick page creation with professional layouts
  • Filtered by page type (Cover, Section, Quote, etc.)
  • Animations included from the original template
Reference: docs/page-templates.md:1-3

​
Page Templates vs Story Templates

Individual pages applied to existing stories
  • Single page at a time
  • Replace current page content
  • Images converted to placeholders
  • Can be mixed and matched
  • Applied via Page Templates pane
Reference: docs/page-templates.md:5-7

​
Accessing Page Templates

​
Page Templates Pane

Open from the library sidebar: 
// Pane ID
PANE_IDS.PageTemplates
Reference: packages/story-editor/src/components/library/paneIds.ts:23

​
Page Template Pane Structure

import { PageTemplatesPane } from './panes/pageTemplates';

<PageTemplatesPane />
Reference: packages/story-editor/src/components/library/panes/pageTemplates/

​
Page Template Types

Page templates are categorized by type for easy filtering: 
export const PAGE_TEMPLATE_TYPES = {
  cover: { name: 'Cover' },
  section: { name: 'Section' },
  quote: { name: 'Quote' },
  editorial: { name: 'Editorial' },
  list: { name: 'List' },
  table: { name: 'Table' },
  steps: { name: 'Steps' },
};
Reference: packages/story-editor/src/components/library/panes/pageTemplates/constants.js:22-30

​
Page Type Descriptions

Cover

Opening pages with prominent titles and hero images. Ideal for story beginnings.

Section

Section dividers that introduce new topics or segments within the story.

Quote

Emphasized quote or testimonial pages with decorative typography.

Editorial

Content-focused layouts with text and supporting images.

List

Organized list presentations with icons or numbers.

Table

Data presentation in tabular format.

Steps

Sequential step-by-step instructions or processes.

​
Filtering Page Templates

Filter templates by type:
1

Open Page Templates pane

Click the Page Templates tab in the library sidebar.
2

Select filter

Choose a page type from the filter dropdown (Cover, Section, Quote, etc.).
3

Browse filtered results

Scroll through templates matching the selected type.
4

Preview template

Hover over a template to see it animate.

​
Applying Page Templates

Replace a page with a template:
1

Navigate to target page

Select the page you want to replace in your story.
2

Choose page template

Click a page template from the Page Templates pane.
3

Confirm replacement (if needed)

If the page has existing changes, confirm that you want to overwrite them.
4

Template applied

The page is replaced with the template, including all elements and animations.
Reference: docs/page-templates.md:29-33
Applying a page template replaces the entire page’s contents. Make sure to save or duplicate important pages before applying templates.

​
Page Template Naming

Page templates are named using a combination of:
  • Original template name - The full story template they came from
  • Page template type - The categorization (Cover, Section, etc.)
Example: “Cooking Cover” comes from the “Cooking” template’s cover page. Reference: docs/page-templates.md:15

​
Image Placeholders

Unlike full templates, page templates replace images:

​
Grid Placeholders

“All template images are converted to grid placeholders… a single placeholder grid image is scaled to look consistent across many image sizes.”
Reference: docs/page-templates.md:17-19

​
Preserving Images as Shapes

To keep images in page templates:
“Shapes will not be replaced with placeholder grids when rendered as page templates and applied to pages.”
Convert essential images to shapes in the template source to preserve them. Reference: docs/page-templates.md:21-22
This design encourages users to add their own images, ensuring page templates are truly customized.

​
Page Template Previews

Preview page templates before applying:

​
Preview Features

  • Animations included - See entrance effects play
  • Same preview mechanism - Uses the same rendering as dashboard template browsing
  • Interactive preview - Hover to trigger animation playback
Reference: docs/page-templates.md:25-27

​
RTL Support

Previews render consistently regardless of site language: 
<StyleSheetManager stylisPlugins={[]}>
  {/* Bypass RTL for consistent preview */}
  <PageTemplatePreview />
</StyleSheetManager>
This ensures templates look the same as they will when published. Reference: docs/page-templates.md:37-40

​
Creating Page Template Types

Define page types in template JSON:

​
Setting Page Template Type

{
  "pages": [
    {
      "id": "page-1",
      "pageTemplateType": "cover",
      "elements": [
        // Page elements
      ]
    },
    {
      "id": "page-2",
      "pageTemplateType": "editorial",
      "elements": []
    },
    {
      "id": "page-3",
      "pageTemplateType": null,  // Omitted from page templates
      "elements": []
    }
  ]
}
Reference: docs/page-templates.md:9-13

​
Omitting Pages

Set pageTemplateType to null to exclude a page from the page templates pane:
“If pageTemplateType is set to null, the page will be omitted from the page templates pane.”
Reference: docs/page-templates.md:13

​
Page Template Architecture

​
Source Files

Page templates are built from template JSON files:
  • Located in packages/templates/src/raw/
  • Each template folder contains template.json
  • Pages with pageTemplateType become available as page templates

​
No Standalone Page Templates

“There are currently no mechanisms for creating page templates that are not a part of templates.”
All page templates must be part of a full story template. Reference: docs/page-templates.md:44-46

​
Animations in Page Templates

Page templates copy animations from the original template:

​
Animation Behavior

  • All animations copied - Entrance effects, timing, and direction preserved
  • Animation previews - Play in the preview before applying
  • Editable after application - Can be modified or removed after applying template
Reference: docs/page-templates.md:25-28

​
Modifying Applied Animations

After applying a page template:
  1. Select an animated element
  2. Open the Animation panel
  3. Modify or remove the animation
  4. Changes are independent of the template

​
Customizing Applied Templates

After applying a page template:

​
Replace Placeholder Images

  1. Select a placeholder grid image
  2. Open the Media pane
  3. Upload or select your image
  4. Image replaces placeholder

​
Edit Text Content

  • Double-click text elements to edit
  • Replace placeholder text with your content
  • Font styles and formatting are preserved

​
Adjust Colors

  • Select elements to modify colors
  • Use the Design panel color controls
  • Apply your brand colors while keeping layout

​
Modify Layout

  • Move elements to adjust composition
  • Resize elements as needed
  • Add or remove elements freely

​
Technical Considerations

​
Template Page Equality

“Page Templates are Template Pages. In order to make templates and page templates easier to maintain, page templates are built off of standard templates.”
Reference: docs/page-templates.md:42-43

​
Consistent Rendering

Page templates use the same rendering pipeline as full templates to ensure visual consistency.

​
Best Practices

1

Choose appropriate type

Select page templates that match the content purpose (use “Cover” for opening pages, “Editorial” for content, etc.).
2

Maintain consistency

Use page templates from the same story template for visual cohesion.
3

Customize thoroughly

Replace all placeholder images and text with your own content.
4

Test animations

Preview the page to ensure animations work well with your content.
5

Check accessibility

Verify color contrast and readability after customization.
Mix page templates from different story templates to create unique combinations, but ensure visual consistency through color and font choices.

​
Use Cases

​
Expanding Existing Stories

Add new pages to stories you’ve already started:
  • Insert a “Section” page to introduce a new topic
  • Add a “Quote” page to emphasize testimonials
  • Use a “Steps” page for how-to content

​
Quick Story Creation

Build stories faster by combining page templates:
  1. Start with a blank story
  2. Apply a “Cover” page template
  3. Add “Editorial” pages for content
  4. Insert “Quote” pages for emphasis
  5. Customize all content and images

​
Maintaining Brand Consistency

Create custom templates with your branding, then use page templates to ensure consistency across multiple stories.

​
Limitations

  • Page template application replaces entire page content
  • All images become placeholders (except shapes)
  • Cannot currently create standalone page templates
  • Must come from full story templates

​
Future Considerations

From the source documentation:
“There has been consideration to make it so that some images can be passed through in Issue #6032.”
This would allow certain images to persist in page templates rather than converting to placeholders. Reference: docs/page-templates.md:23-24

​
Next Steps

Templates

Learn about full story templates

Creating Stories

Create and manage story pages

Media Library

Replace placeholder images with your media

Animations

Modify template animations

Build docs developers (and LLMs) love

Get started for freeTalk to us