Create your first component

Learn how to create a component in Parcel.

Creating a component

You can create a new component by clicking the + button in the file explorer, and clicking New Component (just as you would a new file or folder).

Up close image of the sidebar. The user clicks the plus icon to the right of the Files header. This reveals a menu with five options. The second from the top is "New Component."
Screenshot showing how to create a new component

Component filename

Give the component a descriptive filename. Component filenames cannot contain /,\,|, <, >, :. ",?,*, . and must be less than 100 characters. You can differentiate files, folders, and components in the file explorer by their icon.

Up close image of the file explorer, which contains a folder, an email, and a component.
Screenshot showing the different icons for folders, files, and components

The component filename (as seen in the file explorer) is unimportant for component use.

Component name

After you select a component in the sidebar, the component editor window will appear. At the top of this window is the Component Name. This is how you will reference components in emails. A component name is the same as the filename by default, but you can change this as as you see fit. Component names can only contain letters, numbers, and hyphens - no other characters are permitted, and they must start with a letter. They cannot contain consecutive hyphens (--) or exactly match HTML reserved keywords (ex: 'button').

Up close image of the file explorer with a component open. The component filename (in the file explorer on the left) is "My First Component." At the top of the editor, the component name (how you reference the component in an email) is "my-first-component."
Screenshot showing the component filename and component name

Getting started

Only <component>, <fieldset>, and <style> tags are allowed at the top level in a component. Attempting to use other tags at the top level will result in a warning.

Everything inside a <component> </component> tag will render when you add it to an email. Let's start with a simple component called my-first-component:

<component>Did you know that prairie dogs live in networks of tunnels called dog towns?</component>

If you use this component in an email:

<html>
  <body>
    Hello!
    <my-first-component></my-first-component>
  </body>
</html>

Then this would be the resulting source code:

<html>
  <body>
    Hello!
    Did you know that prairie dogs live in networks of tunnels called dog towns?
  </body>
</html>

Any changes made to the component will propagate to every instance of the component's use.

Jumping back to the component

When you use a component, you may want to quickly jump back to it. You can do so by pressing 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
Previous ArticleNext Article