@liip/storybook-addon-resizr

A Storybook addon that replaces the official Viewport addon with a resizable iframe. Select viewport presets from a dropdown or drag handles to resize freely.

Features

• Viewport selector dropdown - Choose from preset device sizes (Mobile, Tablet, Desktop)
• Draggable resize handles - Resize the iframe by dragging edges or corner
• Rotate button - Swap width/height to toggle portrait/landscape orientation
• Custom dimensions - Auto-detected when you manually resize
• Configurable presets - Define your own viewport presets
• Breakpoint indicator - Show your own breakpoint names next to the dimensions

Installation

npm install @liip/storybook-addon-resizr

Configuration

Add the addon to your .storybook/main.ts:

import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
  addons: ['@liip/storybook-addon-resizr'],
  features: {
    // Disable the official viewport addon (optional, recommended)
    viewport: false,
  },
};

export default config;

Usage

Once installed, you'll see in the toolbar:

1. Viewport selector - Click to open dropdown with preset sizes
2. Rotate button - Appears when a size is set, swaps width/height
3. Resize handles - Drag right edge, bottom edge, or corner to resize

Default Presets

Name	Size	Type
Mobile	360x800	mobile
Tablet	768x1024	tablet
Desktop	1920x1080	desktop

Dropdown Options

• Reset - Returns to auto-sizing (only visible when a size is set)
• Preset sizes - Mobile, Tablet, Desktop
• Custom - Auto-selected when you manually drag to resize

Parameters

Configure the addon per-story or globally:

// In a story file
export const MyStory = {
  parameters: {
    resizr: {
      disable: false,         // Disable for this story
      minWidth: 200,          // Minimum width constraint (default: 200)
      minHeight: 200,         // Minimum height constraint (default: 200)
      maxWidth: 1920,         // Maximum width constraint
      maxHeight: 1080,        // Maximum height constraint
      breakpoints: [          // Show the active breakpoint in the toolbar
        { name: 'xxs', min: 0 },
        { name: 'md', min: 768 },
        { name: 'lg', min: 1024 },
      ],
      presets: {              // Custom viewport presets
        mobile: {
          name: 'Mobile',
          styles: { width: '375px', height: '667px' },
          type: 'mobile',
        },
        tablet: {
          name: 'Tablet',
          styles: { width: '768px', height: '1024px' },
          type: 'tablet',
        },
      },
    },
  },
};

Breakpoints

Declare your breakpoints to see the active one next to the dimensions in the toolbar, e.g. 1280x800 - lg:

parameters: {
  resizr: {
    breakpoints: [
      { name: 'xxs', min: 0 },
      { name: 'md', min: 768 },
      { name: 'lg', min: 1024 },
    ],
  },
},

• min is a lower bound in px, with min-width semantics: the breakpoint with the largest min that is still <= the measured iframe width wins.
• The breakpoint is always derived from the width the iframe actually has, including when a preset is selected.
• No breakpoint matches (no entry below the current width) means no suffix. The addon never invents a name for the base range — add an entry with min: 0 to name it yourself.
• Omit the parameter and the label stays unchanged.

Entries are plain data because parameters reach the toolbar serialized as JSON, so functions cannot be passed. Reading your design tokens to build this array is the consumer's job.

Global Configuration

Set defaults in .storybook/preview.ts:

import type { Preview } from '@storybook/react';

const preview: Preview = {
  parameters: {
    resizr: {
      minWidth: 320,
      minHeight: 480,
    },
  },
};

export default preview;

API

Exports

import {
  ADDON_ID,
  PARAM_KEY,
  MINIMAL_VIEWPORTS,
} from '@liip/storybook-addon-resizr';

import type {
  ResizrBreakpoint,
  ResizrGlobals,
  ResizrParameters,
  Viewport,
  ViewportMap,
  Direction,
} from '@liip/storybook-addon-resizr';

Globals

The addon stores state in Storybook globals under the resizr key:

interface ResizrGlobals {
  width: number | null;   // Custom width in px (null = auto)
  height: number | null;  // Custom height in px (null = auto)
}

Compatibility

• Storybook 10.x
• Works with React, Vue, Angular, Svelte, Web Components, and other frameworks

Development

# Install dependencies
npm install

# Build the addon
npm run build

# Start development (builds addon + runs Storybook)
npm run start

# Run Storybook only
npm run storybook

License

MIT