9 products you can build with TinyMCE
Published July 20th, 2020
Many people have heard of our TinyMCE WYSIWYG editor, but we often find that they don’t realize just how powerful and flexible it is. There really is no limit to the types of products and use cases that can be implemented or enhanced with TinyMCE. It’s quite the chameleon 🦎
Author at Tiny
In an attempt to provide a better understanding of why TinyMCE continues to be used and trusted in over 100M+ products worldwide, here’s an overview of 9 products that can be built with TinyMCE.
Why nine? No reason – these were simply the first nine products that came to mind. Truly, the sky’s the limit when it comes to potential use cases – if it’s imaginable, then it’s possible with Tiny 🚀
GET this guide
Download your own pdf of the ‘9 products you can build with TinyMCE’ to read later or share – to convince your colleagues of the value of having a rich text editor with advanced features.
1. Blogging platforms
In this blogging platform, TinyMCE is configured with quickbars to emulate the Medium-style editing experience on text selection.
It’s also configured with options for users to insert images, links, media, code snippets, and more – all the usual options you’d expect from a blogging experience. Furthermore, it complies with accessibility requirements for a more inclusive experience for content creators.
2. Real-time chat apps
In this chat app, TinyMCE is configured with the usual subset of formatting options you’ll find in an application of this kind, including the ability to add emojis – now a standard requirement in modern text communications.
Read more about this project in our related blog post on how to build a simple chat app with Deno and a WYSIWYG editor. It also makes use of placeholder text as a prompt for the user.
Speaking of placeholder text…
3. Design tools
Here, TinyMCE is used in a card design tool and is configured with a custom skin, created using the TinyMCE Skin Tool, to blend in seamlessly with the rest of the app. It also has a huge range of custom and popular fonts to choose from.
The editor’s CSS is configured for the true WYSIWYG experience, so users can see exactly what the content will look like without having to use a separate preview. It also features the ‘case change’ plugin, allowing designers to convert text from uppercase to lower to title case quickly when considering their options.
4. Document processors
This document processor is built with TinyMCE, configured with document margins, wordcount, and predefined templates to save time for users so they don’t have to create the same content again and again...and again.
It also includes a global spell checker to ensure content written by anyone in the organization maintains a certain standard and consistency, and checks up to 13 languages simultaneously. The color palette has been customized with a set of colors according to the corporate style guide, and it has a custom skin (for instance, active toolbar buttons are green).
Get Your FreeGet API Key
TinyMCE API Key
5. Note-taking apps
This note-taking app is built with TinyMCE, featuring many of the options already mentioned in other products.
Here, the editor is configured with Tiny’s premium snow skin and icons pack, one of the 10 skins and 4 icon packs we’ve designed for you. It’s also been set up with the ability to insert checklists – a common feature in these types of applications.
6. Email service providers
This is a marketing email platform, built with TinyMCE.
In this case, it has been configured with inline mode, so the toolbar appears directly above an editable area when your cursor is in it and hides otherwise. The toolbar drawer opens to reveal more options, including the ability to insert links, images, emoticons, and lists. A cool feature is that the style formats dropdown is configured with an option to convert any link into a call-to-action button (shown on the right above).
7. Collaborative workspaces
This collaborative workspace is built with TinyMCE. Similar to the note-taking app, it’s also been configured with Tiny’s premium snow skin and icons pack. By the way, Tiny also has its own real-time collaboration solution, that’s encrypted – so no one can eavesdrop on your communication.
You can also provide an empty page placeholder UI containing complex HTML and buttons to insert templates (shown below) – a feature found in popular apps like Notion and Atlassian Confluence.
8. Comments apps
In this comments app, TinyMCE has been configured with a naked skin, allowing the designer to wrap it in a container and customize it with their own border, buttons, and other additional HTML/JS functionality. It’s also been configured with several templates as “canned” replies to cut down the time it takes for users to form responses.
9. Form builders
TinyMCE can also be used for the text entry components of your forms.
This form has been created using the Bootstrap framework, and TinyMCE is configured with the corresponding skin to match. Read more about how to enhance your Bootstrap forms with WYSIWYG editing.
Get started with TinyMCE
Start with a FREE 14-day trial of the Tiny Cloud Essential plan, our ultimate productivity solution. In addition to the core editor, you’ll get access to our Premium Skins and Icons plus 14 premium plugins, including PowerPaste, Enhanced Media Embed, Checklists, Advanced Tables, and Real-time Collaboration. Or see our plans for more options.
See our docs for live TinyMCE examples configured with all the bells and whistles and contact us any time – we’d love to talk about your new, innovative products and help you create the best user experience possible.
Download a PDF of this guide
and save it for later
By completing and submitting the form you’ll receive information and tips from Tiny Technologies.