The best WYSIWYG email editor for email marketing software

Building or extending. Creating or converting.
No matter the project, TinyMCE works best.

Edit

Settings

Send or Schedule

Actions ▾

The email HTML editor that delivers

Integrating TinyMCE’s WYSIWYG text editor into your tech stack ensures you deliver your marketing and ROI goals. Plus, your developers have full control of the code, UI, configuration and integrations, while your non-technical users can create, manage and modify every type of content in your messaging app, email marketing or martech software.

WYSIWYG email editor starter config

Without code tipsWithout code tipsWith code tips

The basic editing experience every email software should start with: includes all the familiar editing controls your users expect plus Link Checker, Emojis, Image Editing and more.

1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>Marketing email editor using Multi-Root Editing</title>
6<meta name="viewport" content="width=device-width, initial-scale=1">
7<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
8<script>
9  tinymce.init({
10    selector: '#editor',
11    plugins: 'ai advcode advtemplate a11ychecker autocorrect autolink emoticons image inlinecss link linkchecker lists markdown mergetags powerpaste tinymcespellchecker help',
12    toolbar: 'undo redo | aidialog aishortcuts | styles | bold italic forecolor | link image emoticons | align | mergetags inserttemplate | spellcheckdialog a11ycheck | code removeformat | markdown',
13    toolbar_sticky: true,
14    menubar: false,
15    height: 1020,
16    editable_root: false,
17    editable_class: 'tiny-editable',
18    elementpath: false,
19    visual: false,
20    link_target_list: false,
21    link_list: [
22      { title: "Features", value: 'https://www.tiny.cloud/tinymce/features/' },
23      { title: "Docs", value: 'https://www.tiny.cloud/docs/tinymce/latest/' },
24      { title: "Pricing", value: 'https://www.tiny.cloud/pricing/' }
25      ],
26    object_resizing: false,
27    formats: {
28      h1: { block: 'h1', styles: { fontSize: '24px', color: '#335dff' } },
29      h2: { block: 'h2', styles: { fontSize: '20px' } },
30      largetext: { block: 'p', styles: { fontSize: '20px' } },
31      calltoaction: { selector: 'a', styles: { backgroundColor: '#335dff', padding: '12px 16px', color: '#ffffff', borderRadius: '4px', textDecoration: 'none', display: 'inline-block' } }
32    },
33    style_formats: [
34      { title: 'Paragraph', format: 'p' },
35      { title: 'Heading 1', format: 'h1' },
36      { title: 'Heading 2', format: 'h2' },
37      { title: 'Large text', format: 'largetext' },
38      { title: 'Button styles' },
39      { title: 'Call-to-action', format: 'calltoaction' },
40      ],
41    ai_shortcuts: [
42      { title: 'Format as marketing email', prompt: 'Turn this content into an HTML-formatted marketing email in fixed-width and mobile-friendly table form, following screen width best practices' },
43      { title: 'Generate call to action', prompt: 'Generate an appropriate and short call to action for this email, in the form a button.' }
44    ],
45    images_file_types: "jpeg,jpg,png,gif",
46    spellchecker_ignore_list: [ 'i.e', 'Mailchimp', 'CSS-inlined' ],
47    mergetags_list: [
48    {
49      title: "Contact",
50      menu: [{
51        value: 'Contact.FirstName',
52        title: 'Contact First Name'
53      },
54      {
55        value: 'Contact.LastName',
56        title: 'Contact Last Name'
57      },
58      {
59        value: 'Contact.Email',
60        title: 'Contact Email'
61      }
62      ]
63    },
64    {
65      title: "Sender",
66      menu: [{
67        value: 'Sender.FirstName',
68        title: 'Sender First Name'
69      },
70      {
71        value: 'Sender.LastName',
72        title: 'Sender Last name'
73      },
74      {
75        value: 'Sender.Email',
76        title: 'Sender Email'
77      }
78      ]
79    },
80    {
81      title: 'Subscription',
82      menu: [{
83        value: 'Subscription.UnsubscribeLink',
84        title: 'Unsubscribe Link'
85      },
86      {
87        value: 'Subscription.Preferences',
88        title: 'Subscription Preferences'
89      }
90      ]
91    }
92    ],
93    advtemplate_templates: [
94      {
95        title: "Newsletter intro",
96        content:
97          '<h1 style="font-size: 24px; color: rgb(51, 93, 255); font-family:Arial;">TinyMCE Newsletter</h1>\n<p style="font-family:Arial;">Welcome to your monthly digest of all things TinyMCE, where you&quot;ll find helpful tips, how-tos, and stories of how people are using rich text editing to bring their apps to new heights!</p>',
98      },
99      {
100        title: "CTA Button",
101        content:
102          '<p><a style="background-color: rgb(51, 93, 255); padding: 12px 16px; color: rgb(255, 255, 255); border-radius: 4px; text-decoration: none; display: inline-block; font-family:Arial;" href="https://tiny.cloud/pricing">Get started with your 14-day free trial</a></p>',
103      },
104      {
105        title: "Footer",
106        content:
107          '<p style="text-align: center; font-size: 10px; font-family:Arial;">You received this email at because you previously subscribed.</p>\n<p style="text-align: center; font-size: 10px; font-family:Arial;">{{Subscription.Preferences}} | {{Subscription.UnsubscribeLink}}</p>',
108      },
109    ],
110    content_style: `
111      body {
112        background-color: #f9f9fb;
113      }
114
115      /* Edit area functional css */
116      .tiny-editable {
117        position: relative;
118      }
119      .tiny-editable:hover:not(:focus),
120      .tiny-editable:focus {
121        outline: 3px solid #b4d7ff;
122        outline-offset: 4px;
123      }
124
125      /* Create an edit placeholder */
126      .tiny-editable:empty::before,
127      .tiny-editable:has(> br[data-mce-bogus]:first-child)::before {
128        content: "Write here...";
129        position: absolute;
130        top: 0;
131        left: 0;
132        color: #999;
133      }
134    `
135  });
136</script>
137<style>
138  body {
139    margin: 1rem 2rem;
140    font-family:Arial, sans-serif;
141  }
142
143  main {
144    max-width: 980px;
145    margin: auto;
146  }
147</style>
148</head>
149
150<body>
151<main>
152  <textarea id="editor">
153
154    <table style="background-color: #f9f9fb; width: 100%;" border="0">
155      <tr>
156        <td align="center">
157
158          <table border="0" width="100%" style="max-width: 660px; width: 100%; background-color: #0b132c; border: 2px solid #eee; border-radius: 8px 8px 0 0; overflow: hidden" cellpadding="0" cellspacing="0">
159            <tr>
160
161              <td style="padding: 32px 8px 16px 64px;" width="50%">
162                <img src="images/sbc-cms-template-logo.png" alt="The Tiny Technologies logo" class="tiny-logo" width="120" data-mce-src="images/sbc-cms-template-logo.png">
163                <div class="tiny-editable" style="font-family: 'helvetica', sans-serif; color: #fff; font-size: 16px; line-height: 1.5;">
164                  <h1>Email creation made simple!</h1>
165                </div>
166              </td>
167              <td style="padding: 16px 64px 16px 8px;" width="50%">
168                <img src="images/sbc-email-cover.png" width="256" height="256" alt="">
169              </td>
170            </tr>
171          </table>
172
173          <table border="0" width="100%" style="max-width: 660px; width: 100%; background-color: #ffffff; border: 2px solid #eee; border-radius: 8px; overflow: hidden" cellpadding="0" cellspacing="0">
174            <tr>
175              <td style="padding: 16px 64px 0;" colspan="2">
176                <div class="tiny-editable" style="font-family: 'helvetica', sans-serif; color: #243376;">
177                  <p style="font-size: 20px; text-align: center;">Hey {{First.Name}},</p>
178                  <p style="font-size: 20px; text-align: center;">What are you building?</p>
179                </div>
180              </td>
181            </tr>
182            <tr>
183              <td style="padding: 0 8px 16px 64px;" width="50%">
184                <div class="tiny-editable" style="font-family: 'helvetica', sans-serif; color: #243376;">
185                  <p style="text-align: center;"><img src="images/sbc-email-webmail.png" alt="Illustration of an email" width="256" height="186"></p>
186                  <p style="text-align: center;">An email client?<br><span style="color: rgb(149, 165, 166);"><em>i.e. the next Gmail</em></span></p>
187                </div>
188              </td>
189              <td style="padding: 0 64px 16px 8px;" width="50%">
190                <div class="tiny-editable" style="font-family: 'helvetica', sans-serif; color: #243376;">
191                  <p style="text-align: center;"><img src="images/sbc-email-marketingemail.png" alt="Illustration of a marketing email" width="256" height="186"></p>
192                  <p style="text-align: center;">Email marketing software?<em><br></em><span style="color: rgb(149, 165, 166);"><em>i.e. the next Mailchimp</em>
193                  </div>
194                </td>
195              </tr>
196              <tr>
197                <td style="padding: 0 64px 16px;" colspan="2">
198                  <div class="tiny-editable" style="font-family: 'helvetica', sans-serif; color: #243376;">
199                    <h2 style="text-align: center; font-size: 20px;">Then use the only WYSIWYG editor <br>trusted by 1.5M developers.</h2>
200                    <p style="text-align: center;"><a style="background-color: rgb(51, 93, 255); padding: 12px 16px; color: rgb(255, 255, 255); border-radius: 4px; text-decoration: none; display: inline-block;" href="https://tiny.cloud">Try TinyMCE free for 14 days</a></p>
201                    <p style="text-align: center;">💙 This email was built with TinyMCE 💙</p>
202                    <p style="text-align: center;">First, import your layout, and then specify editable regions. Next, define your merge tags and content snippets.</p>
203                    <p style="text-align: center;">When it&rsquo;s time to hit send, generate&nbsp;CSS-inlined HTML that&rsquo;s ready for the inbox with one simple API call.</p>
204                  </div>
205                </td>
206              </tr>
207              <tr>
208                <td style="background-color: #eff0f6; padding: 24px 64px;" colspan="2">
209                  <p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;"><a href="#" style="color: #a0a9c5;">Update your email preferences</a> or <a href="#" style="color: #a0a9c5;">unsubscribe</a>.</p>
210                  <p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;">Tiny Technologies | 2100 Geng Road, Palo Alto, CA 94303 USA</p>
211                </td>
212              </tr>
213            </table>
214        </td>
215      </tr>
216    </table>
217
218  </textarea>
219
220  <p>💡 TinyMCE's <a href="https://www.tiny.cloud/docs/tinymce/latest/inline-css/">Inline CSS</a> plugin can be used to process the editor contents and apply all CSS styles inline, helping to make content ready for the inbox. Open up dev tools and click the button below to see the CSS-inlined editor contents in the console.</p>
221    <button onclick="tinymce.get('editor').plugins.inlinecss.getContent().then((value) => { console.log(value.html); });">Get Inlined CSS</button>
222</main>
223
224</body>
225</html>

"This was exactly one of those upgrades that made our tool more usable. The bigger the feature set people have at their disposal, the more they will use the tool, and the more useful it will be for them. That’s exactly what we’re looking to do with every feature upgrade that we implement, and that’s what Tiny helped us do here."

Matt Byrom|Managing Director, Project.co

"TinyMCE is an easy-to-use, intuitive tool, and everyone is happy using it. The way that we have been able to customize the editor is fantastic."

Paul Caisley|Founder & Digital Studio Director, El Roboto

"The amount of money that our clients were spending on email marketing was ridiculous, but TinyMCE helped us build a more cost-effective solution. It just makes everything nice and easy for them - it's a massive difference. We wouldn’t be able to work without it."

Rob Wells|CEO, DDSN Interactive

"Offering customizable templates with Tiny has helped us grow and helps our customers differentiate themselves in the market. Thanks to Tiny, our customers have been able to take control of their own marketing and branding."

Mariya Nomanbhoy|COO, Sighten

When you need the best
WYSIWYG email editor

Our editor delivers the best

Faster speed-to-market

Save years of developer time and hundreds of thousands of dollars in engineering costs by leveraging our out-of-the-box editor and 24/7 support team. The best WYSIWYG email editor gets you to market faster.

Flexibility to fit into your email creation workflow and provides a variety of options and configurations

Explore features:

Merge Tags

Multi-Root Editing

Delight your users

Our WYSIWYG email editor is built to mimic the tools your users know and love. There’s no ramp-up or steep learning curves – it’s an editing experience your users already know and enjoy.

Spotlight on user experience, with the same tools and buttons your creators are used to using in email editing programs, as well as a clean copy-paste experience

Explore features:

AI Assistant

Templates

HTML you can trust

Take the guesswork out of email creation and publish clean and compliant output from the email HTML editor that’s trusted by 1.5M developers, and over 40% of the world’s websites.

Fits within an enterprise-grade tech stack via 400+ customizable APIs and 12+ framework integrations to create the experience users need

Explore features:

CSS-inlined HTML

Link Checker

Workflow benefits

Developer functionality

WYSIWYG email editor

Every email offers a chance to convert customers, build awareness and engagement. So it's crucial to choose an intuitive WYSIWYG email editor that's feature-rich and easy to use for marketers, content creators, marketing ops, or writers who don’t have coding skills.

Equally, the editor must be totally customizable so your developers can control the back-end, integrate with existing martech stacks and be confident the HTML output is clean, compliant and reads well on email clients.

TinyMCE is downloaded 350M+ times every year and available through either a free, open source license or a paid commercial license.

All the familiar WYSIWYG
features developers (and users) expect

Email Creation

Enable users to create amazing emails without needing to know code

True WYSIWYG email templates with editable and noneditable regions, using Mutli-Root Editing
Insert predefined, read-only Merge Tags (also known as personalization tokens, or mail merge fields) into your content
Help users write better and faster with AI Assistant
Directly import MS Word documents. Export your content to MS Word or PDF with Document Converters
Write, or paste, Markdown directly in the editor, and TinyMCE instantly converts it to rich text
Error-free clean copy-paste from Word, Excel and Google Docs with PowerPaste
With Templates, users can insert premade sections or boilerplate content to accelerate the creation of emails
Make emails fun and improve your open and click through rates with Emoji Picker
Inline Editing and Contextual Toolbar lets users style their content in-place as they navigate through the email layout
Customize the UI with pre-made Skins and Icons or build your own
Allow users to insert predefined or user-defined, dynamic content using Templates
Autosave avoids the risk of losing content

Clean HTML

Avoid spam filters or poor rendering in email clients with clean and compliant code

Generates compliant HTML that’s mobile and desktop friendly
Generate clean and compliant CSS-inlined HTML with Inline CSS, to ensure maximum email client compatibility
Specify your target HTML schema to ensure compliance with email clients
Strict control over the generated HTML with 20+ other content filtering options, including the ability to specify what elements are allowed and disallowed
Use Accessibility Checker to ensure consistent and proper usage of alt tags and other flags spam filters look for

Instant Messaging

Empower users to communicate in real-time with features they know and love

Increase efficiency with powerful and intuitive keyboard shortcuts
Insert images, including animated GIFs with PowerPaste or drag-and-drop functionality
Include rich content from Facebook, Twitter, YouTube and more with Enhanced Media Embed
Convey emotion and tone with the Emoji Picker
Let users share formatted code snippets with the Code Sample plugin
Use Mentions to allow users to tag each other within chats
Autosave avoids the risk of losing content

Quality Control

Avoid embarrassments and protect your brand integrity

Eliminate broken links with Link Checker
Build custom dictionaries to ensure content is on-brand with Spell Checker and globally consistent spelling with simultaneous checking of up to 13 languages (plus medical terminology)
Fix obvious (and not-so-obvious) mistakes before they see the light of day with Spelling Autocorrect
Restrict font choices to only those available on popular email clients
Optional Enhanced Code Editor allows power users to make tweaks to HTML code where needed
Maintain regulatory standards and avoid potential fines and lawsuits with Accessibility Checker (WCAG)

Image Management

Let your users easily upload and insert images into emails

Image Tools lets users apply 10 powerful transformations to their images, including crop, rotate, resize and other filters

Manage your files or images in the cloud with Tiny Drive:

Upload and browse files, and insert images inside TinyMCE
Import existing assets from any connected Google Drive or Dropbox account
Minimal configuration, integrates seamlessly
Secure – uses utilizes JSON Web Tokens (JWT)
Scalable – uses Amazon S3 cloud storage
Note: Tiny Drive is an add-on to TinyMCE

Internationalization

Enable users to send to anywhere in the world, from anywhere in the world

38 fully-vetted, professional UI translations
37 community-contributed UI translations
13 languages supported with Spell Checker

See full demo | Discover integrations | Explore 60+ features

Ready to use TinyMCE for
your project?

Get a quote

How TinyMCE is different from
the alternatives

Unmatched domain experience

Every day, the world’s biggest enterprise brands and growing startups rely on TinyMCE for their mission-critical editing needs. For the last two decades, we’ve consistently innovated to create the acknowledged best-in-class rich text editor, that lets developers and creators do more with less by providing:

Smooth, lightweight code that achieves both speed and flexibility across every major browser
A consistent and reliable release process, providing headache-free upgrades
A reliable enterprise-grade editor that's easily customized and also available through an open-source license
Reusable, modular components, 400+ APIs and 14+ framework integrations

Frameworks

12+ integrations and 400+ flexible APIs

Easily integrates into your tech stack. Enhances your editing experience. 7 first-party and 5 third-party endorsed integrations that make development easier.

Explore integrations →

Hosting

Get TinyMCE two ways Cloud-based or Self-hosted

Get a Free API key to use TinyMCE from the Cloud or Download the SDK for use in your Self-Hosted application.

See how →

Reliable, responsive and future-facing

Every day, our Engineering team solves issues the right way, our Product team encourages perfect results (even if launch dates occasionally slip) and the Customer Success team delivers support that’s reliable, fast and friendly. We’re proud of:

Maintaining industry-leading response rates across dedicated SLAs
96% support ticket customer satisfaction* (Based on Zendesk ratings)
2.84 hr average response time* (August 2021 data)

Help when and where you need it

Enterprise-Grade Support

Responsive, in-house support to help you implement, customize and troubleshoot.

Learn more →

Community

Thousands of questions and answers updated daily on StackOverflow and Github.

Browse questions →

Documentation

Tutorials, quickstarts, code samples and videos to help you deploy faster.

Explore docs →

Collaborative team that grows with you

We let companies focus on their core business, so they don’t have to worry about rich text editing. Product teams can delight their users and creators can work smarter, faster and more productively. Our modus operandi is to be:

Helpful
WYSIWYG and easy to work with
Consultative, partnering with you throughout your stages of growth
Champions of open source and the dev community who make it all possible

Modify TinyMCE to suit custom use cases

Modify TinyMCE to suit custom use cases

Developers have full source code control for endless customizations

Out-of-the-box
UI customization
API customization

Explore Customization →

Looking for projects that
TinyMCE can be used for?

Access use-case specific starter configs
to kickstart your rich text editing project

Content Management Systems (CMS) ->Email & Messaging Platforms ->Document Management Systems (DMS) ->Customer Relationship Management (CRM) ->Workflow & Collaboration Platforms ->Learning Management Systems (LMS) ->Internal & SaaS Applications ->

The best WYSIWYG email editor for email marketing software

The email HTML editor that delivers

WYSIWYG email editor starter config