Preview

The Preview window exists by default as a pane on the right side of your screen. It's a live preview of your current code that auto updates whenever you stop typing. You can resize the preview, explore different screen dimensions, block images, or simulate visual impairments.

Silent video of the full Parcel window. A sample email is displayed in the editor and the preview. The user types text in the editor, and the changes are immediately reflected in the Preview on the right. The user navigates to a section of code that includes the background-color attribute with an rgb value pre-filled. To the right of the background attribute is a small colored square, which matches the rgb value supplied. The user clicks on the square, which reveals an inline window with a large rainbow color gradient. The user clicks elsewhere on the gradient, which switches the rgb value on that line to the selected color. The preview updates to reflect the newly chosen background color.

Raw Preview

If you prefer to use the browser's built in developer tools, you can view the HTML content of an email rendered in your browser. Right click on any file in the file tree and then click Open raw in new tab.

Silent video of the full Parcel window in a browser tab. The file tree on the left contains a folder and two files. The user right clicks on a file, revealing a menu with several options. The user clicks the "Open Raw in New Tab" option, and the email Preview is opened in a new browser tab. The user returns to the Parcel tab and opens the same email. The user types text in the editor, and the changes are immediately reflected in the Preview on the right. The usr returns to the preview in the other tab and it refreshes to reflect the new changes.

Pop out Preview

If you like working with multiple screens, you can pop out the Preview into a separate tab.

The pop out preview has the same functionality as the in-window Preview.

Silent video of the full Parcel window in a browser tab. The user clicks on the Popout preview button in the upper right corner of the window. A new browser tab opens with the email preview and a set of preview modifying buttons at the top. The user clicks on the "Layout" button, revealing a menu with two options - "Browser" and "Grid". "Browser" is checked. The user switches to "Grid" layout, which replaces the on screen preview with a new menu. This menu, titled "Previews", contains a list of common phone and computer screen dimensions.

Simply close the preview tab to restore your workspace to the default layout.

Silent video of the popout Preview in a browser tab. The user returns to the browser tab with the full Parcel window, which does not contain the Preview on the right. The user types text in the editor, and the changes are immediately reflected in the Preview on the right. The usr returns to the preview in the other tab and it reflects the new changes. The user closes the Preview browser tab, and the Preview pane is returned to the right side of the editor.