Resizing

Parcel has a built-in preview that lets you see your email as it would appear in a browser. You can resize the preview window to any width or hide it entirely.

You can easily resize the width of the browser preview. Click and drag the left boundary to expand/contract, and you'll see the pixel count in the bottom left.

Silent video of the full Parcel window. A sample email is displayed in the Code Editor and Browser preview. The bottom left corner of the preview displays the pixel count of the width as the cursor drags the boundary.
Screen recording demonstrating how to resize the Browser preview window
Tip

You can resize the preview window from the command palette

Hide the Preview

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.

Silent video of the full Parcel window. A sample email is displayed in the Editor and Preview. The user clicks on the "Toggle Preview" button in the upper right corner of the Editor, which hides the Preview and expands the Editor to the full width of the screen. The user clicks the same button again to restore the Preview.
Screen recording demonstrating how to toggle preview window

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.

Silent video of the full Parcel window. A sample email is displayed in the Editor and Preview. The user clicks on the "Responsive Mode" button at the top of the Preview. The full pane preview is replaced with a miniature preview, which has resizable handles on the sides and corners. Above this new preview are two text fields, which denote the width and height in pixels. The user enters in a new width value, and the responsive preview resizes to the new dimensions, now partially off screen. The user navigates to the Zoom controls above the preview and clicks "Zoom out" several times until the preview is fully back in view. The user clicks and drags the resizing handle on the bottom of the preview, stretching it to a much taller size. This is repeated with the right handle to further adjust the width of the preview.
Screen recording showing responsive mode

Return to the default preview by pressing the button again.