This update brings some awesome changes to text editing, giving you more flexibility when writing. Text sections now support a combination of formats: headers, lists, and paragraphs 👇

As seen in the video above, this makes it easier to write long-form content, as you can quickly change paragraphs to headers.

As well as block formats, the introduction of Inline Text Styles also gives you more control of the spacing and presentation of text. Find out more below:

Inline Text Styles

Now style changes are made based on what you have selected in the editor. That means you can change the appearance of individual paragraphs, or even words. Here's a quick overview:

• Inline Styles: Change the colour and size of individual words:

• Spacing and Line-height: Add spacing to any element selected. You can also highlight a group of elements, and adjust the spacing between them:

• Align Individual Elements: Alignment is also based on what you select - so you can now highlight individual elements such as a single paragraph or header, and give it its own alignment:

Check out this Twitter thread for more details, and how it has come together.

This release's updates consist of performance and enhancements to the Editor, as well as a new image uploader, and other fixes:

Performance and Core Enhancements

• Performance increase of 3-4x faster rendering - the rendering performance has been worked on. Heavy components such as sliders, switches and popover menus have been replaced with lightweight, faster rendering versions. The performance increase is most notable on older computers with lower memory

• Undo and Redo Improvements – Undo and redo have been completely rebuilt to be more responsive and able to track changes much more efficiently.

• Autosave Improvements – Saving has been re-implemented, saving at more regular intervals.

Image Uploading

• Image Uploader – An image upload component has now been added to the sidebar. Select an image, and you'll be able to upload from the side panel.

• Image Importer – An input field has been added to the sidebar to import images directly from an image link.
  

  Other Updates and Fixes

  • Inlined Email CSS – When exporting emails, the styles are inlined, so they're not lost on different email clients that do not support CSS Stylesheets

  • Fixed Preheader Text Field - Updating the preheader box automatically updates the preheader box on the export newsletter modal (when exporting to SengGrid/HubSpot)

  • Consistent Editing Toolbars – Toolbars now show consistently, regardless of the type of element selected.

  • Progress Toasts – New toast notifications that show the progress of an action (like exporting a letter or sending a test email)
    
    

With the new Adaptive Images feature, images in Letter automatically scale and adapt to any size. No more time wasted cropping and stretching. Just drag from the image resize handles and the image will fill out the available space.

See the video

Check out this video of it in action:

New Image Updates

Here's what's changed when resizing and working with images:

• Adaptive Images: By default, images now adapt and fill the available space when inserted or resized. This works when resizing images, and when new images are inserted or imported.

• Preserve Aspect Ratio: Hold shift while dragging to maintain the image aspect ratio whilst resizing.

• Double click for Image Editor: Now you can double click images to open the image editor for cropping and filters.

• Crop to Aspect Ratio: The default crop shape of the Image Editor is now set to the same aspect ratio as the image you open. This lets you preview exactly how your image will look on the card during the crop, ensuring you get a perfect fit.

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: