Documentation

ResizeWizard is a Chrome extension for quickly resizing your browser window to specific dimensions. It's designed for developers, designers, and anyone testing responsive layouts.

Installation

1. Visit the Chrome Web Store listing
2. Click Add to Chrome
3. Pin the extension to your toolbar by clicking the puzzle piece icon and then the pin icon next to ResizeWizard

First Use

Click the ResizeWizard icon in your browser toolbar to open the popup. You'll see the current window size displayed at the top, followed by quick resize presets. Click any preset to instantly resize your browser window.

ResizeWizard includes 6 built-in presets for the most common screen sizes. Click any preset button to instantly resize your browser window to that dimension.

These presets represent common screen dimensions used in web development and design. The window resizes to the exact pixel dimensions shown.

Need a specific dimension that isn't in the presets? Use the custom size inputs to enter any width and height in pixels.

1. Enter the desired width in the first input field
2. Enter the desired height in the second input field
3. Click Apply to resize your browser window

You can also save custom sizes for quick access later. Click the Save button next to the Apply button to add the current dimensions to your saved sizes list.

Save your most-used custom dimensions for one-click access. Saved sizes appear in a dedicated section below the presets.

• Free plan: Save up to 5 custom sizes
• Pro plan: Save unlimited custom sizes

Managing Saved Sizes

• Apply: Click a saved size to resize your window to those dimensions
• Delete: Click the × button on a saved size to remove it
• Reorder: Drag and drop saved sizes to rearrange them

The live size overlay displays the current viewport and window dimensions as a floating indicator on any webpage. It updates in real-time as you resize the window.

How to Use

1. Click the Overlay toggle button in the ResizeWizard popup
2. A small floating badge appears on the current webpage showing dimensions
3. Resize your window and watch the numbers update in real-time
4. Click the toggle again to hide the overlay

The overlay shows both the outer window dimensions and the inner viewport dimensions, helping you understand the difference between the two.

Instantly swap the width and height of your browser window to switch between portrait and landscape orientations. This is useful for testing responsive designs that behave differently based on orientation.

Click the rotate button (the arrow icon) in the ResizeWizard popup. If your window is 1920 × 1080, it will become 1080 × 1920.

Instead of using the popup, you can open ResizeWizard as a panel docked beside your browser window. This gives you persistent access to all controls while you work.

How to Open

1. Click the popout icon in the top-right corner of the ResizeWizard popup
2. A new panel window opens and docks to the right side of your browser
3. The panel stays open as you navigate between tabs

The panel provides the same functionality as the popup but stays visible and accessible. It opens at the same height as your browser window for a seamless side-by-side experience.

ResizeWizard supports keyboard shortcuts for faster workflow. These work when the popup or panel is focused.

Undo & Redo

Every resize action is tracked, so you can undo and redo size changes. This works across presets, custom sizes, and rotate actions. The undo/redo buttons are also available in the toolbar.

Copy to Clipboard

Copy the current window dimensions to your clipboard in width × height format. Useful for documenting sizes or pasting into design tools.

ResizeWizard keeps a log of your recent resize operations. This lets you see what sizes you've used and quickly re-apply a previous size.

• View a list of recent resize operations with dimensions and timestamps
• Click any history entry to re-apply that size
• History is stored locally and persists between sessions

ResizeWizard supports both dark and light themes. By default, it follows your system's color scheme preference. You can also manually switch themes.

Changing the Theme

1. Open the ResizeWizard popup or panel
2. Click the theme toggle icon (sun/moon) in the toolbar
3. The theme switches immediately between dark and light mode

Your theme preference is saved and persists across sessions. If you have Chrome Sync enabled, your theme preference syncs across devices.

Keep your saved sizes, preferences, and settings synchronized across all devices where you're signed into Chrome.

Enabling Sync

1. Open the ResizeWizard popup and go to Settings (gear icon)
2. Toggle Chrome Sync to on
3. Your saved sizes and settings will sync automatically via your Chrome account

ResizeWizard Pro unlocks additional features for power users. Pro is available as an annual subscription.

Pro Features

• Unlimited saved sizes (Free is limited to 5)
• Export & import saved sizes as JSON
• Chrome Sync across devices
• Priority support

Activating Your License

1. After purchasing, you'll receive a license key via email (format: XXXX-XXXX-XXXX-XXXX)
2. Click the ResizeWizard extension icon in Chrome
3. Open Settings (gear icon)
4. Paste your license key in the License section
5. Click Activate

Your license is valid for 1 year and can be activated on up to 3 devices. You can deactivate a device at any time to free up a slot.

Export & Import

Pro users can export all saved sizes as a JSON file for backup or transfer. To export, go to Settings and click Export Sizes. To import, click Import Sizes and select a previously exported JSON file.