What is WYSIWYG?

WYSIWYG is an acronym for “What You See Is What You Get.” It’s a type of editor that allows you to visualize the final result as you’re creating it, without having to edit HTML or CSS code. 

WYSIWYG applications do this by converting layout commands into code for you.

Microsoft Word and Adobe Photoshop are examples of WYSIWYG editors. These types of editors allow you to see on-screen exactly what the final product will look like.

For instance, if you’re typing up a resume on a word processor, the font, size, color, and spacing you see on your computer will be exactly what you print out and submit to your new employer. 

The same applies to other software editing programs such as web builders. For example, if you want to change the color of your blog’s background, you simply select ‘blue’ in the web editor.

Without WYSIWYG, you would need to edit the lines of code yourself.

Advantages and disadvantages of WYSIWYG editors

The greatest advantage of using a WYSIWYG editor is that it empowers anyone to create great designs or documents, without having to learn code.

Other benefits include:

• Saves time – instead of writing lines of code, simply click an editor button to change the appearance of a page, image, or text
• Create more – easily add intricate features otherwise inaccessible to those without coding knowledge
• Accuracy – see what a final product looks like before you print/publish
• User experience – very easy to use 

However, there are some downsides:

• Code bloat – WYSIWYG adds a few more lines of code to complete the command-code conversion, which may affect website speeds and SEO
• Resolution – different monitors and printers have different resolutions, so when printing, the output may not look exactly the same as what you saw in the editor
• Skills – web developers may see WYSIWYG as a “cheat-sheet” to HTML coding

Despite this, WYSIWYG editors are widely used and are very helpful. 

WYSIWYG tools and editors for HTML

A WYSIWYG HTML editor has a variety of features that convert action-commands into code.

Here are a few popular WYSIWYG HTML editors:

1. Adobe Dreamweaver – can handle different code languages creating an output based on your needs
2. Froala – user experience focused; has a collaborative tool to easily work with developers and designers
3. Editor.js – an open-source editor that uses blocks and returns with clean data
4. TinyMCE – a rich text editor made to help developers

Zyro – a website building platform to help design and publish a website quickly and easily