Unlimited canvas: Previous canvas limits were removed. Earlier restrictions caused unnecessary re-renders and blocked operations. Now designers can place elements anywhere without overhead.
Optimized state management: Creating, updating, and deleting elements now triggers minimal state updates. Only affected parts of the state are recalculated, reducing processing and improving responsiveness.
Dedicated icon element: Icons now have their own element type. This decouples them from general elements, allowing integration of additional libraries, dynamic styling, and more flexible adaptation within the app.
Recursive in-memory export: Exports are built element by element recursively in memory. This ensures data consistency, avoids redundant recalculation, and scales efficiently to high-resolution outputs (up to 8K).
Mouse wheel zoom: Implemented a smooth zoom mechanism controlled via the mouse wheel for better navigation of complex layouts.
Multi-element property updates: When multiple elements are selected, only the modified property is updated for all elements. Full state recomputation is avoided, improving performance in large designs.
Auto-focus shortcut (Shift + 1): Elements are located by their x, y, width, and height, then auto-focused on the canvas. This prevents users from losing context while designing complex screens.
Tech stack: React, Next.js, MongoDB, Jotai, React Konva.
Feedback Requested: Looking for feedback on performance, UX, and data model structure.