Now you can change the alignment of text, images, and elements in Letter components 🎉. It works for individual elements, or larger groups:

Align Elements

Select an element, and use the 'Align' buttons from the sidebar to change its alignment position (left, right or centre).

Group Align

You can also set the alignment of entire blocks. For example, if you select a row within a component (by clicking towards the edge of a row), you can then align all the elements within the selection at once:

Export Letter templates directly to your SendGrid Design Library! SendGrid is an affordable way to send email newsletters - and now you can use it with Letter 🎉

How it works

Just select SendGrid from the export options, and press export:

As shown above, the first time you export to SendGrid, you need to paste in your SendGrid API Key to set up the connection. All future exports don't require this step.

You can connect or disconnect from SendGrid from your account settings too:

How to get your SendGrid API Key

A SendGrid API key can be created in a couple of steps. It's important that you create a restricted API Key – Letter only needs access to your SendGrid Design Library to upload templates. Permissions for sending emails or anything else are not needed.

1. Log into SendGrid, and go to Settings > API Keys, and click the 'Create API Key' button:
   

2. Create a restricted API Key, only giving access to the Design Library:
   

3. SendGrid will then show you your API key - just paste that into Letter when prompted.

That's it! If you're looking for other export options, Hubspot is also available, with Mailjet and Mailchimp coming next. You can also always export the code to paste in any other email marketing platform.

Letter to Hubspot is here 🎉, the first of the Letter export plugins. Read about it below, along with a couple more updates (Account settings layout, and first Pro customers 💙)

This will let you export templates from Letter to Hubspot in one click. See the video for an overview:

How to access it

You can access Hubspot Export from the export button in the top right of the editor. Along with the previous export options, you'll now see a new one called 'Export to Email Platform':

• Copy to clipboard

• Open in CodePen

• Send Test Email

• 🆕 Export to Email Platform 💥

Upon selecting it, a list of supported email platforms will be presented in a modal. Hubspot is available right now, and you'll now also see that Mailjet and Mailchimp are coming soon. If you have a preference, get in touch!

Account Settings layout

This release also includes a new Account Settings layout, with a plugins tab to see what's available:

This feature is available for Pro members only. If you have any questions about Pro, or using Letter with your own templates, let me know.

Thank you for supporting Letter!

Also, a massive thanks to the first Letter Pro customers! This has been an awesome surprise, as I hadn't promoted the app was for sale yet. In what has been such a tough year for us all, your support means a lot, and it makes building the vision possible.

Pretty boring updates this week. These were mostly to ensure the editor works smoothly in Safari browser:

• Padding and margins calculated by getstyle

• Allow <div> selection as a container in canvas

• Fix Safari white screen bug

• Switch editor components from sandbox iFrames to divs - iframes cause bug in Safari

• Make inspector relative to the canvas instead of iframes

• Deselect editor when window is resized

• Remove inspector when component menu is opened

• Default to pixels for font unites when there is no unit

• Calculate image sizes based on computed styles instead of attributes

The upgraded Inspector lets you change properties such as font styles, margin, padding, and colour for any element you've selected. Select an element from the canvas, and the Inspector panel will change to show editable properties for that element. Check it out in this gif (also on Twitter):

The Inspector builds on the Element Selector from the last release. However, as well as seeing the guides for padding and margins, you can now change all these properties 🎉:

Text Styles

• Bold

• Italic

• Underline

• Line Height

• Text Colour

Layout

• Margin

• Padding

In the future, more properties will be added, such as background colour... or anything that's requested. Here's what else is new this release:

Other Improvements and Fixes:

• Drag and drop fix: order by free components first, to enable free and demo members to easily access free components

• Close the components menu if the canvas area is clicked

• Safari freezes when changing tabs sometimes - disable the inspector and editor when the user changes tabs so it no longer can freeze.

• Replace the code editor in the code inspector panel with a simple text block. No longer need to load an entire editor until the edit code modal is shown.

• Fix the loading spinner size of the content import button

• Allow users to select DIV elements in the inspector

• Undo/Redo on content import breaks on Safari, so removed it for now

• Inspector: Disable margin inspector for table cells (don't need to alter the margin of tables, only the elements within)

• Only show the text inspector if the node is a text node

The new element selector gives you more insight and control when editing your newsletter. Hover over and select different elements from the canvas, and see the structure of your newsletter with margin and padding guides:

New! A library to manage and host all your images:

As well as performance improvements and bug fixes, this update includes a newly improved template system that ensures Letter has much better support for any email template. So if you've got your own template, it will work seamlessly with Letter. Here are all the small updates that make things tick:

• New template variables makes sure Letter works with templates of any width

• Faster initial loading time through code splitting

• Removed unused JS and CSS libraries, reducing overall bundle size from 16mb to 3.6mb

• Immediately initialize editors so the canvas loads faster

• Width of draggable components from side menu optimised for any template

• Smoother toolbar behaviour in the editor for easier writing

• Prevent toolbars and content import popup overlapping

• Remove unnecessary database polling

• Fix for cursor grabbing bug (sometimes the cursor could get stuck as the 'grabbing' pointer)

• Email notifications when you sign up or purchase Letter

• Newly added sign up/sign in pages (previously these were only modals, with no direct url)

• Drag and drop bugs fixed for Safari browser (sometimes, the browser would freeze if you dragged from the wrong part of the drag handle - now resolved)

• Placeholders for premium components

• Color picker positioning fixed - previously you couldn't select the left side of the colour picker properly

• Placeholder text on input fields added in account settings

• Removed the invite system

• Recaptcha on registration page

• Pricing pages are viewable for all including logged out members

• Webhooks for payments

• List user invoices in profile

• Cancel subscription button in billing section

A raft of new upgrades to the editor, with a focus on making long-form content easier to create.

Quick Insert: Add Headers, Images and Lists...anywhere!

Now you can insert images, headers, or list elements into the body of any content block using the new 'quick insert' button.

How it works: When you hit the return key to start a new line, the 'quick insert' button appears, from which you can easily insert different types of content:

Paragraph/Heading Format

Change the format of any text in the editor. For example, you can change paragraphs to headers, (including h1, h2, h3, and h4), or headers to paragraphs.

This gives much more flexibility when writing long form content:

Emoji Input

A fun update! Here's an easier way to insert emojis from the toolbar:

• More flexible preview mode in code editor - now you can drag and resize the code and preview panels to suit your needs

• Increase contrast of save button and code colours

• Bug Fix: Now possible to paste over entire code of a component without the magic import breaking.

Now

• Fluid resizing using a draggable pane:

Before

• Preset sizes only: restricted to desktop, tablet and phone