✎𓂃 Add Interactive Whiteboard Support to Notes

[HarshYadav152]

Enhance the existing note system by adding interactive whiteboard support inside notes. Currently, notes contain a title and description. This feature will allow users to also attach and edit a drawable whiteboard canvas within a note.

The whiteboard editor should be accessible through:

/notes/whiteboard

Each whiteboard note will contain:

• Title
• Description
• Drawable canvas data

This feature will help users create visual notes, diagrams, mind maps, and brainstorming sketches directly inside SaveBook.

---

Features to Implement

• Add drawable whiteboard support to notes

• Create/edit whiteboard notes

• Save canvas data with note model

• Autosave whiteboard changes

• Drawing tools:

  • Pen
  • Shapes
  • Arrows
  • Text

• Zoom and pan support

• Responsive UI

• Dark/light theme compatibility

---

Suggested Libraries

Recommended

• [Excalidraw](https://excalidraw.com)

Docs

• [Excalidraw GitHub](https://github.com/excalidraw/excalidraw)
• [Excalidraw Documentation](https://docs.excalidraw.com)

---

Model Changes

Update the existing note model to support whiteboard data.

Example:

{
  title: String,
  description: String,
  whiteboardData: Object,
  isWhiteboard: Boolean
}

---

Routes

/notes/whiteboard
/notes/whiteboard/[id]

---

Suggested Components

components/
└── whiteboard/
    ├── WhiteboardCanvas.js
    ├── WhiteboardToolbar.js
    └── WhiteboardPreview.js

---

Expected Outcome

Users should be able to:

• Create notes with drawings
• Save visual brainstorming ideas
• Reopen and continue editing whiteboards
• Use whiteboards seamlessly with existing notes

---

Acceptance Criteria

• Whiteboard data saves correctly
• Existing notes remain unaffected
• Notes support title + description + drawing
• Canvas restores after refresh
• UI matches SaveBook theme
• Works on desktop and mobile

---

[Moresh-Mishra]

Would like to work on this @HarshYadav152 as NSOC'26 contributor

[HarshYadav152]

@Moresh-Mishra Go for it.