WYSIWYG is pronounced “wiz-ee-wig” and stands for What You See Is What You Get.
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:
First though, let’s explore the basics of a WYSIWYG editor.
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:
TABLE OF CONTENTS
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.
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:
But what about user interfaces that fall in between WYSIWYG and not-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.
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:
Improvements – Does it help make your content better, by using:
LEARN MORE
For further information about comparing editors, learn more from these resources:
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.
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…
fun fact
The creation of the internet was one of the fastest adopted new technologies in history!
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.
The best way to really understand WYSIWYG, is to look at some of the most popular (and familiar examples) of its use.
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:
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.
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
A WYSIWYG in a DMS also needs to be flexible such that a developer can extend and change its functions as needed.
LEARN MORE
Understand how WYSIWYG works within a DMS editor.
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.
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.
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:
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.
LEARN MORE
Understand how WYSIWYG works within a CMS editor.
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.
LEARN MORE
Discover more about how a WYSIWYG works within an email editor.
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.
LEARN MORE
Discover more about how a WYSIWYG works within a CRM editor.
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:
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.
LEARN MORE
Discover more about how a WYSIWYG works within a LMS editor
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
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.
