Powerful editor features to help you work productively.
Jumping to a component file
You can press CMD/CTRL + Click on a component to jump to the component file.
Silent video of the full Parcel window. An email containing several custom components is open. The cursor moves to and command clicks on the component's tag in the HTML, and that component is opened in a new editor tab.
Screen recording demonstrating pressing CMD/CTRL + Click to jump to a component file
Auto Generate Basic Email template
In a new email, type ! and hit Enter to auto generate a basic email template. This also works with MJML emails and creates an MJML template.
Silent video of the editor, which is empty. The user types an exclamation point on the first line and hits the Enter key. The exclamation point is replaced with 12 lines of HTML code, forming a basic email template.
Screen recording demonstrating the ! expansion
Multi-cursor editing
Inserting multiple cursors at once can make editing repeated code a breeze. Use CMD/CTRLD to select repeated code and insert a cursor in front of each one. You can also press OPTION and click to insert cursors anywhere in the editor.
Silent video of the code editor, which contains the HTML code for a table with one row and several cells.There is a cursor on each line, inside each <td> tag. The user types additional code on multiple lines concurrently. The user selects the first <td> tag and presses the CMD D keyboard combo repeatedly until each <td> tag is selected. The user then replaces each <td> tag with a <th> tag simultaneously, and repeats the same steps to change the closing tags.
Lorem ipsum is a paragraph of text commonly used as a filler or placeholder for future content. In the editor, you can type "lorem" and press Tab to auto generate a lorem ipsum paragraph for you at your cursor. If you want a specific length of lorem filler text, type lorem# to get that many words of text. Ex: lorem1000 will generate 1000 words of lorem ipsum text.
Silent video of the full Parcel window. A sample email is displayed in the editor and the preview. The user types "lorem" on a line with text, and hits Tab. The word lorem on screen is replaced with a paragraph of lorem ipsum filler text, and the preview updates to reflect this change.
Screen recording demonstrating the lorem ipsum auto generate feature
Emojis 😃👋
You can add emojis anywhere in your email content by typing ":" and the name of the emoji. As you start to type, emojis will be suggested - select the option you want with the either cursor or arrow keys and tab. Click here for a full list of possible emojis.
Silent video of the full Parcel window. A sample email is displayed in the editor and the preview. The user types ":smi" on a line with text, and an inline menu appears with a list of emoticons that begin with those characters. The user selects the first from the list with the Enter or Tab key, and ":smi" is replaced with a smiley face emoji. The user then types ":wave" and adds a waving hand emoji through the same process. The preview updates to include both emojis.
Screen recording demonstrating the emoji feature
Color Picker
Need to quickly find the perfect color for a particular style? Mouse over any color swatch and select the color you need from the color picker. If you click on the RGB values at the top, they'll switch to their corresponding Hex or HSL values.
Silent video of the full Parcel window. A sample email is displayed in the editor and the preview. The user navigates to a section of CSS code that includes the background 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. The user repeats this process several times, picking a new color each time.
Screen recording demonstrating the color picker feature
HTML Entities
Start typing & in the code editor and all possible HTML entities will be suggested. Keep typing until you find the one you want, and then press Enter to insert it.
Silent video of the full Parcel window. A sample email is displayed in the editor and the preview. The user types "&", which reveals an inline menu with a long list of HTML entities. The user scrolls through the list and clicks one option, which replaces the "&" with `& copy;". The preview updates to include a copyright symbol in that paragraph.
Screen recording demonstrating the HTML entities autocomplete feature
If you already have special characters that can be converted to HTML entities and don't want to replace them yourself, check out the HTML Entity transformer.
Auto Formatting
Don't worry about proper indentation and formatting - Parcel takes care of that for you! Click the Format button in the upper right corner of the editor at any time. The format tool is also accessible via the keyboard shortcut SHIFTOPTIONF (on Mac) and SHIFTALTF (on Windows) and within the command palette.
Silent video of the full Parcel window. A sample email is displayed in the editor and the preview. The HTML code in the editor is entirely left justified. The user clicks on the Format button in the upper right corner of the editor, and the code becomes properly indented. The preview does not change.
Screen recording demonstrating the format feature
Highlight Ambiguous Characters
The editor will highlight Unicode "confusables" - characters that look very similar to characters commonly used when programming. Mouse over any highlighted character to see an explanation of why it is highlighted. Note this does not highlight smart quotes.
Screenshot of the editor showing confusables highlighting
Auto Tag Completion and Nested Expansion
Check out the Emmet page for a closer look at tag completion and nested expansion.
Shortcuts
Many Parcel functions have corresponding shortcuts to help you work most efficiently. Learn more about them on the Shortcuts page
Command Palette
The command palette gives you easy access to a ton of additional Parcel features. Check it out on the Command Palette page!
Components
If you are looking for powerful, reusable code blocks, check out Components.
