Closeup of a definition of "WYSIWYG" in a dictionary
Casimiro PT/Shutterstock.com

WYSIWYG seems like a long acronym, but it’s an essential element of modern user interfaces. Here’s what it means and where you can see it on the internet.

What You See Is What You Get

WYSIWYG is a tech initialism that stands for “what you see is what you get.” It usually refers to a user interface that lets you directly edit and manipulate the look and content of a document, page, or file. This means that whatever edits you’re making to something will display the same way when the final output is produced.

As the internet has become more ubiquitous and accessible to people, WYSIWYG editors have grown in popularity. Since people need to find ways to upload and send formatted content on the fly, most use WYSIWYG environments.

The History of WYSIWYG

The actual term “what you see is what you get” predates the internet significantly. It was a relatively common idiomatic expression used to describe things that are just as they appear. For example, if you’ve been looking for a used car, and you see one that for a low price that seems to be in terrible condition, the salesman might say, “Well, what you see is what you get.”

Advertisement

Eventually, this term became prominent among software developers and computer builders. The earliest computers had no form of WYSIWYG. Instead, people created formatted documents via custom coding languages and tags, intended to work within the confines of older programming languages.

Eventually, the tech company Xerox PARC released the Alto, the first personal computer with an included WYSIWYG editor. This coincided with their introduction of the graphical user interface, or GUI, that allowed users to visually interact with elements on a computer. Soon after, companies like HP, Apple, and Microsoft also released computer programs that included native support for visual editors.

RELATED: What Is UI, and What Does It Stand For?

Types of WYSIWYG

Squarespace Editor
Squarespace

Depending on the context, you can refer to various software tools and interfaces as “WYSIWYG” editors.

The most common are systems that allow you to edit documents and text. Whereas non-visual editors would typically have a markup language like Markdown or BB Code that is later parsed into formatted text, WYSIWYG editors like Microsoft Office allow you to make edits to format and content on the fly. These documents can then be shared or printed, and they will appear in the same way as they do on your computers.

There’s also web development. Usually, front-end web development requires understanding languages such as HTML and CSS to build a good-looking, responsive website. The rise in “drag-and-drop” interfaces among website builders has grown, which has allowed people to create their own websites without understanding code. Tools like Adobe Dreamweaver will enable you to design a website and export it as code that a browser can parse.

WYSIWYG can also broadly apply to any number of software that creative professionals use. Live video editors, photo editors, illustration programs, and 3D animation studios all adopt a visual method for showing you your output immediately. For example, video editors like Adobe Premiere and Sony Vegas have a “preview” box that instantly allows you to playback your finished clips before going through a long export process.

WYSIWYG Editors

Wordpress Visual Editor
WordPress

The main advantage of a WYSIWYG editor, of course, is that it’s easier to use for an end-user. Instead of learning how to use a bunch of different markup languages, these editors allow you to format, resize, and add multimedia to your posts with the click of a button. This is why most forums, web-builders, and editors have largely moved to WYSIWYG systems.

Advertisement

Most commercially available text editors are WYSIWYG. This includes popular word processors like Microsoft Office, LibreOffice, Google Docs, and rich text editors like WordPad and Evernote. Most on-site text editors allow you to use either markup language or WYSIWYG. For example, the WordPress post box allows you to switch between the “Visual” editor, which gives you a direct preview of what you’re writing, and the “Text” editor, which allows you to edit in HTML directly.

Many WYSIWYG web hosts allow you to create a website without understanding much code. This includes popular services like Squarespace, Wix, and Weebly. These commonly provide “drag-and-drop” interfaces that allow you to add content blocks on a page following a particular template. Some also allow you to type in a hybrid format that melds together WYSIWYG editing with traditional editing. A typical example of this is websites with markdown, like Reddit. You will often have options to apply formatting in their text boxes, which you can preview before you post.

RELATED: What Is Markdown and How Do You Use It?

Profile Photo for Vann Vicente Vann Vicente
Vann Vicente has been a technology writer for four years, with a focus on explainers geared towards average consumers. He also works as a digital marketer for a regional e-commerce website. He's invested in internet culture, social media, and how people interact with the web.
Read Full Bio »

The above article may contain affiliate links, which help support How-To Geek.