Skip to main content

Story Notes (Canvas Notes)

Overview​

Story Notes are sticky note-style annotations that you can place directly on the story canvas. Unlike the Notebook (which is for longer documentation), Story Notes are quick visual reminders positioned near specific scenes or elements.

Note Appearance​

Visual Design​

Each Story Note is:

  • Size: 250 × 250 pixels square
  • Color: Yellow/action color background
  • Style: Rounded corners with subtle shadow
  • Border: Matches the background color

Note Content Display​

Structure:

  1. Close button (top-right): X icon, appears on hover
  2. Content area (main): Simple text area for your note
  3. Author name (bottom): Who created the note

Example appearance:

┌─────────────────────────┐
│                      [X]│
│  Remember to add        │
│  audio here before      │
│  final review           │
│                         │
│         Juan Cuadra     │
└─────────────────────────┘

Creating Story Notes​

Story Notes are created through the canvas interface:

  1. Access the note creation tool (canvas toolbar or context menu)
  2. Place the note on the canvas
  3. Start typing immediately
  4. Click away to save

Note: The exact creation method depends on the canvas UI implementation.

Note Visibility​

Show/Hide Notes​

Story Notes can be toggled on and off:

  • Visible: Notes appear on the canvas at full opacity
  • Hidden: Notes are completely hidden (opacity 0, not interactive)

Toggle behavior:

  • All notes show/hide together (global toggle)
  • Hidden notes don't take up space or block clicks
  • Visibility setting persists during your session
  • Useful for decluttering the canvas when focusing on structure

When to Hide Notes​

Hide notes when:

  • Presenting to stakeholders
  • Focusing on story flow without distractions
  • Taking screenshots of story structure
  • Canvas feels cluttered

Show notes when:

  • Working on specific improvements
  • Following up on reminders
  • Collaborating with team members
  • Reviewing documented decisions

Editing Notes​

Who Can Edit​

Permission rules:

  • You can only edit your own notes
  • You cannot edit notes created by other users
  • Other users' notes are pointer-events-none (non-interactive)
  • Your notes are pointer-events-auto (fully interactive)

Visual indication:

  • Your notes: Fully interactive, show close button on hover
  • Others' notes: Dimmed, cannot click, cannot edit

How to Edit​

  1. Click inside the note content area
  2. Text area activates for editing
  3. Type or modify the content
  4. Click away from the note
  5. Content saves automatically (on blur)

Text area features:

  • Plain text only (no rich text formatting)
  • Multi-line support
  • Placeholder text: "Type your message..."
  • Monospace font (font-mono)
  • Auto-resize based on content
  • No manual save needed

Auto-Save Behavior​

Story Notes save automatically when you click away:

  1. Start editing the note
  2. Make changes to the text
  3. Click outside the note (blur event)
  4. Note saves automatically to the server
  5. Canvas updates with new content

Important: Like the Notebook, saves happen on blur, so click away when done editing.

Deleting Notes​

How to Delete​

To delete one of your notes:

  1. Hover over the note you created
  2. Close button (X) appears in top-right corner
  3. Click the X icon
  4. Note deletes immediately (no confirmation)

Delete restrictions:

  • Can only delete your own notes
  • Cannot delete other users' notes
  • Delete is permanent (no undo)
  • Close button doesn't appear on others' notes

Before Deleting​

Since deletion is permanent:

  • Read the note one last time
  • Copy content if you might need it later
  • Consider editing instead of deleting
  • Coordinate with team if note contains shared information

Collaboration with Notes​

Multi-User Environment​

Story Notes support collaborative annotation:

  • Multiple users can create notes on the same canvas
  • Each note shows the author's name
  • Authors control their own notes
  • Everyone sees all notes (when visible)

Author Display​

Each note shows the author at the bottom:

  • Name displayed: From the user's profile
  • Format: "Juan Cuadra" or "Unknown Author" (if no name)
  • Position: Bottom of the note card
  • Style: Monospace font, semibold, white text

Example:

┌─────────────────────────┐
│ Need to verify this     │
│ interaction works on    │
│ mobile devices          │
│                         │
│         Maria Lopez     │
└─────────────────────────┘

Collaboration Workflows​

Team Annotations​

Use Story Notes for:

  • Marking areas needing attention
  • Leaving questions for team members
  • Flagging bugs or issues
  • Documenting quick decisions

Example workflow:

Designer: Creates note "Check color contrast here"
Developer: Sees note, makes fix
Designer: Deletes note when verified

Review Process​

Reviewer workflow:

  1. Review story structure on canvas
  2. Add notes near problem areas
  3. Include specific feedback
  4. Team addresses notes
  5. Reviewers delete notes when resolved

Handoff Documentation​

Leaving notes for next person:

  • "Audio file pending from producer"
  • "Awaiting final copy from writer"
  • "Test this path thoroughly"
  • "Known issue: see Notebook for details"

Best Practices​

Note Content​

Keep notes concise:

  • Story Notes are small (250px square)
  • Limited visible space
  • Get to the point quickly
  • Use Notebook for longer documentation

Good note examples:

  • "Add audio here"
  • "Verify logic before launch"
  • "Placeholder text - needs final copy"
  • "Missing connection to Scene 12"

Bad note examples (too long):

  • Long paragraphs explaining complex logic
  • Multiple unrelated points
  • Detailed technical specifications
  • Full conversation threads

Note Placement​

Position strategically:

  • Place notes near the relevant scene/element
  • Don't block important connections
  • Group related notes together
  • Leave space for canvas work

Placement tips:

  • To the side of scenes, not on top
  • In open canvas areas
  • Near decision points for branching notes
  • At entry points for overall reminders

Organization​

Use notes for different purposes:

  • 🔴 Issues/Problems: "Audio missing"
  • 📝 Reminders: "Test this flow"
  • ❓ Questions: "Should this connect to Scene 8?"
  • ✓ Status: "Ready for review"

Note lifecycle:

  1. Create note when issue/question arises
  2. Leave note visible while relevant
  3. Update note as situation changes
  4. Delete note when resolved

When to Use Notes vs Notebook​

Use Story Notes (Canvas) for:

  • Visual position-based reminders
  • Quick annotations
  • Team communication about specific elements
  • Temporary notes that will be deleted

Use Notebook for:

  • Overall story planning
  • Detailed documentation
  • Technical specifications
  • Permanent reference information

Example split:

  • Canvas note: "Scene 7 needs audio" (visual, temporary)
  • Notebook: "# Audio Assets - Scene 7 requires background music, client approval pending" (detailed, permanent)

Limitations​

No Rich Formatting​

Story Notes use a simple text area:

  • Plain text only
  • No bold, italic, or headings
  • No lists or links
  • No special formatting

Workaround: Use simple text formatting:

TODO:
- Fix audio
- Test interaction
- Review with team

Fixed Size​

Notes are always 250 × 250 pixels:

  • Cannot resize
  • Limited space for content
  • Text area scrolls if content is too long
  • Keep content brief to avoid scrolling

No Note Organization​

Story Notes don't have:

  • Categories or tags
  • Color coding options
  • Grouping features
  • Sorting or filtering

Workaround: Use consistent text prefixes:

  • "BUG: ..."
  • "TODO: ..."
  • "QUESTION: ..."
  • "REMINDER: ..."

Cannot search note content:

  • Must visually scan canvas
  • No text search
  • No filter by author
  • No find function

Workaround:

  • Keep notes organized spatially
  • Delete resolved notes promptly
  • Use show/hide to reduce clutter

Tips and Tricks​

Quick Note Templates​

Start notes with consistent patterns:

TODO: [what needs doing]
BUG: [what's broken]
ASK: [question for team]
WAIT: [blocking issue]
CHECK: [needs verification]

Note as Task Markers​

Use notes as visual TODO markers:

┌─────────────────────────┐
│ BEFORE LAUNCH:          │
│ ✓ Test all paths        │
│ ✓ Add audio             │
│ ○ Client approval       │
│                         │
│         Juan Cuadra     │
└─────────────────────────┘

Coordinate with Team​

Before deleting collaborative notes:

  • Mention in team chat that you're addressing it
  • Take a screenshot if needed for reference
  • Update Notebook with permanent documentation
  • Confirm resolution with team

Archive Pattern​

Before deleting notes with useful info:

  1. Copy note content to Notebook
  2. Add context about what was resolved
  3. Then delete the canvas note
  4. Keeps history without canvas clutter

Accessibility​

Keyboard Interaction​

  • Tab to navigate between notes
  • Click to activate text area
  • Type to edit content
  • Click away or Tab to save

Visual Considerations​

  • High contrast white text on action color
  • Clear close button on hover
  • Author name always visible
  • Monospace font for readability

Next Steps​