Skip to main content

Notebook Feature

Overview​

The Notebook is a dedicated rich-text editor panel where you can write notes, plan your story, and document decisions. Each story has a single notebook that's accessible while working on your story.

Opening the Notebook​

The notebook appears as a sliding panel from the right side of the screen:

  1. Click the Notebook button in the story editor toolbar
  2. The notebook panel slides in from the right
  3. The panel overlays the editor without closing your work
  4. Click the close icon (X) to hide the notebook

Panel behavior:

  • Slides in from the right with a smooth animation
  • Takes up 30% of the screen width
  • Stays open while you work on your story
  • Closes by clicking the X icon in the top-left corner

Notebook Interface​

Layout​

The notebook panel has three main sections:

  1. Header (top):

    • Close button (X icon) on the left
    • Minimalist design for maximum writing space

  2. Title Bar (below header):

    • "Notebook" heading
    • Last Updated timestamp on the right
    • Shows date in format: "Month Day, Year" (e.g., "December 4, 2024")
    • Shows "Never" if notebook hasn't been saved yet

  3. Editor Area (main section):

    • Rich text editor with formatting toolbar
    • Scrollable content area
    • Placeholder text: "Save your thoughts here..."

Rich Text Editor​

The notebook uses a full-featured rich text editor with:

  • Text formatting: Bold, italic, underline
  • Headings: Multiple heading levels for organization
  • Lists: Bulleted and numbered lists
  • Paragraphs: Standard paragraph formatting
  • Undo/Redo: Full edit history

Editor toolbar (appears above the text area):

  • All formatting controls in one bar
  • Click formatting buttons to apply styles
  • Standard rich text editing interface

Auto-Save Functionality​

The notebook saves automatically—you never need to manually save:

How Auto-Save Works​

  1. Type your content in the editor
  2. Click away from the editor (blur event)
  3. Content saves automatically to the server
  4. Last Updated timestamp updates with current date
  5. No save button needed—everything is automatic

Important notes:

  • Saves when you click outside the editor
  • Does NOT save if you click the formatting toolbar buttons
  • Waits until you're done editing before saving
  • Shows "Last Updated" date after each save
  • Only one save operation runs at a time (prevents duplicates)

What Gets Saved​

The notebook stores:

  • Text content in JSON format (structured data)
  • HTML version for rendering and export
  • Last updated timestamp for tracking changes
  • Entry ID (format: storyId-notebook-entry-1)
  • Title: Always "Default Entry"

Using the Notebook​

Writing Content​

To start writing:

  1. Open the notebook panel
  2. Click in the editor area
  3. Start typing (placeholder disappears)
  4. Use formatting toolbar for text styles
  5. Click outside editor when done (auto-saves)

Formatting your notes:

  • Select text and click formatting buttons
  • Use headings to organize sections
  • Create lists for clarity
  • Format as you write or after

Common Use Cases​

Planning Story Structure​

# Story Outline

## Act 1: Introduction
- Introduce protagonist
- Establish setting
- Present initial conflict

## Act 2: Development
- Rising action
- Character development
- Key decision points

Documenting Decisions​

# Design Decisions

**Character Names**
Chose modern names to appeal to younger audience

**Branching Structure**
Using 3 main paths with convergence at end
- Simplifies testing
- Better narrative control

Implementation Notes​

# Technical Notes

## Variables Used
- playerChoice: tracks main decision
- relationshipScore: affects ending
- hasItem: gates specific scenes

## Conditional Logic
Scene 5 requires relationshipScore > 50
Alternative path if playerChoice === "cautious"

Task Tracking​

# To-Do List

**High Priority**
- [ ] Finish Scene 7 dialogue
- [ ] Test branching logic
- [ ] Add audio to key scenes

**Nice to Have**
- [ ] Additional character art
- [ ] Background music

Notebook Limitations​

Single Notebook Per Story​

  • Each story has one notebook
  • Cannot create multiple notebook pages
  • All notes go in the same editor
  • Use headings to organize different topics

Workaround: Use heading levels to create sections:

# Planning
(your planning notes)

# Technical Documentation
(your technical notes)

# Meeting Notes
(collaboration notes)

No Search Function​

  • Cannot search within notebook content
  • Use clear headings for navigation
  • Keep notes organized
  • Scroll to find specific sections

No Version History​

  • Notebook doesn't track previous versions
  • Each save overwrites the previous content
  • Cannot undo saves after closing notebook
  • Copy important notes elsewhere before major changes

Workaround: Periodically copy important content to external documentation as backup.

Collaboration​

Shared Notebooks​

The notebook is part of the story and is shared with collaborators:

  • All collaborators see the same notebook
  • Changes sync across all users with access
  • Last Updated shows when anyone last edited
  • No conflict resolution - last save wins

Best Practices for Shared Notebooks​

Communication:

  • Coordinate before making major changes
  • Use headings to separate different people's notes
  • Add your name to sections you're working on
  • Don't delete others' notes without discussion

Organization:

# Juan's Notes - Story Structure
(your notes)

# Maria's Notes - Character Development
(collaborator's notes)

# Team Decisions - Approved by All
(shared decisions)

Avoid conflicts:

  • Don't edit simultaneously
  • Use external tools for real-time collaboration
  • Treat notebook as documentation, not chat
  • Coordinate major edits

Best Practices​

Organization​

Use a consistent structure:

# Overview
Brief story summary

# Planning
Structural notes

# Technical Details
Implementation notes

# To-Do
Tasks and reminders

# Change Log
Major updates

Keep it current:

  • Update as your story evolves
  • Remove outdated information
  • Archive old notes at the bottom
  • Date important entries

Content Guidelines​

Be clear and concise:

  • Write for future you (or collaborators)
  • Use headings liberally
  • Keep paragraphs short
  • Use lists for readability

Document what matters:

  • Why decisions were made (not just what)
  • Complex logic that might be confusing later
  • Known issues or limitations
  • Future improvement ideas

Formatting for Readability​

Use headings hierarchically:

  • # Top Level - Major sections
  • ## Second Level - Subsections
  • ### Third Level - Detailed points

Use lists effectively:

  • Bulleted lists for related items
  • Numbered lists for sequences
  • Checkboxes for tasks (using [ ] markdown)

Bold for emphasis:

  • Use bold for important terms
  • Don't overuse—loses impact
  • Good for decision markers

Tips and Tricks​

Quick Reference Section​

Keep frequently-needed information at the top:

# Quick Reference

**Main Character**: Alex Chen, 32, architect
**Setting**: San Francisco, 2024
**Key Variables**: choice, trust_level, has_key
**Decision Point**: Scene 7

Change Log​

Track major updates:

# Change Log

**Dec 4, 2024** - Added final scene
**Dec 1, 2024** - Restructured Act 2
**Nov 28, 2024** - Initial outline complete

Template for Scenes​

Keep a scene planning template:

# Scene Planning Template

## Scene [Number]: [Name]
- **Purpose**: What this scene accomplishes
- **Characters**: Who appears
- **Decisions**: What choices are presented
- **Outcome**: What changes

Accessibility​

Keyboard Navigation​

  • Click in editor to start typing
  • Use Tab/Shift+Tab to navigate formatting toolbar
  • Standard text editing shortcuts work (Ctrl+B for bold, etc.)

Screen Size Considerations​

  • Panel is 30% of screen width
  • May be narrow on small screens
  • Content scrolls vertically
  • Formatting toolbar stays at top of content area

Next Steps​