What is WYSIWYG? | What You See is What You Get

With a WYSIWYG editor, how your design and content appears on the editing platform is exactly what it will look like in the final version.

What is WYSIWYG? | What You See is What You Get

Dustin Horning 07.05.2018

Do you remember what computers looked like before we had pretty operating systems like Windows with fancy folders and icons? It was nothing more than a black screen with white white text, referred to as command line interface. It was boring, it was complicated, and it was once the only option that we had execute commands on our PC.

The same goes for web design. In the early years, web design involved a wall of complicated code that only the skilled programmer could understand — until the WYSIWYG editor was invented, that is.

What Is WYSIWYG Exactly?

WYSIWYG stands for “what you see is what you get”. With a WYSIWYG editor, how your design and content appears on the editing platform is exactly what it will look like in the final version.

Microsoft Word is a common example that helps to define a WYSIWYG editor. You have a blank page with some formatting tools that allow you to add and format words, tables, images and so forth. What you see on the screen is exactly what you see when you print or share the document. In other words; it’s “what you see is what you get”. You’ve probably used one several times without knowing it. Here’s a sample of one below:

Simple, huh?

The WYSIWYG approach to web design is distinct to conventional methods which uses HTML and other markup languages where the development screen is just a wall of code and you’re not able to see the end-result in real-time as you add new page elements or lines of code.

WYSIWYG editors reached the masses when user-friendly website builders like Wix emerged, giving non-technical people an approachable way to build web pages. Slowly but surely enterprise content management systems began to give WYSIWYG editing more presidency, giving marketers a way to build web pages, landing pages, and email newsletters without calling on the IT department.

All in all, a WYSIWYG editor makes it easier for marketers to deliver a more enjoyable customer experience independently. After all, web visitors don’t want to stare at a wall of not-so visually appealing text. They want to see nicely formatted paragraphs, images, videos and other graphics — all of which enhance user experience.

What Are the Advantages of WYSIWYG Editing?

There are many advantages to WYSIWYG editors, especially for from a design point-of-view as we see below:

  • Ease of use: Many WYSIWYG editors have a drag-and-drop interface where users can add (or remove) different components (i.e., text, images and videos) on a webpage without having any knowledge of web programming. Being able to piece together parts of a website in such a way is intuitive and fits in with the brain’s natural way of organizing elements.
  • Speed and efficiency: WYSIWYG editors work much faster than coding a page out from scratch — especially if the man or woman in charge is a non-technical marketer. There’s no need to switch screens and wait for the preview to generate. In addition to the instant gratification offered, users can focus more closely on design rather than be bogged down by the technicalities.
  • Flexibility: WYSIWYG design tools enable you to make small changes on the fly. If an image is slightly out of position, you can fix this in a matter of a few simple clicks.Plus, you can easily keep your site more up-to-date this way.
  • Fool-proofing: Mistakes are far easier to catch in a WYSIWYG editor than in a block of code. And also, on a WYSIWYG editor, these mistake can easily be resolved.
  • Quickstarts: Many WYSIWYG editors lets you choose from a selection of templates to start with. By accelerating the early stages of the developmental cycle, you get more time to focus on the content for your intended audience.

What Are the Biggest Drawbacks to WYSIWYG Editing?

Like anything, WYSIWYG editors also have several disadvantages. The most notable ones that we feel you should be aware of are listed below:

  • Possibly misleading representation: Occasionally, what you see isn’t always what you get. Now that websites can be viewed on a variety of devices, screen sizes and resolution s some WYSIWYG editors don’t cater for responsive design or give you the option to see what how your website will look like on a mobile device.
  • Inconsistency: With countless WYSIWYG solutions out there, many services will different user interfaces and conventions. If you get used to using one editor, switching to another one isn’t always easy.
  • Limited functionality: Not everything can be simplified to a drag-and-drop interface. Some page elements will still need some HTML/CSS trickery to produce your desired end-result. Other times, you may need to customize a particular pre-made element on a page (i.e. sign up box) to meet your requirements and this will require you make some “under the hood” changes.
  • Non-standard coding: Many editors either generate excessive code or generate code that’s non-compliant with current standards and protocols.. While it won’t make a difference to your website’s appearance, too much code can clog up the loading times of a website occasionally.

That being said, WYSIWYG editors are constantly improving, with enterprise-grade WYSIWYG editors like the Zesty.io editor boasting cleaner code, better aesthetics, and built-in SEO features.

WYSIWYG Editor Examples

If you’re keen to build your website with a WYSIWYG editor but don’t know where to start, here are some well-known editors that you may wish to investigate:

  • Adobe Dreamweaver: This massively popular option boasts a large library of code snippets and file transfer features. However, it comes at a hefty price and is only recommended if you want a detailed and complex design experienced.
  • Create: Exclusive to Mac operating systems, this service combines the major features of many of the big-name editors into a single cheap package.
  • Quill: This free and open-source option is highly customizable. Consider this one if UI customization matters a lot to you.
  • Seamonkey Composer: A simple all-in-one alternative to its complex brethren. It’s also one of the few editors that’s Linux compatible.
  • Summernote: Another open source project that’s easy to customize to your liking. Plus, it’s backed by an active forum community ready to help you if you ever need it.
  • Zesty.io: Remember when we mentioned most editors don’t focus on SEO? Here’s the exception! Zesty.io is uniquely tuned to engage customers and accelerate page visits through its search engine optimization features.

Choosing the Right WYSIWYG Editor for Your Business

So, how do you choose the right WYSIWYG editor?

In our view, it all comes down to personal preference and the task at hand. Certain editors are better suited to certain tasks. Quill is great if you are looking to build an efficient and user-friendly UI, while something like Zesty.io works well for larger businesses and enterprises who wish to build websites, apps and single page applications with greater flexibility and functionality.

There is no wrong answer when it comes to a WYSIWYG editor, but you will find that you gravitate to certain ones that feel familiar to you, that suit your design style, that may fit your business model best, and that appeal to whatever tasks you are trying to complete.

More from Mindshare: Marketing Technology

Placeholder image

Agency Teams Working in Zesty.io

We believe we can improve agency's content governance with great CMS design.

Read Article
Placeholder image

Making Decisions in the new Accounts UI Built in React/Redux

The overarching theme with all of this is decoupling, as we have decoupled data from actions, actions from views, views

Read Article
Placeholder image

A/B Testing: What It Is And How To Get Started

You’ve probably heard the term A/B testing before. It gets thrown around the digital marketing space a whole lot —

Read Article
Placeholder image

Switching to Google Cloud: Interview with Zesty.io DevOps leader Chris Hiestand

Zesty.io adopts Google Cloud for their SaaS platform

Read Article
Dustin Horning photo

Dustin Horning

Zesty.io Alumni, Zesty.io

I enjoy empowering people to use the internet to create new things, grow their passions and make an impact.... Learn More

Exploring content solutions? Looking to replatform?

Speak with an Expert


Call Us

Between 9-5pm PST we are available directly at +01 (844) GO ZESTY (469-3789)


Chat with Us

To speak with someone in sales and marketing, use the chat popup on this page. To speak with a developer, join https://chat.zesty.io