Previews

Customize the preview experience for your site.

Preview settings make it possible to cater various views of the site to best serve the site's editors. See the feature guide for more information.

Preview Configuration

These properties provide custom control over the visual preview experience.

viewports

A custom set of viewport sizes when editing or previewing the site.

Required
No
Allowed Values

An array of objects with the following properties:

  • label: The label for the viewport size.
  • size: Object with height (optional) and width properties (in pixels, as numbers) specifying the appropriate viewport size.
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
export default {
  viewports: [
    {
      label: 'iPhone 14',
      size: { width: 390, height: 844 },
    },
    {
      label: 'iPhone 14 Plus',
      size: { width: 428, height: 926 },
    },
  ],
}
Custom Viewport Sizes
Custom Viewport Sizes
  • If not provided, a default set of viewport sizes will be used.
  • Actual size will be shown whether or not viewports is defined.
  • If height is not provided in sizes, it will fallback to the actual height of the viewport.