6 types of web applications you can build with TinyMCE (with 17 examples)
Content is the lifeblood of the internet, for one simple reason. Content conveys ideas.
Both content and ideas carry the same power – to inspire, teach and unite people – it’s built into every character, symbol and space. But sometimes, conveying those ideas through content, can be the hardest challenge of all… without the right tools.
Every day, developers, enterprises and content creators are using the world’s #1 WYSIWYG editor in amazing ways, and it’s surprising to see how it’s used as the foundation for spreading ideas. Unbeknown to many, rich text editing capabilities are the real powerhouses behind so many different applications.
By showcasing some of the most popular places TinyMCE is hidden, and seeing the ways it can help with not just everyday use cases, but also edge cases and niches, you’ll hopefully be inspired to think of new avenues to use it within your own web app, tech stack or business.
How do web applications use TinyMCE?
Most applications need content (in some shape or form) to be created and/or maintained: product descriptions, meeting notes, web pages, chat messages, or even emails.
Rich text editors, like TinyMCE, provide the tools your users need to create rich content in ways that are very familiar to them. It helps you and your team to bring products to market faster, increase developer velocity and delight users – without having to worry about the maintenance, support and tech debt that comes with building and maintaining your own editor.
Content Management Systems (CMSs)
Content Management Systems (CMSs) are used to manage the creation and modification of web-based digital content.
The web is changing at a rapid pace, and with that change comes increased expectations from website visitors. Everything needs to look good, function properly, meet compliance standards, and load in the blink of an eye. If you don’t have all that, visitors bounce and you’re missing out on potential conversions and revenue.
Example 1: Creating web pages or blog posts: Joomla!
TinyMCE in Joomla! CMS
At the heart of many CMSs is the ability to create long form web pages – whether that’s in the form of a blog article or some other free-form content piece.
A major challenge for CMS admins is the need to balance the content creators' ability to express themselves, with the placement of guardrails around which tools users have at their disposal. These guardrails are needed to ensure they’re only creating content that renders properly (and looks good) when displayed on the website front end.
In this case, Joomla! has opted to be more liberal with its editing capabilities, offering a ton of options to its users. They also have the full toolbar hidden by default, with additional buttons accessible with one click.
They’ve even added a custom dropdown menu to embed content from elsewhere in the CMS, directly into pages and articles:
Joomla! Gives its users a lot of freedom – being able to format content as they please and pull in content parts from other parts of the CMS – which creates a rich and powerful editing experience.
But sometimes you want to restrict things a little more in your CMS, which leads us to the next example…
Example 2: Creating short-form content: Shopify
TinyMCE in Shopify’s “Edit Product” screen
Users often need to edit short-form content, like a product description in an online store.
On its “Edit Product” screen, Shopify gives users a more simplified experience than the previous Joomla! example. However, they’ve still enabled select advanced capabilities like tables, to make it easy for store administrators to write product descriptions that include important information (ie. sizes or product variants).
Short–form content is often part of a larger page, with several components, so adding more control over what the user can do (through formatting options) helps to ensure that the content will “fit” with the rest of the page.
Example 3: Facilitating discussions and comments: Blogging platforms
TinyMCE as a comments editor in a popular blogging platform
Many websites – especially news sites and blogs – encourage users to engage with one another via the comments. This helps build a sense of community, encourages repeat visits, and provides valuable feedback.
Here, TinyMCE is used as the rich text editor that allows visitors to leave comments and ask questions. Similar to short-form content, the best practice here is to keep the editing controls to a minimum – visitors want to write short messages and don’t want to be overwhelmed with formatting options.
Example 4: Managing contact forms: websites
TinyMCE as an editor on a website contact form
Most organizations have some sort of contact form on their website. Sometimes they’re generated by your CRM, Marketing Automation tool, via a plugin in your CMS, or sometimes your web developer builds one from scratch.
In cases where visitors need to convey complex information in their inquiry, you can offer them rich text editing inside your contact form.
Document Management Systems (DMSs) and Document Builders
Document Management Systems (DMSs) are used to create, store, manage and track documents. Initially used for the purpose of digitizing paper-based workplaces, they have evolved so much that the term now encompasses anything from Google Docs to Dropbox.
As efficient knowledge transfer becomes critical to competing in today’s marketplace, DMSs continue to grow their foothold in the business productivity world. When was the last time you worked with a business that didn’t rely on some sort of document creation, storage, or management tool?
Example 5: Word processing: Google-Docs like experience
TinyMCE’s DMS starter config and demo, built to mimic a Google Docs-like editing experience
A great rich text editor stands out when it comes to word processing – specifically pageless, digital-first content. To showcase the editor’s abilities, there’s a Word Processing starter config and demo that can be set up in under 5 minutes.
It’s been modeled to match the Google Docs’ editing experience, including all the necessary editing controls, as well as a fully customizable spell checker and collaborative tools like comments and mentions.
→ Looking to create your own Google Docs or MS Word–style editor?
→ Want the full deep dive?
Example 6: Document building: contract management platform
TinyMCE as the editor within Concord Now’s contract management platform
Document builders are similar to word processors, but rather than creating free-form documents, a document builder creates them from various components or ‘blocks’. This allows for tighter control, to ensure the document conforms to strict brand or legal standards.
They’re the most commonly used in web apps that generate contracts, proposals, invoices, or other content that either has a strict structure, or contains repeatable parts (for example a boilerplate header, introduction, and closing statement).
In the above example, Concord Now’s rich text editor includes commenting functionality to let users review and discuss documents throughout the creation and approval workflows. This functionality delivers a streamlined contract management experience.
Learning Management Systems (LMSs)
Learning Management Systems (LMSs) facilitate the administration, documentation, tracking, reporting, automation and/or delivery of educational courses or training programs.
Institutions use them to teach classes, companies use them to deliver training, online courses rely on them for content delivery and participant assessment, and in some cases, they are even used to automate the entire learning experience.
Regardless of who your LMS is serving, the needs of your customers (and their students) likely resemble one or all of the following.
- Consume content when they want, where they want, how they want
- Complete assignments that adhere to academic standards
- …All through a modern, easy to use and sleek user experience, akin to their favorite social apps
Content author (e.g. instructor) needs
- Easily create engaging, media-rich learning experiences for students
- Tailor content to student needs, interests and learning paths
- Assign meaningful work that reinforces learnings
- Provide contextual feedback
Content author (e.g. instructor) needs
- Achieve positive learning outcomes at scale
- Boost the reputation and appeal of their institution, workplace or online course
- Improve staff productivity
- Comply with applicable legislation (including accessibility standards)
Example 7: Creating learning content: Brightspace
TinyMCE is the default editor in D2L’s Brightspace LMS
Brightspace LMS uses TinyMCE to enable course authors to create learning content, as well as in many other areas within their LMS. In addition to leveraging key editing capabilities like the ability to create sortable tables and a detailed word counter, where collaboration is crucial to the learning environment, they also let users @mention each other to aid the communication flow.
With accessible content being vital to the education space, Brightspace LMS also includes TinyMCE’s Accessibility Checker, and a customized color picker (with WCAG compliance checking), that they added through TinyMCE’s library of APIs.
Example 8: Submitting or writing assignments: LMS teaching aids
TinyMCE in the “Submit Assignment” screen of an LMS
Most LMSs are bidirectional, meaning they facilitate the exchange of ideas and information between teacher and student. This can include students submitting assignments, or providing feedback to instructors.
In addition to providing tools that help students create content easily and check it for errors, LMSs can also improve the student experience by automating some of the more mundane parts of writing assignments – like generating tables of contents and managing footnotes. This allows students to spend more time learning, instead of wasting it on doing admin-type tasks.
A great LMS student-focused editor balances a breadth of capabilities with what students need to get the job done – whether that’s submitting an assignment or collaborating on group work. For many students, your LMS is one of the many tools they use every day, so it should be easy, without them having to learn something new.
Email Marketing Platforms
Email platforms can range from a webmail client configured for sending 1:1 emails, all the way to a marketing automation platform for personalized 1:many communications.
They don’t always stand alone as their own system, and are often integrated as a component of other systems. For example, your CRM may have email marketing capabilities built into it, or your LMS might have automated email notifications that go out to users when a due date is approaching.
Email has been around for a while, but the shifts that happened during the pandemic mean it’s thriving now more than ever. The email marketing software market is expected to grow from $12.4B to $59.8B by 2032 – almost a 5X multiple over the next 10 years
Email platform buyer goals
- Drive positive results from their investment
- Send emails that render properly across platforms and devices
- Ensure emails don’t get caught in spam filters or impact their sender score
- Minimize the need for technical resources to debug email creation or send issues
TinyMCE does not send emails for your web app. That being said, with tools like Merge Tags and Inline CSS, it takes away some of the major headaches associated with preparing emails. It’s also an HTML DOM-based editor, which means it lets your users create content in the same format that emails are constructed in – HTML – so there’s less chance for rendering errors when the emails are received.
Example 9: Marketing Email and Marketing Automation: HubSpot
TinyMCE as the rich text editor inside HubSpot’s email builder
HubSpot, a well-known player in the marketing automation space, uses TinyMCE in its drag-and-drop email builder. In addition to using merge tags for personalization and leveraging many of its out-of-the-box formatting capabilities, they’ve also built their own custom UI on top of the editor to match their platform’s look and feel.
The TinyMCE core rich text editor is also used in HubSpot’s Landing Page builder and other parts of their platform where users can create rich content.
→ Looking to build your own Hubspot – style editor?
Example 10: Web-based Email Clients
TinyMCE as the editor inside a popular webmail client
As software verticalizes into more niches, there are opportunities to offer solution-specific versions of generic software that address niche-specific needs (e.g. email management for maritime shipping companies). There are also opportunities to add email capabilities to existing software platforms, as you’ll see in the CRM section.
Example 11: Editing transactional emails: dynamic rich content
TinyMCE as the editor inside an e-commerce platform’s “Edit Notifications” section
While it may not be the first email use case that comes to mind, rich text editors play a strong, silent and mostly hidden role in the administration panels of several types of software. Administrators of platforms that send out transactional emails, like purchase confirmations or password reset emails, use the editor to craft and style emails that often contain dynamic content – such as unique links, codes, or transactions.
Workflow, automation and collaboration apps
Where information needs to transfer between people or teams – whether that’s through an automated workflow or as part of a collaborative workspace – rich text editing has a key role to play.
Worldwide, there’s a push to improve workforce efficiency, support growingly complex business processes, and enable global workforces, so this category is seeing huge transformation.
From empowering everyday people to create their own automations through no-code tools, leveraging both AI and machine learning, and ensuring integrations with existing systems (often through APIs) there are many trends affecting the future of workflow and automation.
Workflow, automation and collaboration buyer goals
- Increase productivity and output
- Automate work with technologies like business process automation and AI
- Integrate workflows across tech stacks
Example 12: Collaborative workspaces / Wikis: Atlassian Confluence
The TinyMCE editor that lies within Atlassian’s Confluence workspace, enables users to create, collaborate and share content related to projects, teams, and anything else work-related. In addition to a tailored UI and several custom-built functions like smart links and code samples, Confluence makes heavy use of table functionality to give users the power to improve the layout of their pages.
Example 13: Project management: Modelling Jira
TinyMCE’s Workflow and Collaboration starter config, modeled off Atlassian Jira
For most knowledge workers, teamwork is part of day-to-day work. All the project management tools (e.g. Jira, Asana or Monday.com) are designed to help team members communicate and get work done more efficiently, with better results.
The example shown above is our Workflow and Collaboration starter config, modeled off of the popular Jira project management tool. Here, the editor is used in two places – in the description of the task or work item to be done, and as a comments field to ask questions, provide updates and discuss the task.
Example 14: Document automation and approval: Concord Now
TinyMCE as the editor within Concord Now’s contract management platform
Concord Now uses the TinyMCE editor in its Document Builder, and again as a Workflow tool. In addition to enabling the speedy creation of contracts from predefined building blocks (see Example 6), Concord Now also lets users create approval workflows and to send documents out for signing – all through automated communications.
Customer Relationship Management (CRM) Systems
CRMs let sales, customer success, and marketing teams track and manage communication with customers and prospects, in one place.
They can either provide a single capability, like managing prospect records, all the way through to a full suite of capabilities – including email management, support ticketing, reporting, and more.
Trends shaping the CRM space include hyper-personalization, mobile and social capabilities, and industry-specific offerings (think CRM for real estate agents), to name a few. With so much focus on profitable growth, companies that create CRMs have a ton of opportunity to meet future needs.
CRM user needs
- Track and manage the entire customer experience
- Create and update records quickly and efficiently (time = money)
- Communicate genuinely with customers, at scale
- Pull data and reports in real-time
CRM buyer needs
- Increase revenue
- Improve customer retention
- Provide a single source for reporting, forecasting and insights
Example 15: Sending messages to customers or prospects: SalesLoft sales engagement platform
TinyMCE as the email template editor inside SalesLoft sales engagement platform
Because email is so important to CRMs, we’ve included one more email use case. SalesLoft, a leading sales engagement platform, uses TinyMCE as their email template editor, was well as in all other places where WYSIWYG editing is a must – including editing meeting notes and maintaining snippets.
The SalesLoft customization includes a live preview pane that inserts dynamic sample data into emails, so that users can see what their email looks like when it arrives in the Inbox. They also added the ability to insert video content (for example a personalized hello message from a sales rep) into the email, directly from Vidyard.
Example 16: Support ticket creation: Description editor
TinyMCE as the description editor used for support ticket creation
With CRMs becoming the nerve center for customer engagement, many now offer their own ticketing system to help manage support issues.
In cases where issue descriptions can be complex and details need to be accurately conveyed to support staff, an advanced rich text editor helps users to effectively convey their issues and questions, without being held back by a plain text field.
This can lead to faster support resolutions, less back-and-forth and ultimately happier, more loyal customers.
Example 17: Updating customer records: Rich text enhancements
TinyMCE as the editor on a description field inside a CRM
Most text inputs used on the “edit record” of CRM screens are simple plain text – and for good reason. Speed and efficiency is the name of the game if a company wants to get the most out of their revenue teams.
But sometimes, a record requires more detail than what a plain text field can provide. In these cases, upgrading those fields with a rich text editor, allows users to describe calls or prospect needs in more detail – so colleagues can more easily understand the status of an account and pick up where the last person left off.
Content mobilizes ideas, and apps help people share it
Without content, websites, apps or platforms are nothing more than a blank space, or placeholder. There’d be no home pages, no blogs, no emails, no LMS, no CMS, no DMS, no CRM, no images. NOTHING.
Without content, your world would be much smaller. But our digital reality is very different.
The internet is nothing without content
Every moment, someone’s making a piece of content
In every moment, of every day, there’s likely someone somewhere making some form of content to share with the world. And for the most part, the digital content that’s generated uses a WYSIWYG rich text editor (TinyMCE alone, has 1.5 million downloads every month).
This list of 17 examples may seem exhaustive, but it’s really only scratched the surface of how our WYSIWYG editor is used to create content and share ideas. While it’s almost impossible for us to show all the options, hopefully it’s inspired you to find new homes for rich text editing within your app or business.
Because people make content all the time.