# Viewport Addon

The Viewport Addon is an invaluable tool that lets you preview your stories on various viewports. These viewports simulate a realistic environment by:

1. Setting width and height boundaries to your story.
1. Overriding `MediaQuery`'s `devicePixelRatio` to ensure your component behaves as as expected on different devices.
1. Overriding `ThemeData.platform` to simulate different platforms.

## Usage

```dart title=widgetbook/lib/widgetbook.config.dart
final config = Config(
  // ...
  addons: [
    ViewportAddon([ // [!code highlight]
      Viewports.none, // [!code highlight]
      IosViewports.iPhone13, // [!code highlight]
      AndroidViewports.samsungGalaxyNote20, // [!code highlight]
      MacosViewports.macbookPro, // [!code highlight]
      WindowsViewports.desktop, // [!code highlight]
      LinuxViewports.desktop, // [!code highlight]
    ]), // [!code highlight]
  ],
);
```

<Info>
  You can use `.all` getter to add all available viewports to the addon:

    ```dart
    ViewportAddon(Viewports.all) // All platforms
    ViewportAddon(IosViewports.all) // Specific platform
    ```

</Info>

## Order

Since the [order of addons](/addons/overview#order-of-addons) matters. The `ViewportAddon` should be used **before all other addons**.

## Mode

Each addon has a corresponding [Mode](/addons/modes) to lock its value in scenarios. For this addon, use `ViewportMode`:

```dart
final $Default = _Story(
  scenarios: [
    _Scenario(
      name: 'iPhone 13',
      modes: [
        ViewportMode(IosViewports.iPhone13), // [!code highlight]
      ]
    ),
  ],
)
```