Skip to main content
The Web Stories editor is a powerful, canvas-based interface for creating visually engaging stories. Built with React and styled-components, it provides an intuitive environment for designing multi-page stories with rich media, animations, and interactions.

​
Editor Architecture

The story editor is built around several core packages:
  • packages/story-editor/ - Main editor interface and components
  • packages/canvas/ - Canvas rendering and element manipulation
  • packages/animation/ - Animation system and effects
  • packages/design-system/ - Shared UI components
  • packages/elements/ - Story element types (text, images, video, shapes)

​
Main Interface Components

​
Canvas Area

The canvas is the central workspace where you design your story pages. It uses a layered architecture:
  • Display Layer (displayLayer.js) - Shows non-interactive preview of elements with animations
  • Edit Layer (editLayer.js) - Handles element selection and manipulation
  • Frames Layer (framesLayer.js) - Displays element boundaries and controls
Reference: packages/story-editor/src/components/canvas/

​
Library Panel

The left sidebar provides access to:
  • Media (PANE_IDS.Media) - Upload and manage images/videos
  • Text (PANE_IDS.Text) - Text presets and styles
  • Shapes (PANE_IDS.Shapes) - Geometric shapes and stickers
  • Page Templates (PANE_IDS.PageTemplates) - Pre-designed page layouts
Reference: packages/story-editor/src/components/library/paneIds.ts

​
Design Panel

The right sidebar contains contextual design controls:
  • Text Style - Font, size, color, and formatting
  • Animation - Add movement and effects
  • Size & Position - Precise element placement
  • Page Background - Background colors, images, and audio
Reference: packages/story-editor/src/components/panels/design/

​
Provider Architecture

The editor uses React Context providers for state management: 
<StoryProvider>
  <FontProvider>
    <MediaProvider>
      <HistoryProvider size={50}>
        <TransformProvider>
          {/* Editor components */}
        </TransformProvider>
      </HistoryProvider>
    </MediaProvider>
  </FontProvider>
</StoryProvider>
Reference: packages/story-editor/src/storyEditor.js:70-115

​
Key Features

1

Canvas-based editing

Direct manipulation of elements with drag-and-drop, resize, and rotate controls powered by the @googleforcreators/moveable package.
2

Multi-page stories

Create sequential pages with smooth transitions. Navigate between pages using the page navigation controls.
3

Rich media support

Upload images, videos, and audio directly through the WordPress media library integration.
4

Animation system

Apply professional animations with real-time preview. Animations work in both the editor (WAAPI) and output (AMP).
5

Auto-save

Automatic saving with both server (AutoSaveHandler) and local storage (LocalAutoSaveHandler) support.

​
Layout Grid System

The editor uses CSS Grid for precise layout positioning: 
grid:
  'h h h h h h h' ${HEADER_HEIGHT}px
  '. . . t . . .' minmax(${HEADER_GAP}px, 1fr)
  'p b . c . f n' var(--viewport-height-px)
  '. . . . . . .' 1fr
  'w w w w w w w' ${footerHeight}px
Where:
  • h = header
  • c = canvas page
  • p = previous page nav
  • n = next page nav
  • w = workspace footer
Reference: packages/story-editor/src/components/canvas/layout.js:82-96

​
Design System Integration

The editor extensively uses components from @googleforcreators/design-system:
  • Button, Input, Dropdown - Form controls
  • Tooltip, Modal, Dialog - Overlays
  • SnackbarProvider - Notifications
  • PopupProvider - Contextual popups
The editor supports RTL (right-to-left) languages through the stylisRTLPlugin for styled-components.

​
Next Steps

Creating Stories

Learn how to create your first story and add pages

Working with Media

Upload and manage images, videos, and audio

Adding Animations

Bring your stories to life with animations

Text & Styling

Format text and apply styles

Build docs developers (and LLMs) love

Get started for freeTalk to us