What is a WYSIWYG editor and which one is right for you?

The acronym WYSIWYG stands for ‘What You See Is What You Get’—the idea that the final output will match what you see on screen during editing. While widely adopted, this approach divides opinion among users of different editing tools. Is it really practical to design text and web content visually, letting the software take care of the un­der­ly­ing code? In this article, we explore the ad­vant­ages and drawbacks of the WYSIWYG model and introduce some of the most popular editors that follow this principle.

What exactly does WYSIWYG mean?

The somewhat cryptic term WYSIWYG simply means that what you see in the editor is exactly what you’ll get in the final output. For many users, this concept might seem abstract—unless they’re familiar with programs like Microsoft Word. In fact, Word is a classic example of a WYSIWYG editor: the way your text appears on screen—with fonts, bold text, para­graphs, and more—is exactly how it will look when printed. For example, to italicise a word, you just highlight it and click a button—no coding required.

In reality, this kind of text is es­sen­tially code. Without a program like Word, you would need to manually insert tags into the text—for example, <italic>word</italic>—which are then in­ter­preted and rendered by the output device. In this case, the printer would serve as the output device. However, gen­er­at­ing a PDF or viewing the document in a browser also counts as output, as both are forms of digital pub­lish­ing. When it comes to HTML editors, deciding whether or not to use a WYSIWYG approach is a key con­sid­er­a­tion. But before diving into the details, it’s worth taking a quick look at the history of these editors.

How do WYSIWYG HTML editors work?

A WYSIWYG editor for building websites is designed to let users create pages without needing in-depth knowledge of HTML. Instead of writing code manually, users interact with visual tools and features, while the software auto­mat­ic­ally generates the cor­res­pond­ing HTML behind the scenes.

• Font: In the early days of the web, the ability to use various fonts was quite limited. Besides Times New Roman, Verdana, and Arial, which were installed on most computers, web designers couldn’t use al­tern­at­ive fonts. After all, there was no guarantee that a website visitor’s browser of could display them. Nowadays, this issue is much less sig­ni­fic­ant. In a WYSIWYG HTML editor, users can choose from many fonts.
• Font styling: Text styling includes options like italic, bold, underline, strikethrough, or small caps. With a suitable WYSIWYG editor, whether for creating HTML code or word pro­cessing, users don’t need to manually apply tags but can edit the text with a simple click.
• Layout: Page layout and white space play a key role in shaping a website’s overall look and feel. By stra­tegic­ally placing content, web designers can direct the viewer’s focus and establish a clear visual style. Without WYSIWYG tools, defining white space—areas without content—would require manually spe­cify­ing exact pixel values in the code.
• Struc­tur­ing: Like printed texts, website content needs to be organised so visitors can navigate it easily. Through (sub)headings, which can be easily set in WYSIWYG editors, readers are better guided through the text.
• Tables: Lists and tables can enhance web content. With software that supports WYSIWYG, web designers can insert these elements directly without having to la­bor­i­ously input them as code.
• Media: Websites are not just text. Videos, images, and other graphic elements make up a large part of the World Wide Web. To display these contents, website creators must embed them in the HTML code. A WYSIWYG HTML editor does this auto­mat­ic­ally, often allowing users to drag and drop the re­spect­ive objects to the desired locations.

WYSIWYG editors offer more than just content design features. In many cases, you can publish content directly to your website from within the editor. These tools often help with project or­gan­isa­tion as well—for instance, by dis­play­ing subpages in a clear sidebar structure. Another useful feature is the ability to switch seam­lessly between the WYSIWYG interface and the raw code view.

WYSIWYG editors for HTML

Opting for a WYSIWYG HTML editor pays off in many situ­ations. Es­pe­cially beginners can create their own — albeit simple — websites this way. In the following sections, we summarise some of the most well-known programs for you.

Dream­weaver

Mac­ro­media launched Dream­weaver back in 1997 (at that time ex­clus­ively for Mac OS). In the meantime, the software giant Adobe has acquired Mac­ro­media.

SeaMonkey Composer

With SeaMonkey, users get a complete internet suite on their computer. In addition to a browser, email and IRC clients, and an address book, the SeaMonkey Composer includes its own WYSIWYG HTML editor.

Kom­poZer­FR

The KompoZer also ori­gin­ated from the Mozilla en­vir­on­ment. Like SeaMonkey, the structure of this WYSIWYG HTML editor is kept very simple.

Brackets

Brackets is dis­trib­uted by Adobe, but unlike Dream­weaver, it is open source and available for free. Brackets is primarily a text editor and not a WYSIWYG editor. However, the preview feature does make the program lean towards a graphic editing software.

NetO­b­jects Fusion

The first version of NetO­b­jects Fusion was released in 1996, developed by former Apple employees. The WYSIWYG principle advocated by NetO­b­jects Fusion even more closely resembles a desktop pub­lish­ing program than a typical HTML editor. Users of the software arrange website elements with precise drag-and-drop.

openEle­ment

openEle­ment is another free WYSIWYG html editor. However, it is based on the Chromium code, which also underlies Google’s Chrome browser. Here, too, building a website works by inserting and moving elements in a graphical view.

Rock­et­Cake

For the free WYSIWYG html editor Rock­et­Cake, users generally do not need any HTML or CSS knowledge. In its structure, this editor is similar to the com­pet­it­or openEle­ment.

The central section of the interface is dedicated to editing, flanked on both sides by panels listing website elements and file nav­ig­a­tion tools. What sets the program apart is its ability to ef­fort­lessly build re­spons­ive websites for mobile devices. This is made possible by the Break­point Editor, which enables designers to define specific CSS break­points where the layout adapts to different screen sizes. Naturally, Rock­et­Cake also supports direct code editing for those who prefer more control.

TOWeb

TOWeb by Lauyan Software follows the same WYSIWYG approach as Rock­et­Cake. Both programs par­tic­u­larly share a focus on re­spons­ive design.

Dis­ad­vant­ages of the WYSIWYG concept

At first glance, WYSIWYG editors seem like the perfect solution: they allow users to create appealing (web) documents without any knowledge of HTML or pro­gram­ming. However, a closer look reveals some drawbacks. Many users still prefer tra­di­tion­al code editors like Notepad++, which allow for direct and precise editing of the source code. The reason is simple: while WYSIWYG editors offer con­veni­ence, they often limit control and flex­ib­il­ity in the design process.

• Lack of control: WYSIWYG editors often apply format­ting that users can only influence by nav­ig­at­ing through numerous windows and menus. This is not the case when working directly with HTML or other markup languages: here, creators can see exactly what will happen to the text during com­pil­a­tion. That’s why some users prefer to write documents for print or PDF output using the TeX macro language or the LaTeX software package built upon it. Ori­gin­ally developed for academic writing, TeX allows precise control over format­ting rules and makes it easier to integrate math­em­at­ic­al and sci­entif­ic formulas into the running text.

• Web-specific chal­lenges and varying display formats: Even with WYSIWYG editors, there’s no guarantee that the final result will look exactly as it appears on the designer’s screen. That’s because there’s no single, fixed output on the web. Different systems and browsers may render the same content in different ways, not to mention mobile devices, which introduce yet another set of display vari­ations. For this reason, the promise of ‘What you see is what you get’ is often an illusion in web design. Designers typically test their websites across multiple platforms before pub­lish­ing them.

• Code quality: WYSIWYG editors generate HTML code in the back­ground. However, this code is not always of high pro­fes­sion­al quality. Web designers have often cri­ti­cised these tools for producing bloated or faulty source code, which can lead to long loading times and display issues.