DEV Community

loading...
Cover image for This Parcel is for Email Development and it's brilliant!

This Parcel is for Email Development and it's brilliant!

hunzaboy profile image Aslam Shah ・2 min read

If you follow me or have read my older posts then you know that I write about Email Development and also share tools and resources related to frontend development.

I was looking for an online email code editor but was unsuccessful. I tried to use Codepen, JSFiddle, etc but the problem with these editors is that they are more focused on web development and not email development. I did enjoy using Postdrop however it lacked the full-blown editor features.

Meet Parcel - The Code Editor for Email Development

I recently stumbled upon Parcel editor and I was blown away by the UX and quality. I thought to share it with you. It is free to use and the email editing experience is seamless.

The is how it looks like:

Alt Text
Click here to visit Parcel Editor

The editor structure is just like a normal editor with File Structure on the Left, HTML Code editor in the middle, and Preview on the Right. It is also equipped with some good features like template sharing, Send Test Email, and many more.

Now Let us edit/create an email template!

1. Get any HTML Email Code

Alt Text
Get any HTML Email template. I am going to use Codedmails to find a free template. Open any email template preview of your choice and click on Copy Code to copy the HTML. I am using Change Your Password Template - Dineos Theme for this example.

2. Paste it in Parcel

Once you paste the code, this is how it will look now:

Alt Text

3. Inspect and Edit

Alt Text

Parcel comes with some great features which can be accessed in the top right of the preview panel ( image above ) e.g

  1. Focus Mode - Scroll with the Preview/Code
  2. Inspect Elements - Inspect Elements to quick lookup and edit
  3. Email Accessibility - For visually impaired
  4. Toggle Images ( to see how emails will look when images are OFF by default e.g in Outlook )
  5. Emails Previews in Tablet, Mobile, and Desktop

4. Send a test email

Once you are done with editing the template, you can use the Send Test function to send a test email.

There are many more features of Parcel editor and I haven't covered all of them. Feel free to visit Parcel and tinker around.

Thanks for reading!

Do you use any other online email editor? Please share in the comments below

Happy Emailing!

Discussion (0)

pic
Editor guide