Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
Woman's face with neon text reflecting off her glasses.

What is WYSIWYG?

Ben Long

November 2nd, 2020

Written by

Ben Long
Ben Long

Category

Tiny Sparks

Tagged

WYSIWYG is pronounced “wiz-ee-wig” and stands for What You See Is What You Get.

If you’re a developer, designer, or work in UI/UX, you’ll probably hear this term a lot. So, we’ve put together this guide to help you with everything you need to know, including what it is, what it isn’t, origins, examples, and future predictions.

What is WYSIWYG?

Usually, WYSIWYG is used to refer to app or software user interfaces where the text or images you edit resemble the finished product, whether it’s a web page, comment, blog post, graphic, or printed document.

These days, most modern publishing software allows for some kind of WYSIWYG experience, whether it’s website builders, word processors, content management systems, or something else. 

More and more developers are incorporating WYSIWYG elements because of benefits like:

  • No-code editing - WYSIWYG software allows users to click, drag, and type to make things happen without having to know code or commands
  • Speedy publishing - It’s generally much faster to use a WYSIWYG text editor than formatting the text from scratch
  • Streamlined workflow - When users can visualize the end product as they’re creating it, they can make adjustments in real-time without needing to publish, edit, republish (which could interrupt their workflow)

What isn’t WYSIWYG?

Cartoon man types code on an old-school desktop computer.

Without WYSIWYG, users need to type in plain text. To style or format the text with paragraph breaks, sizes, fonts, italic, bold, underline, and other elements, they need to use code or tags. 

In other words, what you see is not what you get at all! 

This isn’t ideal because:

  • Code and tags visually clutter the text
  • Some programs use their own language/markup
  • Learning this markup takes time
  • Formatting options are often still quite limited
  • It creates separation between formatting and composition
  • A lot of content authors don’t know how to code (and don’t have time to learn)

But what about user interfaces that fall in the middle?

What if what you see is mostly what you get?

Printer prints out paper with the words

In order to call something “WYSIWYG”, how close does “what you see” need to be to “what you get”? In other words, 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. But sometimes the final product will have subtle differences due to limitations with the technology, compatibility problems, or issues with responsiveness. 

That’s why the accepted definition of WYSIWYG could change depending on the type of user and software. Sometimes, a 100% WYSIWYG experience isn’t necessary for the user to achieve their end goal. But compared to the alternatives (which might offer little to no formatting options or a code-based experience), the interface is still considered WYSIWYG.

Speaking of which, the very first WYSIWYG experiences weren’t exactly perfect.

The first WYSIWYG interfaces

The first ever WYSIWYG user interface is generally thought to be Bravo, which was a program used to prepare documents for printing on the Xerox Alto back in 1974. Users could see text displayed with formatting options like fonts, margins, sizes, and more. That said, since the Alto screen resolution didn’t match up well 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.

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 many more.

But the phrase “what you see is what you get” wasn’t coined by a computer geek. 

Where the term WYSIWYG originated from

Comedian Flip Wilson brought the saying to popularity from 1969 onwards via his drag persona, Geraldine Jones. Thanks to Wilson, the following decade brought with it a number of popular songs and albums with the title “what you see is what you get”. Based on these timelines, who knows… one could assume someone in the computing world got inspired to use WYSIWYG at 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 WYSIWYG software Bravo 3, used this 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. Larry Tesler, the inventor of copy-paste, who worked on the first word processor with a graphical user interface, is also credited as saying “What you see on the screen should be what you get when you print it”.

Either way, it didn’t take long for WYSIWYG to become a common term used to talk about computer and software user interfaces.

WYSIWYG examples

To help define and illustrate WYSIWYG further, let’s look at some examples of WYSIWYG software.

Microsoft Word

Screenshot of Microsoft Word

Word processors like Microsoft Word are set up so that the on-screen display closely represents the final product. These days, the default view on Word 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 Pane

That way, users can control how they see the content, depending on how they prefer to write and whether the final product will be printed or published on the web. Users might 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.

Elementor WordPress website builder

Drag and drop website builders are becoming increasingly popular. This trend has a lot in common with WYSIWYG text editors, as they 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 today. One of Elementor’s elements is the WordPress text editor, which uses TinyMCE’s text editor. This means 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.

Project.co project management software

Screenshot from Project.co showing a WYSIWYG text editor for project descriptions.

Since their launch in 2019, Project.co has rapidly grown their user base, with more than 1500 companies on board already. To add more functionality for users, Project.co upgraded their project description section from basic text with no formatting options to a full WYSIWYG editor with TinyMCE. Now users can add bullet points, bolding, underlines, links, and even checklists.

You can read our full Project.co case study here.

The future of WYSIWYG

Looking forward, we can see four trends emerging that will impact the future of WYSIWYG text editors and word processors.

1. Improved accuracy

If you look back to the very first WYSIWYG technology, it’s amazing to see how far we’ve come. WYSIWYG software has become more sophisticated, easier to use, more intuitive, and more accurate. Developers can expect the gap between what you see and what you get to continue to shrink.

2. More options with less overwhelm

Email builder with inline toolbar displayed on the selected block.

Today’s users want more control over the content they’re producing without needing to code from scratch. Already, the top WYSIWYG editors like TinyMCE give users huge amounts of control.

But the future of WYSIWYG editors will allow this control without overwhelming them. We’ll see better UIs that intuitively show the features users need right now, while hiding anything that might clutter up their view.

In some applications, you’ll already see context menus used instead of persistent toolbars (like in the screenshot shown above). If users were to highlight some text or select an element, a menu would pop up that shows only the most relevant features for that element. For more details and examples that show how this works, check out our article about inline editing.

3. More control for developers

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

This means that developers can reduce the number of errors, control the brand experience, and create a more consistent look and feel.

4. WYSIWYG on all devices

We’re already seeing an increase in content creation and publishing on any device, from desktop to mobile. WYSIWYG editors and publishers will continue to respond to this trend by ensuring their tools are functional on all devices.

Try the TinyMCE WYSIWYG text editor

TinyMCE is the world’s most popular open source WYSIWYG HTML editor. We help developers add rich editing functionality to their website builders, email marketing platforms, learning management systems, project management software, content management systems, and more. And we’re more than ready for the future of WYSIWYG, with accurate displays, extensive options, control for developers, and support for mobile.

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.

WYSIWYG
Ben Long
byBen Long

Developer Advocate at Tiny. Computer scientist turned storyteller. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • Office setup on wooden desk with text "HOME OFFICE" displayed on laptop screen.
    Tiny Sparks

    The 2020 onboarding experience

    by Qiran Gabrielle-Grace in Tiny Sparks
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor