# Notebook Feature (/docs/v0-1/story-portal/notebook/notebook-feature)

## Overview [#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 [#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 [#notebook-interface]

### Layout [#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 [#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 [#auto-save-functionality]

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

### How Auto-Save Works [#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 [#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 [#using-the-notebook]

### Writing Content [#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 [#common-use-cases]

#### Planning Story Structure [#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 [#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 [#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 [#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 [#notebook-limitations]

### Single Notebook Per Story [#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 [#no-search-function]

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

### No Version History [#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 [#collaboration]

### Shared Notebooks [#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 [#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 [#best-practices]

### Organization [#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 [#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 [#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 [#tips-and-tricks]

### Quick Reference Section [#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 [#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 [#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 [#accessibility]

### Keyboard Navigation [#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 [#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 [#next-steps]

- Learn about [Story Notes](/docs/v0-1/story-portal/notebook/story-notes) for canvas-based annotations
- See [Documentation Best Practices](/docs/v0-1/story-portal/notebook/documentation-best-practices) for effective documentation strategies