Overview
When reviewing a website project, you can switch between different device sizes to check how the site looks across screen widths. This is useful for reviewing responsive layouts and catching breakpoint issues without leaving Huddlekit.
Device previews are available in website projects only, not in web app or media projects.
Switching devices
Use the keyboard shortcuts to jump between device categories:
| Key | Category | Example widths |
|---|---|---|
| 1 | Mobile | 320px – 430px |
| 2 | Tablet | 768px – 1024px |
| 3 | Laptop | 1024px – 1536px |
| 4 | Desktop | 1280px – 2560px |
You can also select a specific device from the device picker in the toolbar. Each category includes a range of common devices — from iPhone SE and Galaxy Fold through to iPad Pro and widescreen desktop monitors.
Canvas view
Canvas view shows all four device sizes — mobile, tablet, laptop, and desktop — simultaneously in a side-by-side layout. This lets you review your responsive design across every breakpoint at once without switching back and forth.
Press G to toggle canvas view on and off, or click the canvas icon in the toolbar.
By default, all four devices scroll together so you can compare the same section of the page across breakpoints. You can unlink individual devices to scroll them independently.
You can still leave comments and use inspect mode while in canvas view — everything works the same as in single-device mode.
Canvas view is available to workspace members only — guests accessing a project via a share link will not see it.
Comments and device views
Comments you leave are tied to a specific device size. If you leave a comment while in mobile view, it will only appear when viewing the page at mobile size.
