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
In single-device view, switch between the five breakpoint categories using the device controls at the top of the view, or the number-key shortcuts:
| Key | Category | Example widths |
|---|---|---|
| 1 | Mobile | 280px – 540px |
| 2 | Tablet | 768px – 1024px |
| 3 | Laptop | 1024px – 1600px |
| 4 | Desktop | 1280px – 2560px |
| 5 | Wide | 1920px – 3840px |
Single-device view previews each category at its default size. To preview a specific device or width within a category, switch to Canvas view, where each breakpoint has a device picker that lists the common models in that category, sorted by width.
Customizing the default breakpoints
On a paid plan, you can change the default screen sizes reviewers see when they open a website project. Open Viewport settings from the project's settings — the gear icon in the top toolbar, or the ... menu on the project card — and adjust the Default breakpoint sizes.
For each breakpoint you can:
- Set the size it opens at, chosen from a list of common devices.
- Hide breakpoints you don't need, so reviewers only see the sizes that matter.
- Choose which breakpoint the project opens on.
- Turn on Use true device height to show each size at its real proportions.
Your changes apply to everyone who opens the project, including guests on a share link.
Customizing breakpoints is a paid feature. On the Free plan these controls are locked and you'll see an option to upgrade.
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.
Each frame has its own controls — use the device dropdown above a frame to swap it for a specific model in that category, and the side arrows to reorder frames or refresh a preview.
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 a paid feature for workspace members. On the Free plan, opening canvas view shows an upgrade prompt instead of the previews. Guests accessing a project via a share link don't see canvas view at all.
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.
