Design / Drawing Tool (e.g. Figma, Canva, Excalidraw)
Browser-based design and drawing tools are interaction-heavy editor applications. A strong answer should explain how to model elements, render the canvas, and keep editing responsive as the document grows.
Question
Design a desktop-first browser-based design and drawing tool similar to Figma, Canva, Excalidraw, or tldraw. Users should be able to create and edit a single document containing common elements such as rectangles, images, frames or groups, and text.
Focus on the front-end architecture for the active editor experience: element modeling, canvas rendering, selection, transforms, layering, undo/redo, keyboard shortcuts, and viewport navigation such as zooming and panning. Assume the initial version is primarily single-user and in-memory during an editing session. Persistence, exporting, offline support, and real-time collaboration can be discussed as extensions rather than the core design.
You do not need to go deep on template marketplaces, comments, version history, advanced vector path editing, animation timelines, or full raster painting engines unless the interviewer asks.
Real-life examples
Requirements
- Support a desktop-first editing surface for a single active document.
- Users should be able to create and edit basic elements such as shapes, images, frames or groups, and text.
- Support single-select and multi-select, moving, resizing, rotating, deleting, copying, and layer ordering operations.
- Support viewport interactions such as zooming and panning across a document that may contain hundreds to low thousands of elements.
- Support undo and redo for recent editing operations.
- The design should explain how document state, selection state, and viewport state are represented on the client.
- Focus on the base editing architecture first. Persistence, exporting, offline behavior, and collaboration can be covered as follow-up extensions.