Skip to main content
The Web Stories editor provides a canvas-based interface for creating multi-page visual stories. This guide covers the fundamentals of story creation and page management.

​
Creating a New Story

Stories are created through the WordPress admin dashboard. The editor initializes with: 
<StoryProvider storyId={storyId} initialEdits={initialEdits}>
  {/* Editor components */}
</StoryProvider>
Reference: packages/story-editor/src/storyEditor.js:80-83

​
Canvas Workspace

The canvas is your primary workspace for designing story pages. It maintains a fixed aspect ratio defined by FULLBLEED_RATIO from @googleforcreators/units.

​
Canvas Layers

The canvas uses multiple layers for different purposes:
Purpose: Non-interactive preview with animationsThe display layer shows how your story will appear to viewers, including:
  • Animated elements using <StoryAnimation.WAAPIWrapper />
  • Full visual rendering
  • Element stacking order
<StoryAnimation.WAAPIWrapper target={animationTarget}>
  {/* Element content */}
</StoryAnimation.WAAPIWrapper>
Reference: packages/story-editor/src/components/canvas/displayElement.js

​
Adding Pages

​
Using the Page Navigation

Pages can be added through:
  1. Page Menu - Located in the canvas footer
  2. Extra Pages Area - Click the ”+” button to add new pages
  3. Keyboard Shortcuts - Use shortcuts to quickly add pages
Reference: packages/story-editor/src/components/canvas/extraPages.js

​
Page Management

The story state manages all pages: 
const { currentPage, pages } = useStory(({ state }) => ({
  currentPage: state.currentPage,
  pages: state.pages
}));
Reference: packages/story-editor/src/app/story/

​
Adding Elements to Pages

​
Insert Element Hook

The useInsertElement hook handles adding elements to the canvas: 
const insertElement = useInsertElement();

// Insert an element
insertElement(elementType, elementProps);
Reference: packages/story-editor/src/components/canvas/useInsertElement.ts

​
Element Types

Supported element types:
  • Text - Rich text with formatting
  • Image - Static images
  • Video - Video elements with playback controls
  • Shape - Geometric shapes and masks
  • Sticker - Decorative elements
Reference: packages/elements/

​
Working with the Canvas

​
Element Selection

Select elements by clicking them on the canvas. The selection system is managed by: 
const { selectedElements } = useStory(({ state }) => ({
  selectedElements: state.selectedElements
}));
Reference: packages/story-editor/src/components/canvas/selection.js

​
Multi-Selection

Select multiple elements:
1

Click first element

Click to select the first element on the canvas.
2

Hold modifier key

Hold Cmd (Mac) or Ctrl (Windows) while clicking additional elements.
3

Manipulate together

Selected elements can be moved, resized, or styled together.
Reference: packages/story-editor/src/components/canvas/multiSelectionMoveable/

​
Element Manipulation

The editor uses the Moveable library for element transformation:
  • Drag - Click and drag to move elements
  • Resize - Drag corner or edge handles
  • Rotate - Use rotation handle
  • Precise positioning - Use Size & Position panel for exact values
Reference: packages/story-editor/src/components/canvas/frameElement.js

​
Canvas Upload Support

​
Drag and Drop

Drop media files directly onto the canvas: 
<CanvasElementDropzone>
  {/* Canvas content */}
</CanvasElementDropzone>
Reference: packages/story-editor/src/components/canvas/canvasElementDropzone.js

​
Upload with Preview

The useUploadWithPreview hook handles file uploads with immediate visual feedback: 
const { uploadWithPreview } = useUploadWithPreview();
Reference: packages/story-editor/src/components/canvas/useUploadWithPreview.js

​
Page Actions

​
Right-Click Menu

Access page and element actions via right-click:
  • Duplicate page
  • Delete page
  • Copy elements
  • Paste elements
  • Arrange elements (bring to front, send to back)
Reference: packages/story-editor/src/components/canvas/rightClickMenu.js

​
Page Side Menu

Additional page controls in the side menu: 
<PageSideMenu />
Reference: packages/story-editor/src/components/canvas/pageSideMenu.js

​
Canvas Viewport

The canvas automatically adjusts to fit your screen: 
const { pageWidth, pageHeight } = useLayout(({ state }) => ({
  pageWidth: state.pageWidth,
  pageHeight: state.pageHeight
}));

​
Pinch to Zoom

On touch devices, use pinch gestures to zoom: 
usePinchToZoom(canvasRef);
Reference: packages/story-editor/src/components/canvas/usePinchToZoom.js
The canvas maintains a fixed aspect ratio based on the Web Stories standard dimensions (9:16 portrait format).

​
Auto-Save

Changes are automatically saved through two mechanisms:
Saves to WordPress database at regular intervals:
<AutoSaveHandler />
Reference: packages/story-editor/src/components/autoSaveHandler/

​
History and Undo

The editor maintains an undo/redo history: 
<HistoryProvider size={50}>
  {/* Editor */}
</HistoryProvider>
  • Undo: Cmd/Ctrl + Z
  • Redo: Cmd/Ctrl + Shift + Z
Reference: packages/story-editor/src/app/history/
Use keyboard shortcuts extensively to speed up your workflow. Access the shortcuts menu from the editor header.

​
Next Steps

Using Templates

Start with pre-built story templates

Page Templates

Apply individual page designs

Media Library

Add images and videos to your story

Animations

Add animations to elements

Build docs developers (and LLMs) love

Get started for freeTalk to us