True Story Behind The WYSIWYG Keyboard Design

As a web designer, you have the option of either choosing visually-driven WYSIWG or doing the actual coding.

What You See Is What You Get (WYSIWYG) is a user interface that allows a designer to view something very similar to the end result while a document is being written or created.

The Development of WYSIWYG

It was not until 2012 that a properly functional WYSIWYG editor, called VisualEditor, came into existence after several failed attempts. It functioned in such a manner that its edits were visible and performed without the visibility of the page source.

The phrase itself, What You See Is What You Get, was borrowed from an American Show hosted by Flip Wilson in the early 1970s.

Before WYSIWYG, texts were coming from editors used to employ a typeface formalized by the system. This style would amass tiny evidence of the spacing and margin layout. Control codes would be employed to indicate italics, boldface, and font sizes.

Several document preparation programs, such as Bravo and WordStar, were invented later. However, these programs had limitations such as the regular display of characters that were slightly off when displayed on a screen.

Functions that Can Be Accomplished Using WYSIWYG

  1. The spacing of lines – This involves the manipulation of lines to either be single-spaced or double-spaced lines.
  2. Character formatting – It includes manipulating characters to either become bold, underline, italic, or strikethrough.
  3. Table tools – may involve table insertion, table deletion, editing the properties of a table, cell formatting and cell alignment, spacing of cells, and cell padding.
  4. Indent decrease and increase.
  5. Formatting of styles.

WYSIWYG External Editors

This software enables a web designer to manipulate a text while viewing the end result. They come with several additional functions that allow creating tables, manipulating font sizes, and different tools to fix issues to do with compatibility.

Article Continued Below

They include Setka Editor, Editor.js, Bubble, Froala, Dreamweaver, TinyMCE, and WordPress.

1. TinyMCE

It’s a friendly external editor that can be deployed in hybrid, self-hosted, and/or cloud-based environments. What makes it tick is that it gives you total control over your project and gives you additional functions for font families, table creation, and editing, among other things.

2. Froala

It’s based on JavaScript, and it comes with numerous extensions. Froala has a real-time, collaborative, and unique editing feature that makes it stand out.

Its framework plugins are powerful. Also, its documentation is detailed, which helps it integrate easily with the technological infrastructure on-site, and above all, it’s easy to learn.

3. Adobe Dreamweaver CC

It handles JSP, XML, JavaScript, CSS, and PHP. With its fluid grid layout, issues to do with compatibility get fixed easily.

Its features include in-built templates, layouts, and a friendly interface, making it enjoyable and easy to use. Unlike WordPress, Froala, and TinyMCE, DreamWeaver is for professionals.


WYSIWYG still stands out strong when it comes to web design. Its numerous tools help web designers to have a walk in the park while at work. It comes with functions that produce a smooth feel and a beautiful view, making the designer and the users love the art.

Looking for our newsletter? Subscribe here!