Resizing

You can easily resize the width of the preview window. The bottom left corner of the preview shows you the current width in pixels. You can drag the preview divider left/right or enter a numerical value and press Enter to resize the preview.

Screen recording demonstrating how to resize the preview window

When you refresh the page, the Preview window will reset to it's 500px default.

If you set the width to less than 100px, you may encounter difficulty using the Developer Tools or the resize input. If you want to hide the preview entirely, you can do so with the Toggle Preview button in the upper right corner of the Editor, the keyboard shortcut CMD/CTRL SHIFT D, or within the command palette.

Screen recording demonstrating how to toggle preview window
Tip

You can resize the preview window from the command palette

Responsive Mode

Responsive mode gives you greater flexibility in your preview/editor layout. Access it with the button in near the center top of the preview. This gives you a resizable preview inside the preview frame. You can set this new preview to any size, using either the dimensions or by dragging the edges. You can also zoom in or out of this preview, letting you see email at full width/height without losing space in the Editor.

Screen recording showing responsive mode

Return to the default preview by pressing the button again.