Skip to main content
Web Stories templates provide professionally designed multi-page stories that you can customize with your own content. Templates are defined in JSON format and include layouts, styling, animations, and placeholder content.

​
Template System Overview

Templates are stored in packages/templates/src/raw/ with each template containing:
  • Pages - Complete page designs with elements
  • Metadata - Title, description, tags, colors
  • Animations - Pre-configured animations
  • Assets - Images, fonts, and media
Reference: packages/templates/src/raw/

​
Available Templates

Templates cover various categories:
  • Travel - “12 Hours in Barcelona”, “Ace Hotel Kyoto Review”
  • Food - “Baking Bread Guide”, cooking tutorials
  • Entertainment - “Album Releases”, “Almodos Films”
  • Lifestyle - “A Day in the Life”, “Art Books Gift Guide”
  • Automotive - “All About Cars”
Template names and availability are based on the raw template files in the source code.

​
Using Templates

​
Browsing Templates

Templates can be browsed from the WordPress dashboard before creating a story. The template browser shows:
  • Template preview thumbnails
  • Template metadata (title, description)
  • Page count and category

​
Creating from Template

When you select a template:
1

Choose template

Browse available templates and select one that fits your needs.
2

Story initialized

A new story is created with all template pages, elements, and animations copied.
3

Customize content

Replace placeholder text and images with your own content.
4

Adjust styling

Modify colors, fonts, and layouts to match your brand.

​
Template Structure

​
Template Metadata

Templates include metadata for organization and display: 
interface TemplateMetadata {
  title: string;
  description: string;
  tags: string[];
  colors: Color[];
  createdBy: string;
  version: number;
}
Reference: packages/templates/src/types.ts

​
Template Pages

Each page in a template contains:
  • Elements - Text, images, shapes, videos
  • Background - Solid colors, gradients, or images
  • Animations - Element entrance effects
  • Page Template Type - For page template filtering (optional)

​
Page Template Types

Pages can be categorized for use in page templates: 
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

​
Template Loading

Templates are loaded through the getTemplates function: 
import { getTemplates } from '@googleforcreators/templates';

const templates = getTemplates();
Reference: packages/templates/src/getTemplates.ts

​
Customizing Templates

​
Replace Images

  1. Select an image element
  2. Open the Media pane
  3. Click a new image to replace it
The new image maintains the same size and position.

​
Edit Text

Double-click any text element to enter edit mode:
  • Change text content
  • Adjust font, size, and color
  • Modify alignment and spacing
Reference: packages/story-editor/src/components/canvas/editElement.js

​
Modify Colors

Templates include color palettes that can be modified:
  1. Select an element
  2. Open the Design panel
  3. Choose from preset colors or use the color picker
  4. Colors update across similar elements

​
Adjust Animations

Template animations can be modified or removed:
  • Select an animated element
  • Open the Animation panel
  • Choose a different effect or adjust timing
  • Remove animation by selecting “None”

​
Template Previews

​
Preview System

Templates render previews using the same mechanism as the editor: 
<StyleSheetManager stylisPlugins={[]}>
  {/* Bypass RTL for consistent preview */}
  <TemplatePreview />
</StyleSheetManager>
Reference: docs/page-templates.md:37-40

​
Animation Previews

Template previews include animations to show the full experience:
  • Entrance animations play on preview
  • Timing matches final output
  • Both WAAPI and AMP animations are generated
Preview templates before selecting to see animations and interactions in action.

​
Creating Custom Templates

Templates are defined in JSON format: 
{
  "version": 2,
  "title": "My Custom Template",
  "tags": ["custom", "branded"],
  "colors": [
    {"label": "Primary", "color": {"r": 255, "g": 0, "b": 0}}
  ],
  "pages": [
    {
      "id": "page-1",
      "backgroundColor": {"color": {"r": 255, "g": 255, "b": 255}},
      "pageTemplateType": "cover",
      "elements": [
        // Element definitions
      ]
    }
  ]
}

​
External Template Creation

For creating templates outside the core plugin, see the external template creation guide. Reference: docs/external-template-creation.md

​
Template Constants

Template configuration constants: 
// packages/templates/src/constants.ts
export const DEFAULT_TEMPLATE_VERSION = 2;
export const TEMPLATE_IMAGE_PLACEHOLDER = 'template-placeholder';
Reference: packages/templates/src/constants.ts

​
Template vs Page Template

Complete multi-page story
  • Contains all pages and elements
  • Used to start a new story
  • Includes all images and assets
  • Creates a complete story structure

​
Best Practices

1

Choose the right template

Select a template that matches your story’s purpose and audience.
2

Maintain visual consistency

Keep the template’s design language while customizing content.
3

Optimize images

Replace template images with optimized versions for best performance.
4

Test animations

Preview your story to ensure animations work well with your content.
5

Check accessibility

Verify color contrast and text readability after customization.
Avoid making extreme layout changes that might break responsive behavior or accessibility features built into templates.

​
Next Steps

Page Templates

Use individual page designs in your stories

Media Library

Replace template images with your own

Animations

Customize template animations

Text & Styling

Modify fonts and colors

Build docs developers (and LLMs) love

Get started for freeTalk to us