This article illustrates the differences between template editors available in Iterable. For more information on templates and the configuration options available across editors (eg. message type, sender and subject line), see our Templates Overview.
Table of contents
Iterable provides three different types of editors to use when building templates: the WYSIWYG Editor, the Drag-and-Drop Editor, and the Side-by-Side Editor. The following chart describes the pros and cons of each:
- All three editors come courtesy of third-party sources. Feature and future roadmaps are not dictated by Iterable and are subject to change.
- Templates above 102kb will be clipped by some clients. This includes the additional data generated from link rewriting and HTML generated by the editor.
For users who are slightly proficient in HTML and CSS or teams who already have templates saved as HTML files, we recommend using the WYSIWYG editor.
Iterable's WYSIWYG (what-you-see-is-what-you-get) editor is set as the default editor for any new project. When you import a new template, the template editor that populates is the WYSIWYG.
Within the WYSIWYG Editor, you can make copy and content changes and upload images to your template.
You can also update the HTML and CSS code for the template by clicking on Source.
The Drag-and-Drop Editor allows users with no HTML and CSS experience to create email templates by simply dragging structural or content components into the editor and arranging them as needed. Users can use a pre-built template template or create an entirely new template.
Users can also upload images and videos to the Drag-and-Drop Editor through its file manager. Image sizes are limited to 12 MB. For more information, read Bee's Using the file manager document.
The above will display a preview of the video and link users to the video on YouTube or Vimeo. Another option is to embed the video into your email.
Although the Drag-and-Drop Editor is easy to use, it does not allow for much HTML or CSS customization beyond the use of an HTML block.
The Drag-and-Drop Editor is a third-party editor called Bee Editor. Its features and future roadmap are not set by Iterable and are subject to change.
For users or teams who are highly skilled in HTML and CSS, we recommend using the Side-by-Side Editor.
Enable the Side by Side editor in Settings > Project Settings.
In order to enable the Side-by-Side Editor, you will need to disable the WYSIWYG Editor. You cannot use both at the same time.
Disabling the WYSIWYG Editor and enabling the Side-by-Side Editor is done on a per-project basis. Making this change impacts all of the project's users, who will see the Side-by-Side Editor as their main template editor interface.
After you save this change on the Settings > Project Settings page, the Side by Side Editor will appear as the template editor interface when you choose to import a HTML file or create a new template using the WYSIWYG editor.
You can copy and paste your HTML and CSS code into the Side-by-Side Editor to see how your template appears.
You cannot upload images into the Side-by-Side Editor. If you are using the Side-by-Side Editor, you will need to host your own images and reference them in the HTML code of your template using an tag.
Once you create a template in the WYSIWYG or Side-by-Side Editor, you will not be able to open this template in the Drag-and-Drop Editor. The same applies for the Drag-and-Drop Editor: once a template is created in the Drag-and-Drop Editor, you will not be able to open it in the Side-by-Side or WYSIWYG editors.
To learn more about managing base templates, read Managing Base Templates.
In the template editor view, you can view a list of shortcuts and helpers at
any time by hitting