Modern interfaces need to adapt to different screen sizes and orientations. Shaper’s editor is built with responsive design in mind, giving you tools to ensure your design looks great on mobile, tablet, and desktop.

Canvas Resizing & Orientation Toggle: At the top of the canvas, you’ll find options to switch between common device sizes or orientations. For example, you can toggle between a mobile view (portrait/vertical) and a desktop view (landscape/horizontal). This lets you preview how your current page layout responds to a narrower screen vs a wide one. You can also drag the canvas edges to a custom width to see responsive behavior at any breakpoint. Shaper uses actual responsive code (leveraging CSS flexbox, grid, and media queries via Tailwind’s responsive utilities), so what you see in the editor for different sizes is a true representation of how the app will behave.

Layout Containers & Auto-Layout: To build adaptive layouts, containers play a crucial role:

  • Use Flex Containers: By setting a container’s layout to flex (horizontal row or vertical column) in the Property Panel, you enable auto-layout behavior. You can specify how child elements should wrap, align, and justify within that container. For instance, a navigation bar container might be a horizontal flexbox that justifies space-between, so it automatically pushes items to the sides. On a smaller screen, those items might wrap or stack vertically if you allow wrapping.
  • Responsive Properties: Shaper’s styling allows setting responsive breakpoints. For any style property (padding, font size, flex direction, etc.), you can specify different values at different breakpoints (e.g., using Tailwind classes like md:p-8 for medium screens). The Property Panel might expose this by letting you toggle “mobile”, “tablet”, “desktop” modes and adjust styles per view. For example, you might set an image to be 50% width on desktop (class md:w-1/2) but full width on mobile (w-full by default).
  • Grid Layouts: In addition to flexbox, you can also use CSS Grid via the container settings. If you need a more complex two-dimensional layout (like a dashboard with cards), define a container as a grid and set the number of columns, rows, and gaps. This can create responsive grids that reflow content automatically.

Responsive Preview & Testing: As you design, regularly toggle the device preview modes (e.g., switch to a phone view) to ensure elements aren’t overflowing or shrinking incorrectly. Because Shaper’s output is real code, you can trust that if it looks correct in the editor’s mobile preview, it will look the same in a real device. If something doesn’t fit, use the Property Panel to adjust – for example, maybe hide certain elements on small screens or use a smaller font. (Screenshot: The editor showing a page in mobile view vs desktop view, perhaps with an orientation toggle UI visible.)

Tip: Leverage Shaper’s “Preview” mode (play button) to interact with your design at different breakpoints. In Preview, you can scroll and navigate just like a live app. This is great for testing responsive navigation or verifying that a component like a sidebar collapses on mobile.