TinyMCE
MoxieManager
DriveHow-tos & Tutorials
What is WYSIWYG?
Published May 25th, 2022
WYSIWYG is pronounced “wiz-ee-wig” and stands for What You See Is What You Get.
Elise Bentley
Sr. Director of Marketing at Tiny
If you’re a developer, designer, or work anywhere with technology, you’ll probably have heard this term a lot. So, we’ve put together this guide to help you understand everything you need to know about WYSIWYG including:
- What it is and what it means
- How to evaluate the right text editor to suit your project
- What WYSIWYG isn’t and why that matters
- How it came to be, it’s origins and the myths
- Examples of the important components of a WYSIWYG experience
- The future of WYSIWYG and how to future-proof your application
First though, let’s explore the basics of a WYSIWYG editor.
What is WYSIWYG?
The underlying concept behind WYSIWYG isn’t that complex — it stands for What You See Is What You Get. Online, it’s used to denote that in certain applications (or any user interface), what you’re seeing is also the end product produced.
In the more frequently used context, WYSIWYG occurs where the text you are editing exactly matches how the final product looks.
For example, when you’re writing a document in a word processor, it’s using the WYSIWYG concept. What you type into your document, how you format and/or edit it, is exactly replicated in the end document that you print or send as a PDF (ie. what you created on screen, you get).
But WYSIWYG editing isn’t limited to word processors. You also see it in modern applications like CRMs, CMSs, Document Management Tools, Emails Builders, almost anything that includes written content.
A question people often ask is why these applications use a WYSIWYG editor.
The rise in popularity of this writing and editing style, has seen Developers and Product Managers alike incorporating ease-of-use WYSIWYG elements into their interfaces:
No-code editing
WYSIWYG software allows users to click, drag and type to make things happen without having to know any code or commands. It brings what used to be technical jobs, into the realm of the everyday user.
Speedy publishing
It’s generally much faster to use a WYSIWYGtext editor than formatting the text from scratch. This results in increased productivity and gives applications a competitive edge.
Streamlined workflow
Because users are visualizing the end product as they’re creating it, they can easily make adjustments in real-time without needing to publish, edit and republish (which could interrupt their workflow).
Online HTML editing
For people who want to write HTML and have their markup translated by the WYSIWYG into accurate text — a good WYSIWYG provides HTML editing online. You no longer need to compromise, with the right editor you can have the best of both worlds.
What isn’t WYSIWYG?
We’ve covered what a WYSIWYG (rich text editor) is, so on the flipside, what isn’t a WYSIWYG editor?
Simply put, not-WYSIWYG editors are the ones that developers may love, but end users don’t. Why’s that?
Not-WYSIWYG editors only have the ability to insert plain text. In order to style or format the text (with paragraph breaks, sizes, fonts, italic, bold, underline, and other elements), users need to be able to use code or tags.
In other words, what you see is not what you get at all!
Why is that a big deal? Most writers aren’t coders by trade, so they’ll often struggle with:
- Code and tags that visually clutter the text
- Having to understand which program uses what language/markup (because it isn’t standardized)
- Having to learn the required language/markup
- Most content authors don’t know how to code (and don’t have time to learn)
- Formatting options are often limited — unless they want to learn to code like a pro
- It creates separation between formatting and composition, which makes drafting and reviewing processes more difficult, and they often need to publish it to test or see a change or format
But what about user interfaces that fall in between WYSIWYG and not-WYSIWYG?
Kind of WYSIWYG
In order to call something WYSIWYG, how close does ‘what you see’ need to be to ‘what you get’ — do the lines need to match up perfectly and do the colors need to be 100% on-point?
In most instances, WYSIWYG means that users expect the output to be an exact replication of the input or display.
There are occasions, where a 100% WYSIWYG experience isn’t necessary for the user to achieve their goal. However compared to the not-WYSIWYG alternatives (which might offer little to no formatting options or a code-based experience), those kinds of WYSIWYG interfaces are still considered WYSIWYG.
Did you know?
More and more products are delivering on end users’ desire for true WYSIWYG experiences.
How to evaluate a WYSIWYG editor
After learning what defines a WYSIWYG, it’s time to understand the features and benefits they provide. It’s important to weigh which editor is the best choice for your project, because after all, not every editor is made equal.
When choosing your WYSIWYG, these five things should be taken into consideration:
Features – Does the editor have all the features you need now, and the ability to extend in the future?
Licensing – Not all open source editors are the same, and is their licensing model right for your product?
Support – If anything goes wrong, are you stuck with relying on the community or is there the option to access a professional development team to help fix it?
Total Cost of Ownership – Once you install the editor, that’s not the end. You need to maintain it in your app, so are you:
- Able to configure the toolbars and menus
- Able to accompany your text with media
- Able to insert tables
Improvements – Does it help make your content better, by using:
- Advanced spell checking
- Web accessibility checking
- Clean copy and paste
- Collaboration tools
LEARN MORE
For further information about comparing editors, learn more from these resources:
TinyMCE Alternatives Comparison
Do rich text editors positively affect your product’s revenue growth?
Top tip
Looking for the latest 2022 update? Check out the Ultimate guide to selecting your WYSIWYG editor
To help with your WYSIWYG editor evaluation and decision, read these guides on What makes the best editors, and what’s the Best WYSIWYG features.
But unlike the 2022 experience of WYSIWYG, the very first WYSIWYG experiences were far from what we see today.
The history of WYSIWYG: the rise of a movement
In hindsight it may sound silly to call WYSIWYG editors ‘a movement’, but it was. Without the introduction of WYSIWYG editors to applications and software, people who don’t code wouldn’t have the ability to interact, communicate and digitally engage across the globe. WYSIWYG helped bring the internet to everyone, no matter where they live.
But, when did it start?
It’s generally accepted that the first WYSIWYG user interface was Bravo, a 1974 program that was used to prepare documents for printing on the Xerox Alto.
Users could see text displayed with formatting like fonts, margins, sizes, and other options. That said, since the Alto screen resolution didn’t match up with the laser printers used at the time, what you saw on the screen wasn’t necessarily what you’d get when you hit print. The technology also certainly wasn’t in every home.
Other early WYSIWYG software that built on this initial attempt includes HP’s BRUNO (HP Draw), WordStar word processor, Apple’s LisaWrite and MacWrite, and others.
But interestingly, the phrase ‘what you see is what you get’ wasn’t coined by a computer geek…
Who came up with WYSIWYG?
Comedian, Flip Wilson, brought the saying ‘what you see is what you get’ to popularity in 1969, via his drag persona, Geraldine Jones.
Thanks to Wilson, the following decade brought with it numerous song titles and albums with the title ‘What You See is What You Get’. Using these timelines… you could speculate that someone in the computing world was inspired to use the phrase in their work, after listening to the radio (or “wireless” as it was called at the time).
There’s some debate about who first used the term WYSIWYG to describe their technology.
Some say John W. Seybold and his colleagues, who created the WYSIWYG software Bravo 3, used the term in the mid-70s. Others credit Bill Tunnicliffe who used the term in a presentation (involving the Graphic Communications Association and Printing Industries of America) in the late 70s.
Even Larry Tesler, the inventor of copy-paste, is also credited as saying “What you see on the screen should be what you get when you print it”.
Given the number and variety of players in this puzzle game, it’s likely we’ll never know the true origin of WYSIWYG, nor who to thank for this revolutionary acronym in the development world.
Examples of WYSIWYG in action
The best way to really understand WYSIWYG, is to look at some of the most popular (and familiar examples) of its use.
Word processors
Perhaps one of the most popular, and well known examples worldwide, is the humble word processor. Almost everyone who’s ever interacted with computers or the internet have experienced these ever-popular editing tools, that range from Microsoft Word to Google Docs and everything in between.
These types of WYSIWYG editors are set up so that the on-screen display closely represents the final product. These days, the default view on MSWord is set to ‘Print Layout’, but other options include:
- Read Mode
- Web Layout
- Outline
- Draft
- Focus
- Vertical or Side to Side Page Movement
- Show Rulers, Gridlines, and Navigation Panel
You can control how they see the content, depending on how they prefer to write, and whether the final product is printed.
You can also switch between views — to focus on different parts of the creative process. For example, they might do the writing and editing in Focus view, and then switch to Print Layout to add the formatting.
So, you may be thinking, why can’t I just drop a word processor directly into my application? Unfortunately these types of WYSIWYG editors aren’t designed for use within software or applications (they’re solely used in document creation), so you instead need to rely on WYSIWYG tools like TinyMCE — a WYSIWYG editing component that can be integrated into your application, so you can get this style of editing experience.
Document Management System (DMS) products
A good DMS allows anyone storing their documents on it to retrieve those docs quickly, make edits if needed, organize their archive, or extend its size as needed. Any WYSIWYG applied directly into a DMS needs to not only provide the flexibility needed for these different actions (store, retrieve, edit), but it also must allow for writing and editing all different kinds of documents that might appear. Some of the capabilities a DMS can provide: Copy and paste without meta information
- Word count
- Search and replace
- Enhanced Image Editing
- Autosave
- Compliance checking
- Collaboration tools
A WYSIWYG in a DMS also needs to be flexible such that a developer can extend and change its functions as needed.
Project and Workflow Management Apps
To manage a project effectively, you need communication with your team. WYSIWYGs that feature commenting and collaboration provide excellent integration with project management and workflow apps. For example, Project.co is a workflow management app — its communication abilities were improved after integrating the TinyMCE WYSIWYG.
Did you know?
Since their launch in 2019, Project.co has rapidly grown their user base, with more than 1500 companies. To add more functionality for users, Project.co upgraded their project description section from basic text (with no formatting options) to a fully-featured WYSIWYG editor — TinyMCE. You can read our full Project.co case study here.
LEARN MORE
Understand how WYSIWYG works within a Workflow Management apps editor.
Drag and drop website builders
Website builders are increasingly popular. Particularly those that allow builders to drag and drop elements into place. They have a lot in common with WYSIWYG text editors, because they too allow users to visually build sites without using code.
With over 3 million active installs on WordPress.org sites, Elementor is generally considered the most popular page builder available.
One of Elementor’s elements is the WordPress text editor, which incorporates TinyMCE’s rich text editor in its backend, so users can easily add and edit text blocks while visually building their site. They simply click to edit, type text, format it using the toolbar options, and see the updated text displayed on the web page. This combines a building block approach with a WYSIWYG editor to create a more seamless experience for CMS builders.
Content Management Systems (CMSs)
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. A reliable WYSIWYG in a CMS allows writers to publish clean and compliant output. A CMS working with a WYSIWYG needs optimal design tools and capabilities such as:
- Image manipulation and editing
- Enhanced Media Embed
- Preview content
- Optimization for desktop and mobile devices
- Auto resize
- Custom UI control
- Link checking
- Collaboration
CMSs allow any contributor using the WYSIWYG to produce what they need, keeping the content compliant with corporate standards and regulations, while allowing for creative freedom and graphical management at the same time.
Email and messaging
A messaging app or email software product usually has a WYSIWYG installed, rather than a text editor, so that anyone writing an email or message can add nuance and meaning to their writing with style, color, fonts, images, and emoji. WYSIWYGs installed within email and messaging apps also benefit writers when they blend seamlessly with the interface, while also matching the tools their writers are familiar with.
More than other WYSIWYG examples, an email and messaging integration must be easy to use. There must be no obstacles stopping the writer from communicating.
Customer Relationship Management (CRM) apps
Software that connects you with customers, and allows you to build an audience, track how customers interact with your project, or nurture the relationship through points of contact represents a CRM. And a CRM calls for a WYSIWYG that can streamline the CRM experience. It should be easy to create content and export it. Lightweight WYSIWYGs that are easy to customize excel in a CRM project.
Learning Management Systems (LMS)
What’s important in an LMS is the interaction between the teacher and the learner. A WYSIWYG in an LMS must allow for easy communication between the two. It must provide:
- Ease of collaboration
- Communication and feedback through comments
- Text modification through highlighting
- Exporting of content
- Media manipulation
- Templates
- Integration with other communication pathways such as discussion boards and email
The WYSIWYG editor must be feature-rich, and easy to use for teachers, course creators, subject matter experts and administrators who don’t have the time or skill to code from scratch.
Internal SaaS Applications
Scalable SaaS products built for growth and multi-use internal tools have complex
tech stacks. Their diverse components need to work together to deliver value to users, and produce the user experience you need. A WYSIWYG editor is a vital component within that internal, SaaS application tech stack.
Developers are specifically tasked with assembling these stacks, and therefore a WYSIWYG in an internal SaaS app must be easy to configure. The WYSIWYG must be enterprise-grade and customizable (if you need). Just as capabilities for the SaaS apps target customers are vital, the WYSIWYG’s developers must maintain it. The experts behind the WYSIWYG must have a deep domain experience.
LEARN MORE
Understand how WYSIWYG works within an Internal and SaaS applications editor
Comparing WYSIWYG features across RTEs
Let’s be honest. Features are often taken for granted when it comes to online editing. But not everything (be it a core editor or advanced features/plugins) is built equal. It’s important to pressure test the features you both want and need across different editors, to ensure they handle your current needs and future growth.
Only a few companies build WYSIWYG editors to production ready status, and of course, there also are product teams who choose to build their own WYSIWYG editor, rather than using ready-made specialist components.
By comparing how different WYSIWYG features perform within the most popular editors, there’s a better likelihood of satisfying your users' needs.
Clean copy and paste
If you’ve ever pasted content between applications, for example, pasting from Word into a content management system, chances are you’ve experienced weird formatting or broken code. Not all editors can manage the copy and paste flow cleanly.
Advanced spell checking
When it comes to professional development teams selecting an editor to use in their applications, compliance and spell checking cannot be overlooked. It’s important to check if the editor you’re interested in can actually save you from making costly spelling mistakes or not.
Automated accessibility checking
Accessibility is vital for developers and organizations that want to create high quality websites and applications, and not exclude people from using their products and services. It’s often an overlooked feature, however, and not everyone can implement it.
Exporting content to a PDF
Export is the ability to copy the content that’s within a rich text editor, change it into another format (usually a portable form), and send it to a destination. It’s useful, but not every editor can provide it.
Generating mentions within comments and documents
AtMentions are a fast way to communicate over documents. They are also called ‘@mentions’ because they include the ‘at’ symbol as trigger characters. Make sure the editor you want can provide this ability if you need to communicate within the WYSIWYG.
Generating threaded comments
Comments have been a part of web development since the very beginning — but like mentions, not all WYSIWYG developers have configured this capability.
Quickly replicating formatting across the document
Format Painter represents an essential editing tool despite the fact that not all editors implement it effectively.
Essential WYSIWYG editor features
Clean copy and paste
Clean copy and paste is a crucial feature for most use cases and there are multiple ways to copy content and paste it into your WYSIWYG. But, not all of those ways work as intended — they often cause broken code, funky formatting and a poor user experience.
When selecting a WYSIWYG, the copy-paste function should be easy to integrate and must produce consistent results (i.e. no re-formatting necessary). Tools like TinyMCE’s PowerPaste lead the pack for most needs, without you having to bear the hefty price tag of trying to replicate clean copy-paste functionality for yourself.
Spell checking
Spell checking is essential for building content in a WYSIWYG. Often teams think they can rely on the in-browser spell checker to do the heavy lifting, but sometimes that’s not the right choice if you’re prioritizing user experience. While you can rely on HTML spell checking in the browser, a good WYSIWYG provides advanced spell checking abilities.
But, should you buy a spell checker, or build one yourself? There are lots of options and decisions involved in choosing what’s best for you and your team.
Accessibility checking
The inspiration to make your content more accessible can come from several directions — web design requirements, legal concerns — or from a desire to create a better experience for more people.
However, it can be difficult to know where to begin when it comes to web accessibility, because accessibility is often a challenge. There are many questions to answer:
- How do I handle emoji?
- What are best practices for accessibility?
- Are there any ways to make accessibility easier in a WYSIWYG?
Very few development teams have the skill or knowledge to build an accessible WYSIWYG editing experience. Buying one off-the-shelf saves you significant time and energy, but here’s the research we’ve done on the question of buying vs building an accessibility checker. You may be surprised at the cost!
Comparing WYSIWYG and frameworks
Frameworks are considered to be core aspects of developing for the web. That’s why it’s so important your WYSIWYG editor works natively with the framework of your choice, because not all rich text editors do.
We’ve done some pressure tests on the integrations available — see which WYSIWYG is the best fit for you:
- 5 Best rich text editors for React compared: Under pressure
- The best rich text editors for Vue: Under pressure
- Angular component integrations for rich text editors: Under pressure
Also check out which WYSIWYG editors support Docker Containers for your next project.
Your future WYSIWYG needs
When thinking about a WYSIWYG editor for your application, it definitely pays to:
- Think about your future needs and long-term product roadmap
- Look at the track record of the company you’re considering
- Consider their history of innovation.
Regardless of the editor selected, make sure it has the following:
1. Improved WYSIWYG experience
Looking back at the very first WYSIWYG technology, it’s amazing to see how far it’s come. WYSIWYG software is more sophisticated, easier to use, more intuitive, and more accurate in terms of output.
In the future, developers can expect the gap between ‘what you see’ and ‘what you get’ to continue to shrink, as more features, functionality and aspects are added to editors.
2. More options with less overwhelming interfaces
Today’s users want more control over the content they’re producing, without needing to code from scratch. Already, the best WYSIWYG editors like TinyMCE give users a huge amount of control.
In the future, we’ll see better UIs that intuitively show the features users need right now, while hiding anything that might clutter their view.
In some applications, context menus are already used instead of persistent toolbars. For more details and examples that show how this works, check out more about inline editing.
3. Improved developer control
Tools like TinyMCE allow software developers to control:
- What users can see and do
- How the editing interface looks
- What the final published product will look like.
Therefore, developers can reduce the number of errors, control the brand experience, and create a more consistent look and feel.
4. WYSIWYG on all devices, all the time
We’re already seeing an increase in content creation and publishing on every device, from desktop to mobile.
The future will see WYSIWYG editors and publishers that continue to respond to this ‘anywhere, anytime’ trend, by ensuring their tools are functional on all devices.
Interested in trying TinyMCE?
Check out 3 ways to try TinyMCE or get started with a FREE API key. You can also contact us to find out more about how TinyMCE can help you create a WYSIWYG experience for your software product and build a more intuitive user experience for your customers.
author
Elise Bentley
Sr. Director of Marketing at Tiny
Senior Director of Marketing at Tiny. Elise has marketing experience across a range of industries and organisation sizes, and loves to blend the creative aspect of marketing together with data to develop engaging and effective marketing strategies and campaigns
Related Articles
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.