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 🎉:
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:
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:
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.
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:
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:
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.
Fluid resizing using a draggable pane:
Preset sizes only: restricted to desktop, tablet and phone
50 Letter components – responsive and cross-platform. All the Letter components have now been tested in Litmus.com to work across a wide range of email clients, such as:
From mobile to desktop – any screen size!
This update fixes a handful of bugs and enhancements, including input field validation for Content Import:
Validation on import fields: A check for valid links - is the field empty, is the link not formatted correctly etc:
Twitter import: Twitter updated their opengraph settings, so importing tweets was failing. Added a workaround
Outgoing links fix: Make outgoing links in the editor 'unclickable' when the Letter is loading
Image loading state: Add loading state for image cropper (instead of a blank screen when the image is loading)
Unnecessary gallery: Remove gallery option from image toolbar (gallery is not available yet)
Publication archive button: added an actual button on the publication archive instead.
Editable regions: Prevent the arrow key from moving into uneditable regions.
Deselect component issue: Clicking the canvas should deselect the editor - even underneath the action buttons
Component menu fix: auto-close the component menu when code editor opens so they don't overlap.
Component active state: When import button clicked, set the full component to selected and active state
Introducing 2 simple tiers: Free and Pro!
The Free tier gives you enough components to get started. If you need more components and awesome features, Pro will have all you need:
Free members are limited to 1 Letter, but you can modify and export it as much as you like. You also get to use all the powerful features of Letter:
Smart Content Import (Save hours importing content to your templates)
Adobe XD Plugin (currently in beta): Design banners in XD, and import to Letter
Free components to build your letter
Pro gives you unlimited newsletters and access to the full Letter template with 50+ premium components:
Create unlimited newsletters
50+ premium, Litmus tested Letter components
These plans will be available from the app soon. Users on the Early Access program will continue to have full access, and a discount coupon will be provided when Early Access finishes (probably 2021).
You can try Letter without signing up! The demo version is available with a walkthrough guide that shows you how to use the content import feature. By making a demo version available without having to sign up, I hope to save time for everyone. I only want people to create an account if they find the app useful.
It would be easy to gather signups by forcing people to register before trying Letter, but in the long run, it creates another vanity metric. It can result in 100s of users who don’t actually use the app – they only signed up to test it out.