Storyflow's whiteboard is an infinite canvas where you can visually organize your thoughts, ideas, and content. The canvas is powered by React Flow, giving you smooth zooming, panning, and element manipulation.

Understanding the Canvas

The whiteboard canvas is infinite—you can zoom in, zoom out, and pan in any direction. This gives you unlimited space to organize your ideas without constraints.

Navigation Controls

• Pan: Click and drag on empty space, or use two fingers on trackpad
• Zoom: Scroll to zoom, use pinch gestures, or use the zoom controls in the bottom-right corner
• Fit to view: Press Cmd/Ctrl + 0 to fit all content on screen
• Zoom In/Out: Use the +/- buttons in the zoom controls panel

The Toolbar

The toolbar is located on the left side of the canvas. It contains all the tools you need to add elements. Each tool has a keyboard shortcut for quick access:

• Note (N): Add sticky notes for quick ideas
• Heading (H): Add text headings to organize sections
• To-Do (T): Create task checklists
• Wall (W): Add container walls to group elements
• Link (L): Add web links with previews
• Video (V): Embed videos from YouTube and other sources
• Audio (U): Add audio players to your canvas
• AI Image (G): Generate images using AI
• Line (I): Draw connecting lines between elements
• Comments (C): Add comment threads
• Blueprint (B): Add a blueprint card
• Color (O): Add color swatches
• Whiteboard (F): Create nested whiteboards
• Kanban (K): Add kanban boards

Adding Elements

There are three ways to add elements to your whiteboard:

1. Toolbar: Click a tool in the left toolbar, then click or drag onto the canvas
2. Keyboard shortcut: Press the shortcut key (e.g., N for note) to instantly add an element
3. Right-click menu: Right-click anywhere on the canvas to see creation options

Selecting and Editing Elements

Click on any element to select it. Selected elements display resize handles and options:

• Move: Drag the element to reposition it
• Resize: Drag the corner handles to resize
• Delete: Press Backspace to delete selected elements
• Right-click: Access additional options like duplicate, lock, and more
• Select All: Press Cmd/Ctrl + A to select all elements

Using AI on the Canvas

Select one or more elements on the canvas, then use the AI chatbox overlay to ask StoryflowAI to help you. You can generate content, create mind maps, or transform your selected elements based on your prompts.