Tiny Logo
Start trial
PricingContact Us
Log InStart For Free

The best WYSIWYG CMS editor

Building or extending. Headless or traditional.
No matter the CMS, TinyMCE works best

Get TinyMCE FREEExplore Premium Plans
Event Registration Landing Page
CMS avatar
Tiny Logo

A familiar WYSIWYG interface, out-of-the-box

Intuitive and feature-rich, the TinyMCE CMS editor increases content manager productivity and multiplies engagement and collaboration across your organization. Your developers have full control of the code, UI, configuration and integrations, while your non-technical users – teachers, course designers, subject matter experts and administrators – can create, manage and modify every type of content, including formulas and equations, within your CMS platform.

CMS editor starter config

Without code tipsWithout code tipsWith code tips

The basic editing experience every CMS should start with: includes all the familiar editing controls your users expect plus PowerPaste, Accessibility Checker, Image Editing and more.

1<!doctype html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>TinyMCE Landing Page Example</title>
6<meta name="viewport" content="width=device-width, initial-scale=1">
7<link rel="preconnect" href="https://fonts.googleapis.com">
8<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet">
10<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
11
12<script>
13  tinymce.init({
14    selector: '#editor',
15    plugins: 'ai a11ychecker advcode advtemplate advlist advtable anchor autocorrect autosave editimage image link linkchecker lists markdown media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount',
16    toolbar: 'undo redo | aidialog aishortcuts | styles fontsizeinput | bold italic | align bullist numlist | table link image media pageembed | spellcheckdialog a11ycheck code | inserttemplate',
17    toolbar_sticky: true,
18    toolbar_mode: 'wrap',
19    height: 620,
20    editable_root: false,
21    editable_class: 'tiny-editable',
22    elementpath: false,
23    object_resizing: false,
24    resize: false,
25    image_caption: true,
26    images_file_types: "jpeg,jpg,png,gif",
27    style_formats: [
28      {title: 'Heading 1', block: 'h1'},
29      {title: 'Heading 2', block: 'h2'},
30      {title: 'Heading 3', block: 'h3'},
31      {title: 'Paragraph', block: 'p'},
32      {title: 'Blockquote', block: 'blockquote'},
33      {title: 'Fancy list', selector: 'ul', classes: 'fancy'},
34      ],
35    advcode_inline: true,
36    ai_shortcuts: [
37      { title: 'Summarize content', prompt: 'Provide the key points and concepts in this content in a succinct summary.' },
38      { title: 'Improve writing', prompt: 'Rewrite this content with no spelling mistakes, proper grammar, and with more descriptive language, using best writing practices without losing the original meaning.' }
39    ],
40    spellchecker_ignore_list: [ 'CMS', 'devs' ],
41    a11ychecker_level: 'aaa',
42    advtemplate_templates: [
43      {
44        title: "About us",
45        content:
46          '<h2>About our company</h2>\n<p><a href="https://tiny.cloud">XYZ Inc.</a> is a global leader in providing innovative solutions to businesses. We provide our clients with the latest technology, state-of-the-art equipment, and experienced professionals to help them stay ahead of their competition. Our comprehensive suite of services, from cloud computing and big data analytics to mobile and e-commerce solutions, ensures that all of our clients have the resources they need to stay competitive in an ever-changing business landscape. Our commitment to customer service and satisfaction is second to none, and we strive to be a reliable and trusted partner for our clients.</p>',
47      },
48    ],
49    content_css: 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css',
50    content_style: `
51    :root {
52      --bs-primary-rgb: 62, 92, 210;
53      --bs-border-radius: 0;
54      --bs-border-radius-lg: 0;
55    }
56
57    html {
58      font-size: 16px;
59    }
60
61    .tiny-logo {
62      position: absolute;
63      top: 2rem;
64      left: 2rem;
65    }
66
67    h1 {
68      font-size: 2.75rem;
69    }
70
71    h1,
72    h2,
73    h3 {
74      margin-bottom: .5em;
75    }
76
77    ul.fancy li {
78      margin-bottom: .5em;
79    }
80
81    ul.fancy li::marker {
82      content: '✅  ';
83    }
84
85    .tiny-hero {
86      background-image: url(images/sbc-cms-template-cover.png);
87      background-size: cover;
88      background-position: center center;
89    }
90
91    @media screen and (min-width: 768px) {
92      .register-form {
93        margin-bottom: -200px;
94      }
95    }
96
97    form {
98      pointer-events: none;
99    }
100
101    .tiny-editable {
102      position: relative;
103    }
104
105    .tiny-editable:hover:not(:focus),
106    .tiny-editable:focus {
107      outline: 3px solid #b4d7ff;
108      outline-offset: 4px;
109    }
110
111    .tiny-editable:empty::before,
112    .tiny-editable:has(> br[data-mce-bogus]:first-child)::before {
113      content: "Write here...";
114      position: absolute;
115      top: 0;
116      left: 0;
117      color: #999;
118    }
119    `
120  });
121</script>
122<style>
123  body {
124    margin: 2rem;
125  }
126
127  main {
128    max-width: 1100px;
129    margin: auto;
130  }
131</style>
132</head>
133
134<body>
135<main>
136  <textarea id="editor">
137    <div class="container-fluid text-bg-dark pt-5 tiny-hero">
138      <img src="images/sbc-cms-template-logo.png" alt="The Tiny Technologies logo" class="tiny-logo" width="120">
139      <div class="container-lg">
140        <div class="row gx-5 py-5">
141          <div class="offset-xl-1 col-xl-6 col-lg-7 col-md-7 col-sm-12 pt-5">
142            <div class="tiny-editable">
143              <p>This is a sample landing page built using TinyMCE</p>
144              <h1>Adding rich text editing to your CMS</h1>
145              <p><span style="font-size: 22px;">Wednesday, December 16, 2023</span><br><span style="font-size: 22px;">5:00 - 7:00 PM</span></p>
146            </div>
147          </div>
148          <div class="col-xl-4 col-lg-5 col-md-5 col-sm-12 register-form">
149            <div class="bg-primary p-3">
150              <h2 class="text-center my-3">Register now</h2>
151              <form>
152                <div class="mb-2">
153                  <label for="first-name" class="form-label">First name</label>
154                  <input type="text" class="form-control" id="first-name">
155                </div>
156                <div class="mb-2">
157                  <label for="last-name" class="form-label">Last name</label>
158                  <input type="text" class="form-control" id="last-name">
159                </div>
160                <div class="mb-2">
161                  <label for="email" class="form-label">Email address</label>
162                  <input type="email" class="form-control" id="email">
163                </div>
164                <div class="text-center my-3">
165                  <button type="submit" class="btn btn-info btn-lg text-white px-5 py-2">Register</button>
166                </div>
167              </form>
168            </div>
169          </div>
170        </div>
171      </div>
172    </div>
173
174    <div class="container-fluid">
175      <div class="container-lg">
176        <div class="row gx-5 py-5">
177          <div class="offset-xl-1 col-xl-6 col-lg-7 col-md-7 col-sm-12">
178            <div class="tiny-editable">
179              <h2>Are you:</h2>
180              <ul class="fancy">
181                <li style="font-size: 20px;"><span style="font-size: 20px;">Building a new CMS and need rich text editor functionality?</span></li>
182                <li style="font-size: 20px;"><span style="font-size: 20px;">Extending an existing CMS and need to add more rich text editor functionality, or enhance the default editor?</span></li>
183              </ul>
184              <p><span style="font-size: 20px;">Then use the only WYSIWYG editor that&rsquo;s trusted by 1.5M devs.</span></p>
185            </div>
186          </div>
187        </div>
188      </div>
189    </div>
190
191    <div class="container-fluid bg-primary text-white">
192      <div class="container-lg">
193        <div class="row gx-5 py-5 justify-content-center">
194          <div class="col-md-10 col-lg-8 col-xl-6 text-center">
195            <div class="tiny-editable">
196              <h2>How it works</h2>
197              <p>This landing page was built using TinyMCE.</p>
198              <p>All you have to do is define your page structure, which regions are editable, and then which TinyMCE features you want enabled.</p>
199              <p>Play around with this demo to see how TinyMCE works as a CMS WYSIWYG editor!</p>
200            </div>
201          </div>
202        </div>
203      </div>
204
205      <div class="container-lg">
206        <div class="row gx-5 pb-5">
207          <div class="col text-center">
208            <div class="tiny-editable"><img src="images/sbc-cms-template-face-1.png" alt="Portrait of Andrew Mitchell" width="200px">
209              <h3><span style="font-size: 20px;">Andrew Mitchell</span></h3>
210              <p>Chief Technology Officer (CTO)<br>Syntech Solutions</p>
211            </div>
212          </div>
213          <div class="col text-center">
214            <div class="tiny-editable"><img src="images/sbc-cms-template-face-2.png" alt="Portrait of Jennifer Lee" width="200"
215              height="200">
216              <h3><span style="font-size: 20px;">Jennifer Lee</span></h3>
217              <p>Director of Product Development<br>Stellar Innovations</p>
218            </div>
219          </div>
220          <div class="col text-center">
221            <div class="tiny-editable"><img src="images/sbc-cms-template-face-3.png" alt="Portrait of David Faraguay" width="200"
222              height="200">
223              <h3><span style="font-size: 20px;">David Faraguay</span></h3>
224              <p>Senior Data Scientist<br>QuantumTech Labs</p>
225            </div>
226          </div>
227        </div>
228      </div>
229    </div>
230
231    <div class="container-fluid">
232      <div class="container-lg">
233        <div class="row gx-5 py-4">
234          <div class="col offset-xl-1">
235            <p>Tiny Technologies, Inc. 2023</p>
236          </div>
237        </div>
238      </div>
239    </div>
240
241  </textarea>
242</main>
243</body>
244</html>

"We were able to configure TinyMCE to do exactly what we needed to do – there was no one else out there that could do that. It definitely feels like the set-and-forget tool, and their dedicated premium support meant we never felt like we were just begging for some spare time from an otherwise overworked developer."

Geoff McQueen|CEO & Founder

"We just hired a new writer and within a 20-minute training session, she felt completely fine using TinyMCE and the new CMS. That used to take hours. Everything across the board has been so streamlined that we jokingly call it our ‘Industrial Revolution."

Tyler Denk|Senior Product Lead

"TinyMCE is so easy to use, and we don't have to worry about text editing anymore. Without Tiny, we would have had to put somebody full time on building a tool like that, which could easily have cost $100,000 a year, not to mention the ongoing costs of maintaining an expensive tool."

Chris Creery|Senior Software Architect

"TinyMCE was transformative for our CMS. There's a lot of things that we were doing with other tools that we now don't have to because of Tiny. It cuts our development time for new sites in half, allowing us to bring our product to market quicker."

David Samuelson|President

When you need the best
WYSIWYG CMS 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 CMS editor gets you to market faster.

Focuses on custom and complex use cases, and content production workflows.

Explore features:

 AI Assistant icon
AI Assistant
Faster Speed to Market

Delight your users

Our WYSIWYG CMS 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.

Spotlights user experience, where the editing tools create and manage multiple content structures and a clean copy-paste experience.

Explore features:

Delight Your Users

HTML you can trust

Take the guesswork out of web content management and publish clean and compliant output from the CMS text 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.

Explore features:

HTML You Can Trust

All-in-one CMS HTML editor

Every CMS needs an intuitive WYSIWYG editor that’s feature-rich and easy to use for content creators, web managers, subject matter experts, or journalists who don’t have coding skills.

Equally, the CMS editor must be totally customizable so developers can control the back-end, integrate with existing tech stacks and be confident the HTML output is clean, quality and compliant.

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

TinyMCE toolbar menu

All the familiar WYSIWYG
features developers (and users) expect

Сontent Creation

Photo of Geoff McQueen

Enable users to create content using features they know and love:

  • Range of content formatting tools with Checklists, Accordions, and Enhanced Tables
  • Error-free clean copy-paste from Word, Excel and Google Docs with PowerPaste
  • 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
  • Create cleanly formatted equations and formulas with the Math Equations feature
  • Write, or paste, Markdown directly in the editor, and TinyMCE instantly converts it to rich text
  • Image and Word Count tools that enhance a wide range of content creation projects
  • Enhanced Media Embed adds media previews from the most popular sources
  • Insert predefined or user-defined content easily with Templates
  • Inline editing to Preview how content looks before publishing
  • Generates clean SEO-friendly HTML output ready to be indexed by search engines
  • Optimized outputs for desktop and mobile

Control

Control

Give users either unrestricted creative freedom, or just enough to create what they need:

  • True WYSIWYG page templates with editable regions using Mutli-Root Editing
  • Only enable the functionality needed and use Quick Toolbar and keyboard shortcuts to speed up content creation
  • Control the output with a variety of options around HTML and CSS
  • Customize the UI with pre-made Skins and Icons or build your own
  • Autosave avoids the risk of losing content
  • Autoresize allows the editor to resize to fit its contents as it expands

Compliance

Compliance

Ensure user-generated content is aligned with corporate and regulatory standards:

  • Maintain regulatory standards and avoid potential fines and lawsuits with Accessibility Checker (WCAG)
  • Build custom dictionaries to ensure content is on-brand with Spell Checker
  • 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
  • Improve content readability and consistency with Advanced Typography
  • Eliminate embarrassing broken links with Link Checker
  • Mentions can be used to autocomplete predefined tags, categories or assignees
  • Identify document changes over time with Revision History

Collaboration

Collaboration

Produce better outcomes with collaborative editing tools:

  • Enhance peer-to-peer collaboration with Comments and threaded conversations
  • Kickstart conversations with Mentions
  • Identify document changes over time with Revision History

Media Management

Media Management

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

Provide a consistent and reliable editing experience, from Bogotá to Istanbul:

  • 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

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

CMS features users (and devs) need the most

PRODUCT-LED GROWTH

CMS features users (and devs) need the most

5 ways to level up your CMS

CONTENT MARKETING & DESIGN

5 ways to level up your CMS

The CMS Guide: 6 problems to overcome in your rich text editor

PRODUCT-LED GROWTH

The CMS Guide: 6 problems to overcome in your rich text editor

TinyMCE CMS Config product tour

HOW-TO USE TINYMCE

TinyMCE CMS Config product tour

Is your CMS (and its content) being maximized?

CONTENT MARKETING & DESIGN

Is your CMS (and its content) being maximized?

Setting up the TinyMCE CMS Starter Config

HOW-TO USE TINYMCE

Setting up the TinyMCE CMS Starter Config

CMS trends to watch (or you’ll be left behind)

WORLD OF WYSIWYG

CMS trends to watch (or you’ll be left behind)

The Great Debate Buy vs Build Rich Text Editors

WHITEPAPER

The Great Debate Buy vs Build Rich Text Editors

Get TinyMCE FREELet’s chat
Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager
© Copyright 2024 Tiny Technologies Inc.

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