WYSIWYG: definition, use and examples

WYSIWYG: definition, use and examples

The creation of websites requires knowledge of computer language. When content is created in the form of code, it is necessary to imagine the visual rendering. For beginners or those who want to see the end result directly, there are the WYSIWYG editors. They allow users to create and edit content for a website, without typing a single line of code, while having real-time preview. Zoom on WYSIWYG software, their use and some examples.

> Download this guide and learn the basics of HTML and CSS ” align=”middle”/>

Using WYSIWYG software

The WYSIWYG editors arose from the development of computers and their writing programs. Before they appeared, it was necessary to format the text to see what it looked like and how it would look on the printer or on the screen.

One of the first WYSIWYG software to appear is WordStar, in 1978. It allowed users to bold or italicize text and preview it on the screen. However, it was mostly reserved for professional use, as most computer systems were not powerful enough to support it.

Beginning in the mid-1980s, improvements in PC and Mac technology led to the democratization of WYSIWYG programs. Gradually, publishers have evolved and are no longer limited to simple word processing. In 1995, WebMagic became the first publisher to offer the ability to create a website without needing to code. It is then followed by Microsoft’s FrontPage (which no longer exists) and Dreamweaver.

See also  9 examples of ice-breakers for meetings (remote and physical)

The main advantage of a WYSIWYG editor is that it does not require mastering HTML to create a site. It offers users intuitive features to enter the content they want while directly viewing the rendering. The editor automatically takes care of converting the chosen functions into HTML, in the background. There is therefore no need to enter a code manually.

In the early days of the web, the use of various fonts was very limited, as visitors’ browsers could not support all of them. It was also necessary to do the markings manually and to specify the white spaces in the source code.

With the arrival of WYSIWYG editors, these various problems have been solved

  • User can choose from multiple fonts,
  • The markings no longer need to be processed manually,
  • The layout is simplified.
  • The content structure of a website can be easily defined,
  • Tables and media (videos, images, graphics) can be inserted directly, without needing to be coded.

Beyond the simple design of the content, WYSIWYG software generally offers the possibility of publish directly on the website. An effective way to facilitate the user’s work! But also, in most cases, they offer the possibility of being able to switch from one mode to another, namely between a code view and WYSIWYG.

Examples of online WYSIWYG editors


Originally designed by Macromedia in 1997, Dreamweaver is now owned by Adobe and part of Creative Cloud. This WYSIWYG editor offers an intuitive graphical interface and allows the creation of websites in a simple way. It offers the possibility of having WYSIWYG functionalities, but also a view with code. This makes it possible to visualize in real time the modifications made to the code. But also, users can directly save their created content on their servers and upload them online.

See also  Geographic segmentation: how to do it? (+ examples)

It works on different browsers and on mobile devices as well as computers.

It is more aimed at a professional target and is available under the Adobe license from 23.99 € per month.


openElement is another visual website creation software, allowing the construction of a site by simply inserting and moving the graphic elements. It is powered by Chromium code and therefore requires the Google Chrome browser.

It is also possible for more advanced users to view the source code for modification.

It is free software and available in open source, only for Windows users.


This WYSIWYG program is free and allows you to create websites responsive. It is aimed at both beginners and experienced developers. RocketCake does not require knowledge of computer language, but offers the ability to edit content with code.

Its interface is intuitive, and on the same model as that of openElement. It allows easy and quick handling.


CKeditor is an open source, out of the box, free WYSIWYG editor. It simplifies the creation of web content and is compatible with the majority of internet browsers.

In addition to its WYSIWYG functions, it has a collaborative feature that allows users to share their comments and text revisions.

See also  The feedback sandwich method: definition and examples

It also allows you to get stable and clean code, without doing it manually. It is accessible to everyone and easy to use.


This is a popular, free, WYSIWYG editor for viewing rendering on the Firefox browser. BlueGriffon allows the creation and editing of pages in HTML4, HTML5 and XHTML. It works equally well under Windows and Mac OS systems and offers nearly 2,500 free license templates for website creation.

It is available in a 20-language version and offers a paid version to access more features, especially at the level of the CSS editor and ready-to-use templates. For example, the paid version gives access to an EPUB editor to edit e-books.


Quill is a program developed entirely in JavaScript which allows a rich and 100% configurable editing experience. It is compatible with all modern browsers, whether on mobile, tablet or computer. It can be extended with specific modules according to individual needs. This WYSIWYG editor has many customization options and multiple documentations for getting started.

It is a free WYSIWYG software, which is aimed at web developers.


It is surely one of the most used WYSIWYG editors. It is flexible, customizable, easy to use and free. TinyMCE was the default editor for WordPress. It is quite comprehensive and offers various formatting and content editing tools.

It is available in paid version with advanced features.

HubSpot Community

To go further, discover this free introductory guide to HTML and CSS languages ​​for marketers.Introductory guide to HTML and CSS languages

Leave a Comment

Your email address will not be published.