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 underlying code? In this article, we explore the advantages and drawbacks of the WYSIWYG model and introduce some of the most popular editors that follow this principle.
- Get online faster with AI tools
- Fast-track growth with AI marketing
- Save time, maximize results
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, paragraphs, and more—is exactly how it will look when printed. For example, to italicize a word, you just highlight it and click a button—no coding required.
In reality, this kind of text is essentially code. Without a program like Word, you would need to manually insert tags into the text—for example, <italic>word</italic>—which are then interpreted and rendered by the output device. In this case, the printer would serve as the output device. However, generating a PDF or viewing the document in a browser also counts as output, as both are forms of digital publishing. When it comes to HTML editors, deciding whether or not to use a WYSIWYG approach is a key consideration. 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 automatically generates the corresponding 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 alternative fonts. After all, there was no guarantee that a website visitor’s browser could display them. Nowadays, this issue is much less significant. 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 processing, 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 strategically 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 specifying exact pixel values in the code.
- Structuring: Like printed texts, website content needs to be organized 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 laboriously 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 automatically, often allowing users to drag and drop the respective 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 organization as well—for instance, by displaying subpages in a clear sidebar structure. Another useful feature is the ability to switch seamlessly between the WYSIWYG interface and the raw code view.
- Intuitive website builder with AI assistance
- Create captivating images and texts in seconds
- Domain, SSL and email included
WYSIWYG editors for HTML
Opting for a WYSIWYG HTML editor pays off in many situations. Especially beginners can create their own — albeit simple — websites this way. In the following sections, we summarize some of the most well-known programs for you.
Dreamweaver
Macromedia launched Dreamweaver back in 1997 (at that time exclusively for Mac OS). In the meantime, the software giant Adobe has acquired Macromedia.
| Advantages | Disadvantages |
|---|---|
| ✓ Both WYSIWYG and Code Mode | ✗ Only available through subscription model |
| ✓ Preview function for various browsers | ✗ Knowledge of HTML and CSS is necessary |
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.
| Advantages | Disadvantages |
|---|---|
| ✓ Comprehensive internet suite | ✗ Suitable only for rather straightforward projects |
| ✓ Free of charge | ✗ Limited functionality |
KompoZerFR
The KompoZer also originated from the Mozilla environment. Like SeaMonkey, the structure of this WYSIWYG HTML editor is kept very simple.
| Advantages | Disadvantages |
|---|---|
| ✓ Integrated markup cleaner that checks for W3C compatibility | ✗ No active further development |
| ✓ Advanced features like CSS editor or form wizard | ✗ No support for modern web technologies such as HTML 5 |
Brackets
Brackets is distributed by Adobe, but unlike Dreamweaver, 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.
| Advantages | Disadvantages |
|---|---|
| ✓ Real-time preview of changes | ✗ Preview only works with Google Chrome |
| ✓ CSS files can be opened and edited at the appropriate places | ✗ Less functionality than IDEs |
NetObjects Fusion
The first version of NetObjects Fusion was released in 1996, developed by former Apple employees. The WYSIWYG principle advocated by NetObjects Fusion even more closely resembles a desktop publishing program than a typical HTML editor. Users of the software arrange website elements with precise drag-and-drop.
| Advantages | Disadvantages |
|---|---|
| ✓ No HTML knowledge required thanks to drag-and-drop | ✗ Adjustments outside the software are difficult |
| ✓ Source code view available |
openElement
openElement 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.
| Advantages | Disadvantages |
|---|---|
| ✓ Support for modern web standards | ✗ No support for Linux or MacOS |
| ✓ Templates and drag-and-drop | ✗ Limited support for dynamic content |
RocketCake
For the free WYSIWYG html editor RocketCake, users generally do not need any HTML or CSS knowledge. In its structure, this editor is similar to the competitor openElement.
The central section of the interface is dedicated to editing, flanked on both sides by panels listing website elements and file navigation tools. What sets the program apart is its ability to effortlessly build responsive websites for mobile devices. This is made possible by the Breakpoint Editor, which enables designers to define specific CSS breakpoints where the layout adapts to different screen sizes. Naturally, RocketCake also supports direct code editing for those who prefer more control.
| Advantages | Disadvantages |
|---|---|
| ✓ Easy creation of responsive websites | ✗ Not ideal for very large-scale web projects |
| ✓ Integrated Breakpoint Editor |
TOWeb
TOWeb by Lauyan Software follows the same WYSIWYG approach as RocketCake. Both programs particularly share a focus on responsive design.
| Advantages | Disadvantages |
|---|---|
| ✓ Support for e-commerce and SEO | ✗ Limited features in the basic version |
| ✓ Hosting is simplified with the suggested services | ✗ Advanced customizations are more difficult |
Disadvantages 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 programming. However, a closer look reveals some drawbacks. Many users still prefer traditional code editors like Notepad++, which allow for direct and precise editing of the source code. The reason is simple: while WYSIWYG editors offer convenience, they often limit control and flexibility in the design process.
-
Lack of control: WYSIWYG editors often apply formatting that users can only influence by navigating 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 compilation. 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. Originally developed for academic writing, TeX allows precise control over formatting rules and makes it easier to integrate mathematical and scientific formulas into the running text.
-
Web-specific challenges 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 variations. 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 publishing them.
-
Code quality: WYSIWYG editors generate HTML code in the background. However, this code is not always of high professional quality. Web designers have often criticized these tools for producing bloated or faulty source code, which can lead to long loading times and display issues.