Learn how Scrivito CMS can help you deliver amazing digital experiences
See Scrivito CMS in action
New in 1.25.0


Defines custom preview sizes for use in Scrivito’s editing interface.

Scrivito’s sidebar offers several preview sizes for selection. They enable editors to see how the website would look on devices with smaller screens. If custom preview sizes are provided, they replace the built-in ones.

Scrivito.configurePreviewSizes([{title: "Small smartphone", width: 240}])


  • previewSizes (Array) – the preview sizes to provide. Each array element is expected to be an object containing the following:
    • title (String) – the title of the preview size. 
    • width (Number) – the width of the preview size in pixels (optional). If not provided, the full width is used.
    • description (String) – the description of the preview size (optional).
    • icon (String) – the URL of an icon image (optional).


An error is thrown if
  • the previewSizes array is empty,
  • the provided preview sizes do not have a unique width specified as a positive integer.


const customPreviewSizes = [ { title: 'iPhone 11', width: 414, description: 'iPhone 11 Pro Max', }, { title: 'iPad 12.9 (portrait)', width: 1024, }, { title: 'Smartwatch', width: 184, icon: 'https://img.icons8.com/material-outlined/24/ffffff/apple-watch.png', }, ] Scrivito.configurePreviewSizes(customPreviewSizes)