The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Chromatic captures the full height of a Storybook story by default, even when you set a viewport height. To clip the snapshot to that height, set parameters.chromatic.cropToViewport: true. The resulting image is still cropped to the component’s bounding box, so “full page” means the rendered UI under the configured capture behavior—not an unlimited screenshot of the entire browser page.
How Chromatic’s viewport and capture height work
A viewport sets the browser dimensions in which Chromatic renders a story. In Storybook Modes, you can configure its width, height, or both. But setting a viewport height does not, by itself, limit the snapshot to that height: Chromatic captures the full rendered UI height by default.
If you do not specify a viewport height, the snapshot height follows the root container’s intrinsic height. When no viewport is specified, Chromatic documents a default viewport of 1200 × 900 pixels.
How to crop a Storybook snapshot to the viewport
Set cropToViewport in the story’s Chromatic parameters:
#1 Best Overall
export default {
parameters: {
chromatic: {
cropToViewport: true,
},
},
};With a viewport height configured, this setting clips content that extends below that height. If the root container is shorter than the viewport, the snapshot is trimmed to the container’s intrinsic height rather than padded to fill the viewport.
The component’s bounding box also determines the snapshot crop, removing surrounding negative space. Thus, viewport cropping controls the capture’s height; it does not turn the screenshot into a capture of every part of the surrounding browser page.
Use Modes when you need to set a viewport height
Chromatic’s legacy Storybook chromatic.viewports API does not support setting viewport height. Chromatic identifies Modes as its successor and recommends it when you need height control. The detailed full-height default and cropToViewport behavior described here is documented for Storybook Modes; do not assume the same configuration syntax applies unchanged to Vitest or Cypress.
Other capture limits to keep in mind
- Chromatic documents viewport dimensions from 200 to 2560 pixels and a maximum of 25,000,000 pixels per snapshot.
- Safari and Firefox have a documented 32,767-pixel image width or height rendering limit. At device pixel ratio (DPR) 2.0, that image-dimension limit is reached at half the corresponding CSS-pixel dimension.
- Chromatic’s snapshots documentation says visual captures use DPR 2.0 starting with Capture 9. If an image exceeds Safari or Firefox’s dimensions limit, Chromatic documents retrying at DPR 1.0.
These are capture and rendering constraints, not a guarantee that any given story will fit within them. Very tall content, a large viewport, or a high DPR can affect whether the image can be rendered at the requested dimensions.
Rank #3
Vitest and Cypress captures
Chromatic also supports viewport configuration for Vitest and Cypress. In those integrations, captures use the viewport configured for the test. The Storybook-specific parameters.chromatic.cropToViewport setting described above should not be treated as a universal switch for those integrations.
Alternative for capturing a website page
If your goal is a screenshot of a live website rather than a Chromatic visual test of a Storybook story, ScreenshotNeo is a website screenshot API and MCP server. It can return a screenshot or PDF from a single GET request.
Or skip the browser setup
Use this cURL request to capture a page as WebP; replace the URL with the page you want to capture and provide your API key:
Quick Recap
Best Value
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. ScreenshotNeo accepts cookie or consent banners as a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in headers. Its MCP server provides screenshot, page-info, and PDF tools for AI agents. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Sign up for 1,000 free screenshots a month with no card.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
