Plugin Settings

The Cosmos config can be extended with plugin settings. For example the Vite plugin reads settings from the vite config key, and the Webpack plugin from the webpack config key.

UI Plugin Configuration

Settings under ui.{pluginName} keys are passed as configs to UI plugins. Example below.

Custom Viewports

responsivePreview is a plugin included by default. You customize the device list through the Cosmos config:

{
  "ui": {
    "responsivePreview": {
      "devices": [
        { "label": "iPhone SE", "width": 375, "height": 667 },
        { "label": "iPad mini", "width": 744, "height": 1133 },
        { "label": "1080p", "width": 1920, "height": 1080 }
      ]
    }
  }
}