![[DeskFlow]Scaling Up: Making My React Canvas App 6x Larger (v1.1.6)](https://media2.dev.to/dynamic/image/width=1200,height=627,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn5zjg6pcms4dm1rtajus.png)
I am building DeskFlow, a browser-based visual planner for desk setups and cable management.
As the tool gained traction, users (and myself) hit a frustrating wall: the fixed 2000x2000px canvas was simply too small. If you were planning a dual-monitor setup with a laptop, a KVM switch, a NAS, and an audio interface, the nodes and cables quickly turned into a chaotic, overlapping mess.
In version 1.1.6, I focused entirely on expanding the workspace and improving spatial navigation. Here is what changed.
1. A 5000x5000px Workspace
I expanded the canvas area by 6.25x. Now, users can space out their hardware nodes comfortably. You can zoom out to view the entire home office layout, or zoom in to precisely route cables between specific ports.
Bug fix note: When I expanded the container, users couldn't drag nodes past the top-left quadrant. I realized my clamp logic for node dragging still had the 2000 boundaries hardcoded in three different utility functions. Always use constants, folks!
2. Graph Paper Grid
The old dot-grid background was functional but boring. I replaced it with a classic engineering "graph paper" style using a combination of linear gradients.
- Minor grid: 40px intervals (thin, subtle lines).
- Major grid: 200px intervals (slightly thicker lines every 5 blocks).
This makes it significantly easier to judge spatial relationships ("This 4-block area is my monitor arm, this area is under the desk"). The translucent white lines on the dark theme contrast perfectly with the cyan/pink cable paths.
3. Dedicated Pan Mode (Like Figma)
With a massive canvas, navigation is critical. Previously, you had to hold Space + Drag or use the middle mouse button to pan.
I introduced a dedicated Pan Mode toggle (bottom-left hand icon, or press H). When active, simple left-click dragging pans the entire viewport. If you use tools like Figma or Miro, this interaction model feels instantly familiar.
4. UI Boundaries
I added subtle, translucent cyan borders between the left hardware panel, the main canvas, and the right shopping list panel. It’s a tiny CSS tweak (border-right: 1px solid rgba(0, 255, 255, 0.1)), but it dramatically sharpens the separation of the workspace.
If you are planning to overhaul your desk setup or just want to play around with some visual hardware routing, try it out directly in your browser.
🔗 Try it here: https://deskflow-gold.vercel.app/
Next on the roadmap: custom node labels and a minimap for this giant new canvas!
