Excalidraw - collaborative whiteboard

Excalidraw is a collaborative whiteboard application that enables users to work together in real-time on a shared canvas. It offers a range of drawing and editing tools, scene management capabilities, and supports data persistence to ensure user work is saved across sessions. The app is designed to facilitate seamless collaboration and interaction through an intuitive user interface.

• Enable seamless real-time collaboration among users.
• Provide intuitive tools for creating and managing visual elements.
• Ensure data persistence across user sessions.
• Offer a customizable user interface to enhance user experience.

• Increased user engagement in collaborative sessions.
• High user satisfaction with drawing and editing tools.
• Low data loss incidents reported by users.
• Positive feedback on interface customization options.

• Real-time Collaboration
  1. As user, I want to start a collaboration session so that I can work with others on the same whiteboard.
  2. As user, I want to see changes made by others in real-time so that I can collaborate effectively.
  3. As user, I want to see where other users are pointing so that I can follow their actions.
  4. As user, I want to be notified of any errors during collaboration so that I can take corrective actions.
• Scene Management
  1. As user, I want to add new elements to the canvas so that I can create diagrams and illustrations
  2. As user, I want to select and modify existing elements so that I can update my drawings as needed
  3. As user, I want the application to efficiently manage and render elements so that my interactions are smooth and responsive
• User Interface
  1. As user, I want to access the main menu to load and save my work so that I can manage my drawings efficiently.
  2. As user, I want to use the toolbar to select and customize drawing tools so that I can create and edit elements with ease.
  3. As user, I want to access advanced features through dialogs, dropdowns, and popovers so that I can utilize additional functionalities without cluttering my workspace.
  4. As user, I want to customize the interface theme and language so that I can have a personalized and accessible experience.
• Data Persistence
  1. As user, I want my drawing elements and app state to be saved automatically so that I can continue my work seamlessly when I return to the application.
  2. As user, I want the application to manage storage efficiently by removing unused files so that my browser storage is not unnecessarily filled.
  3. As developer, I want to pause data saving operations when the application is not in use so that I can optimize performance and resource usage.
• Analytics and Event Tracking
  1. As product manager, I want to track specific user interactions within the app so that I can analyze user behavior and improve the product.
  2. As developer, I want to ensure that analytics are only collected in production environments so that development and testing activities do not skew the data.
  3. As data analyst, I want to receive detailed event logs with categories and actions so that I can perform meaningful analysis on user interactions.
• Collaboration Session Management
  1. As user, I want to generate a unique room link so that I can start a new collaboration session
  2. As user, I want to join an existing collaboration session so that I can collaborate with others
  3. As user, I want to leave a collaboration session so that I can stop collaborating
• User Presence and Activity Synchronization
  1. As user, I want to see the pointers of other participants in real-time so that I can understand where they are focusing their attention on the whiteboard.
  2. As user, I want to be notified when other participants become idle or active so that I can gauge their engagement in the session.
  3. As user, I want to start and stop collaboration sessions seamlessly so that I can collaborate effectively without losing any data.
  4. As user, I want to be informed of any synchronization errors so that I can take appropriate action to resolve them.
• File Upload and Management
  1. As user, I want to upload files to my Excalidraw session so that I can include images and other media in my collaborative work
  2. As user, I want to be notified if a file upload fails so that I can take corrective action
  3. As user, I want the application to prevent me from closing the session if files are still being saved so that I do not lose any data
  4. As user, I want to receive real-time updates on the status of my file uploads and downloads so that I can be informed about the progress and any issues
• Element Creation and Manipulation
  1. As user, I want to create new elements on the canvas so that I can add content to my drawing
  2. As user, I want to manipulate existing elements so that I can adjust my drawing as needed
  3. As user, I want the canvas to update immediately when I make changes so that I can see the results of my actions in real-time
• Element Selection and Caching
  1. As user, I want to select multiple elements on the canvas so that I can manipulate them as a group
  2. As user, I want the application to remember my selection when I perform other actions so that I can quickly return to my previous selection without delay
  3. As user, I want to select elements by group ID to efficiently manage grouped elements
• Dynamic Element Updates
  1. As user, I want changes to elements to be immediately reflected in the UI so that I can see updates in real-time as I interact with the whiteboard.
  2. As developer, I want to ensure that element updates are efficiently managed and propagated so that the application remains performant and responsive.
  3. As user, I want to drag elements into frames and see them reordered within the frame during the drag operation.
• Element Binding and Constraints
  1. As user, I want to bind an arrow to a shape so that the arrow moves with the shape when repositioned
  2. As user, I want to unbind an arrow from a shape so that the arrow can be moved independently
  3. As user, I want to toggle the binding feature so that I can control whether elements bind to each other
• Main Menu Access and Operations
  1. As user, I want to load, save, and export my drawings from a single menu so that I can efficiently manage my work
  2. As user, I want to initiate or join a live collaboration session from the main menu so that I can work with others in real-time
  3. As user, I want to access Excalidraw+ features and manage my account from the main menu so that I can enhance my drawing experience
  4. As user, I want to change the language of the interface from the main menu so that I can use the app in my preferred language
• Toolbar Interaction and Tool Management
  1. As user, I want to select a drawing tool from the toolbar so that I can draw on the canvas with the selected tool
  2. As user, I want to change properties of the selected tool so that I can customize my drawing elements
  3. As user, I want to access additional tools from the toolbar so that I can use advanced features like frames and laser pointers
  4. As user, I want to use compact shape actions for quick tool adjustments
• Interface Customization
  1. As user, I want to toggle between different themes so that I can customize the visual appearance of the app to my preference
  2. As user, I want to select my preferred language so that the interface is displayed in a language I understand
• Local Storage Management
  1. As user, I want to save my current application state to local storage so that I can resume my work later without losing progress
  2. As user, I want to retrieve my saved application state from local storage so that I can continue my work from where I left off
  3. As user, I want to delete specific data from local storage so that I can manage my stored data and remove unnecessary items
• IndexedDB File Management
  1. As user, I want my uploaded images to be saved automatically so that I don't have to worry about losing them during my session.
  2. As user, I want unused images to be cleared automatically after a day so that my storage is not unnecessarily filled with obsolete files.
  3. As developer, I want the system to update file access timestamps so that I can track file usage and manage storage efficiently.
• Data Saving Control
  1. As user, I want to pause data saving operations so that I can prevent unnecessary writes during inactive periods.
  2. As user, I want to resume data saving operations so that my changes are persisted once I'm ready.
  3. As developer, I want data saving operations to be debounced so that performance is optimized and resource usage is reduced.
  4. As user, I want specific sidebar states to be handled during saving to avoid unnecessary storage usage.
  5. As user, I want the system to handle local storage quota exceeded errors to prevent data loss.
  6. As user, I want invisible elements to be deleted during data restoration to optimize storage and performance.
  7. As user, I want the system to track file status during operations to monitor loading, loaded, and error states.

• Product kind: User-facing app
• Real-time collaboration is enabled using Firebase and Socket.IO.
• Data persistence is managed through local storage and IndexedDB.
• The application leverages modern web technologies for a seamless user experience.
• The application leverages modern web technologies to provide a seamless user experience.
• The application supports scene management for drawing and editing elements.
• Skipped dev-docs: Contains documentation and config files not directly implementing product features.
• Skipped examples: Contains example applications, not the main product.
• Skipped .github: Contains GitHub workflows and assets, not product code.
• Skipped scripts: Contains build and release scripts, not product logic.
• Skipped firebase-project: Contains Firebase configuration, not direct product features.
• Skipped .codesandbox: Contains configuration for CodeSandbox, not product code.
• Skipped .dockerignore: Configuration file for Docker, not product code.
• Skipped .editorconfig: Editor configuration file, not product code.
• Skipped .env.development: Environment configuration file, not product code.
• Skipped .env.production: Environment configuration file, not product code.
• Skipped .eslintignore: ESLint configuration file, not product code.
• Skipped .eslintrc.json: ESLint configuration file, not product code.
• Skipped .gitattributes: Git configuration file, not product code.
• Skipped .gitignore: Git configuration file, not product code.
• Skipped .husky: Contains pre-commit hooks, not product code.
• Skipped .lintstagedrc.js: Lint-staged configuration file, not product code.
• Skipped .npmrc: NPM configuration file, not product code.
• Skipped .nvmrc: Node version manager configuration file, not product code.
• Skipped .prettierignore: Prettier configuration file, not product code.
• Skipped .watchmanconfig: Watchman configuration file, not product code.
• Skipped contributing.md: Contribution guidelines, not product code.
• Skipped dockerfile: Docker configuration file, not product code.
• Skipped license: License file, not product code.
• Skipped readme.md: Readme file, not product code.
• Skipped crowdin.yml: Crowdin configuration file, not product code.
• Skipped docker-compose.yml: Docker Compose configuration file, not product code.
• Skipped setuptests.ts: Test setup file, not product code.
• Skipped tsconfig.json: TypeScript configuration file, not product code.
• Skipped vercel.json: Vercel configuration file, not product code.
• Skipped vitest.config.mts: Vitest configuration file, not product code.
• Skipped packages/excalidraw/actions/actionaddtolibrary.ts: Already provided
• Skipped packages/excalidraw/align.ts: Already provided
• Skipped packages/excalidraw/analytics.ts: Already provided
• Discovery review: Host soft-pass after 3 review cycles: layout breadth ok (1/1 packages), orientation has 5 major areas / 5 capabilities. LLM still incomplete: Host subtree gate: 1 product subtree(s) never read: public
• Product kind: User-facing app (inferred — The presence of numerous UI components and collaborative features indicates a human-facing application.)
• Stack: TypeScript, React, Jotai, Firebase, Socket.IO
• Integrations: Firebase, Socket.IO, real-time collaboration, scene management, React, Jotai

• Feature implementation drifts from PRD — Re-analyze the feature after significant code changes