Tricks & Tips

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.

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.

Screen recording demonstrating the ! expansion

Multi-cursor editing

Inserting multiple cursors at once can make editing repeated code a breeze. Use CMD/CTRL D 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.

Screen recording demonstrating multi-cursor editing

Lorem Ipsum

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.

Screen recording demonstrating the lorem ipsum auto generate feature

Emojis 😃👋

You can add emjois 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.

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.

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.

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 SHIFT OPTION F (on Mac) and SHIFT ALT F (on Windows) and within the command palette.

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
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.