WYSIWYG stands for “What You See Is What You Get.” It refers to an interface where the text, graphics, and other content displayed during editing appear very similar to the final product. WYSIWYG is often used in word processors, web design tools, and desktop publishing software.

For example, in a WYSIWYG editor, if you bold text, you’ll see the text appear in boldface right away, rather than having to visualize the effect of a bold tag (<b></b>) as you would when coding by hand. That allows users to design and edit documents in a way that resembles their appearance when printed or displayed as a finished product. WYSIWYG thus makes it easier for nontechnical users to produce documents or web pages without writing complicated code.

Read More about WYSIWYG

Learn the history of WYSIWYG, its famous applications, and related concepts below.

What Is a WYSIWYG HTML Editor?

HyperText Markup Language (HTML) is among the most popular languages used in developing websites. A WYSIWYG HTML editor is an interface for creating web pages where users can format text, add images, and arrange elements visually without writing complex code.

The editor automatically turns your design into the necessary web code. So, what you see while editing is very close to how the web page will look when published. It makes web design simpler for those who aren’t familiar with coding.

How Did WYSIWYG Start?

The concept began in the late 1970s and early 1980s when computing began transitioning from purely text-based interfaces into a more graphical form.

A lot of foundational work on WYSIWYG and graphical user interfaces (GUIs) in general was done at Xerox’s Palo Alto Research Center (PARC) in the 1970s. The Xerox Alto, developed at PARC, was one of the first computers designed with a GUI.

The Bravo text editor came shortly after. It was developed for the Xerox Alto and is often recognized as the first WYSIWYG document editor. It allowed users to see font changes, paragraph alignment, and other formatting choices on-screen, like how the final document would appear when printed.

These early innovations became influential in the development of personal computers (PCs). For instance, Steve Jobs famously toured PARC in 1979 and was deeply influenced by what he saw. The Apple Macintosh, introduced in 1984, prominently featured a GUI and applications like MacPaint and MacWrite, which utilized the concept.

As the Web grew in the 1990s, the need for WYSIWYG editors for website design and development became apparent. Tools like Dreamweaver emerged, allowing designers to build web pages visually while the software generated the necessary code.

What Modern Applications Use WYSIWYG?

Many modern applications apply WYSIWYG principles to provide a user-friendly experience. Here are some types of applications that use the concept.

what is WYSIWYG
  • Email marketing platforms: Mailchimp, SendinBlue, HubSpot, and other solutions come with WYSIWYG editors for designing email campaigns.
  • Content management systems (CMSs): Many CMSs like Joomla and Drupal offer WYSIWYG editors as plug-ins or extensions to make content creation and editing easier for users without coding knowledge.
  • Database and form builders: Tools like Microsoft Access or online form builders like Google Forms and Typeform provide a WYSIWYG interface for building databases or surveys.
  • Graphics and multimedia applications: Graphic design tools allow users to create various visuals using a WYSIWYG interface. At the same time, video editing software offer visual time line and layout features that provide a representation of the final video output.
  • Online code editors: Online coding platforms offer a type of WYSIWYG experience where developers can see live previews of their code’s outcome.
  • Presentation software: Microsoft PowerPoint, Google Slides, and Apple Keynote enable users to design slides and see precisely how they’ll appear during the presentation.
  • Web design tools: WYSIWYG allows designers to visually arrange elements on a page without needing to code the layout by hand. Wix and Squarespace, for example, enable users to create websites using drag-and-drop tools. Certain WordPress editors like Elementor also allow users to design web pages visually without knowing how to code.
  • Word processors: WYSIWYG editors are common in word processors like Microsoft Word, where the layout on-screen while you’re typing matches the printed output.

—

These are just a few applications that leverage WYSIWYG principles, whose fundamental idea has deeply penetrated software design. The concept has made digital creation processes more intuitive and accessible to a broader audience.

Key Takeaways

  • WYSIWYG, which stands for “What You See Is What You Get,” allows users to visually design content that closely resembles the final product without dealing with underlying code.
  • A WYSIWYG HTML editor turns a user’s design automatically into web code while they visually create web pages, simplifying web design for noncoders.
  • WYSIWYG’s roots can be traced back to the 1970s at Xerox’s PARC, with innovations like the Xerox Alto and the Bravo text editor.
  • Influential products like Apple’s Macintosh, introduced in the 1980s, and newer tools like Dreamweaver in the 1990s popularized these interfaces for a broader audience.
  • Various modern applications, from email marketing platforms and CMSs to graphic design tools and word processors, apply the principles to make digital content creation more user-friendly.