Tiny Logo
Log In

The best WYSIWYG editor for email marketing software

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

Get TinyMCE FREEExplore Premium Plans
Edit
Settings
Send or Schedule
Actions ▾
Tiny Logo
Tiny Logo
Tiny Logo

Update your email preferences or unsubscribe.
Tiny Technologies | 2100 Geng Road, Palo Alto, CA 94303 USA

Content
Text content imageDivider content imageImage content imageImage group content imageSocial content imageButton content imageFooter content image

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.

Email starter config

Without code tipsWithout code tipsWith code tips

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

1<!doctype html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>Marketing email editor using inline mode</title>
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
8    <script>
9        var tokens = [
10            { text: "name.first", value: "{{name.first}}" },
11            { text: "name.last", value: "{{name.last}}" },
12            { text: "name.full", value: "{{name.full}}" },
13            { text: "email.home", value: "{{email.home}}" },
14            { text: "email.work", value: "{{email.work}}" },
15        ];
16
17        tinymce.init({
18            selector:'.tinymce',
19            inline: true,
20            plugins: 'link lists image emoticons advcode editimage linkchecker powerpaste',
21            toolbar: 'styles | bold italic forecolor backcolor link image emoticons tokens | align bullist numlist | code removeformat',
22            menubar: false,
23            target_list: false,
24            object_resizing : false,
25            formats: {
26                h1: { block: 'h1', styles: { fontSize: '24px', color: '#335dff' } },
27                h2: { block: 'h2', styles: { fontSize: '18px' } },
28                calltoaction: { selector: 'a', styles: { backgroundColor: '#335dff', padding: '12px 16px', color: '#ffffff', borderRadius: '4px', textDecoration: 'none', display: 'inline-block'} }
29            },
30            style_formats: [
31                { title: 'Paragraph', format: 'p' },
32                { title: 'Heading 1', format: 'h1' },
33                { title: 'Heading 2', format: 'h2' },
34                { title: 'Button styles'},
35                { title: 'Call-to-action', format: 'calltoaction' },
36            ],
37            placeholder: "Write here...",
38            toolbar_mode: "wrap",
39            noneditable_regexp: /\{\{[^\}]+\}\}/g,
40            setup: (editor) => {
41                editor.ui.registry.addIcon('token', '<svg enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h24v24h-24z" fill="none"/><path d="m21 12-4.37 6.16c-.37.52-.98.84-1.63.84h-3v-2h3l3.55-5-3.55-5h-10v3h-2v-3c0-1.1.9-2 2-2h10c.65 0 1.26.31 1.63.84zm-11 3h-3v-3h-2v3h-3v2h3v3h2v-3h3z"/></svg>');
42                editor.ui.registry.addMenuButton("tokens", {
43                    icon: "token",
44                    tooltip: "Insert token",
45                    fetch: (callback) => {
46                        var items = tokens.map((token) => {
47                            return {
48                                type: "menuitem",
49                                text: token.text,
50                                onAction: () => {
51                                    editor.insertContent(token.value);
52                                }
53                            }
54                        });
55                        callback(items);
56                    }
57                });
58            },
59        });
60    </script>
61    <style>
62        body {
63            padding: 0;
64            margin: 0;
65            box-sizing: border-box;
66
67        }
68
69        .container {
70            background-color: #f9f9fb;
71            margin: 0 auto;
72            max-width: 1000px;
73        }
74
75        .email {
76            max-width: 840px;
77            margin: auto;
78        }
79
80        .toolbar {
81            background-color: #fff;
82            height: 42px;
83            padding-top: 48px;
84            border-bottom: 1px solid rgba(0, 0, 0, .1);
85        }
86
87        .tinymce:focus {
88            border-radius: 0.5px;
89            box-shadow: 0 0 0 4px #fff, 0 0 0 7px #99afff;
90            outline: 0;
91        }
92
93        .mceNonEditable {
94            background-color: #e7ecff;
95            padding: 1px 0;
96            color: #4059b3;
97            font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
98            font-size: 0.9375em;
99        }
100    </style>
101</head>
102<body>
103
104<div class="container">
105    <div class="toolbar"></div>
106    <div class="email">
107        <table style="background-color: #f9f9fb; width: 100%; padding: 32px 0" border="0">
108            <tr>
109                <td align="center">
110                    <table border="0" width="100%" style="max-width: 660px; width: 100%; background-color: #ffffff; border: 2px solid #dfe3ec; border-radius: 8px; overflow: hidden" cellpadding="0" cellspacing="0">
111                        <tr>
112                            <td style="padding: 16px 64px 0;">
113                                <div class="tinymce" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
114                                    <p>Hey {{first.name}}</p>
115                                    <h1 style="font-size: 24px; color: rgb(51, 93, 255);">What's your email editing project?</h1>
116                                    <p>Are you:</p>
117                                    <p><strong>Building a new email client</strong> (i.e. the next Gmail) and need rich text editor functionality?</p>
118                                    <p><strong>Building email marketing software</strong> (i.e. the next Mailchimp) and need to add more rich text editor functionality, or enhance the default editor?</p>
119                                    <p>Then use the only WYSIWYG editor that is trusted by 1.5M devs.</p>
120                                    <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;" href="https://tiny.cloud/pricing">Get started with your 14-day free trial</a></p>
121                                </div>
122                            </td>
123                        </tr>
124
125                        <tr>
126                            <td style="padding: 0 64px 16px;">
127                                <table border="0" style="width: 100%;">
128                                    <tr>
129                                        <td style="width: 48%; vertical-align: top;">
130                                            <div class="tinymce" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
131                                                <p><img src="https://img.icons8.com/doodle/96/000000/critical-thinking.png" alt="" width="96" height="96"></p>
132                                                <h2 style="font-size: 18px;">Curious about TinyMCE?</h2>
133                                                <p>Play with this demo to see how our email WYSIWYG editor works.</p>
134                                            </div>
135                                        </td>
136
137                                        <td style="width: 4%"></td>
138
139                                        <td style="width: 48%; vertical-align: top;">
140                                            <div class="tinymce" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
141                                                <p><img src="https://img.icons8.com/doodle/96/000000/electrical--v1.png" width="96" height="96"></p>
142                                                <h2 style="font-size: 18px;">Try Premium plugins</h2>
143                                                <p>Sign up for a 14-day trial and try out all our premium plugins.</p>
144                                            </div>
145                                        </td>
146                                    </tr>
147                                </table>
148                            </td>
149                        </tr>
150
151                        <tr>
152                            <td style="background-color: #eff0f6; padding: 24px 64px;">
153                                <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>
154                                <p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;">Tiny Technologies | 2100 Geng Road, Palo Alto, CA 94303 USA</p>
155                            </td>
156                        </tr>
157                    </table>
158                </td>
159            </tr>
160        </table>
161    </div>
162</div>
163</body>
164</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

"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."

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:

Tables icon
Tables
Faster Speed to Market
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:

Delight Your Users
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:

HTML You Can Trust

HTML email editing tool

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.

TinyMCE email editor

All the WYSIWYG features
developers (and users) expect

Email Creation

Email Creation

Enable users to create amazing emails without needing to know code

  • Use Tables to properly lay out emails according to design best practices
  • 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
  • Non-editable plugin protects your app’s dynamic mail merge tags from being edited, as well as protecting key sections such as the head or footer
  • 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
  • Autosave avoids the risk of losing content

Clean HTML

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
  • CSS styles like font-size and color are applied inline for optimal 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

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

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 Pro and globally consistent spelling with simultaneous checking of up to 13 languages (plus medical terminology)
  • Restrict font choices to only those available on popular email clients
  • Optional Advanced 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 and ARIA)

Image Management

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

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 Pro

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

TinyMCE toolbar menu

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

TinyMCE toolbar menu

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

TinyMCE toolbar menu

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 ->

Related content

The Great Debate Buy vs Build Rich Text Editors

WHITEPAPER

The Great Debate Buy vs Build Rich Text Editors

Enhance your email marketing tool with a great WYSIWYG editor

PRODUCT-LED GROWTH

Enhance your email marketing tool with a great WYSIWYG editor

How to add an emoji picker to the textarea

HOW-TO USE TINYMCE

How to add an emoji picker to the textarea

Morning Brew

CASE STUDY

Morning Brew

Get TinyMCE FREELet’s chat
Tiny logo

Stay Connected

Products

TinyMCEDriveMoxieManager
© Copyright 2022 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.