Scroll/Zoom Freely On An Infinite Canvas While Designing.

While designing in full width breakpoint, I find myself constantly opening and closing sidebar panels, like the navigator, pages, components etc. in order to reveal part of page that its blocking/overlaying.

It would be a lot easier if we can always keep the side panel open while staying on the desired breakpoint, but have the ability to freely scroll around the design canvas horizontally and vertically, and zoom in/out (like in Figma and Framer), so that the sidepanel won't be blocking some of the page in full width breakpoint.

The idea is to basically have a 'frame' of the body on each page which sits on a infinite gray canvas that you can freely scroll around, so when the sidepanel is overlapping the frame/body, instead of closing the sidepanel or downsizing the breakpoint, you can just scroll horizontally or zoom out to reveal hidden part of frame/body.

The logic behind having it like this is that while designing/building, it's not crucial for the page to be 100% actual size. It's more important to be able to access elements on the page quickly and easily. When you want to see how the page looks in actual size, you can just go into preview mode.

  • Airon Studio
  • Aug 25 2023