Join the Webstudio community

Updated 2 months ago

Design with all breakpoints in view simultaneously

At a glance

The community members discuss the idea of having an option to design with all breakpoints in view simultaneously, similar to what Framer and Polyplane offer. They propose two options: an infinite canvas mode instead of a responsive canvas, and a separate preview mode that allows viewing multiple sizes and updates them in real-time.

The community members also suggest the need for a real-time full-screen preview without the builder chrome, which would allow testing on real devices and simulators across different resolutions. They discuss the need for a URL that provides such a full-screen canvas that updates automatically, as well as the potential benefits of multi-tab synchronization.

The community members emphasize the importance of testing in a real-world situation, including considerations like media queries and virtual keyboards on mobile devices, and the need for a canvas viewable without the builder interface.

It would be cool to have an option to design with all breakpoints in view simultaneously; a bit like framer offers or the view seen on Polyplane. Screenshots attached.
Attachments
image.png
image.png
O
B
8 comments
yeah, I have thought about it too, there are 2 options
  1. infinite canvas mode instead of responsive canvas
  2. separate preview mode that allows to view multiple sizes and updates all of them in real time
additional problem to solve: these are still simulations, you want in ideal case to test it on real devices while developing, so a realtime full-screen preview without the builder chrome would be even more powerful, because then you can use any. tool to see on all resolutions, real world devices or simulators all the same
So first thing we need to do is to have a URL for such a full-screen canvas that updates automatically
Multi-tab synchronization could also help
Yeah, to some degree, if testing in the same browser, and only for the sync part, what we still need is a canvas viewable without builder.
Considering user may want to edit at specific breakpoint it make sense to support whole builder synchronization instead of just preview
data sync yes, but you want to render it without builder chrome, because you wan maximum real-world situation, e.g. media queries, virtual keyboards on mobile phone etc etc
Its more bout testing yes
Add a reply
Sign up and join the conversation on Discord