Creating a Website with a WYSIWYG Editor

September 20, 2018

10:56 am

Website builders that use a What You See Is What You Get (WYSIWYG) editor are super easy to use. The clue is in the name – when you use the editor, what you see is, well, exactly what you’ll get when you publish your website.

This style of website creation differs from more technical website builders that rely more heavily on coding, for example. These require a level of technical expertise that very few possess. However, a WYSIWYG editor makes the process of website building accessible to everyone, with clear, easily-navigable menus and straightforward controls.

In this guide, we’ll explain what a WYSIWYG website builder looks like, how they work and which website builders actually use this brilliantly simple design approach.

Which WYSIWYG Editor Do We Rate Best?

What is a WYSIWYG Editor?

In short, a WYSIWYG editor is a simple web publishing tool that lets you see exactly what your site will look like as you build it. There’s no need to continuously preview after coding. As you create your site in the back-end, ‘what you see is what you get’ when you publish.

In effect, this means that when you add a text block, or change an image or the background colour of your site, you will see these changes as soon as you make them.

This means that anyone can have a go at creating a website, even without past experience of doing so or any knowledge of coding. This isn’t just about words and images, either. You can use a WYSIWYG editor to add more complex page elements in a perfectly simple way.

Here’s a simple example. You’ll see below that, as soon as we add a contact form above the menu, we can see it on the site.

How to Use a WYSIWYG HTML Editor

HTML is the standard markup language for creating web pages, and therefore building websites. In practice, the HTML coding language allows programmers to add structure to pages.

However, when using a WYSIWYG editor, all of the coding is taken care of for you by the software you use – for example, Wix, Weebly or Squarespace.

As you add and change elements on your site, the software will automatically create and change the HTML code in the background to mirror what you’re doing on-screen. You never need to delve into the code yourself – you work with the user-friendly editor instead.

Theory into practice

So, that’s how WYSIWYG editors work, but how do you actually use them?

Most of the big WYSIWYG website editors out there use what’s known as a drag-and-drop system. There’ll be a menu (normally on one side of the screen) from which you’ll select different page elements – this could be anything from a text block, to an image gallery or a new menu. Then, you’ll drag the elements to exactly where you want them onto the webpage and drop them into place.

It’s a remarkably simple and intuitive system for building a website and, should you want a more in-depth customizing experience, you can usually fine-tune each element after you’ve dropped it into place.

Free WYSIWYG editors

You can even get the intuitive and powerful WYSIWYG website builder experience for free.

However, it isn’t always desirable to try and build a website (with a WYSIWYG builder or not) for free. You’ll typically be left with a substandard website as you won’t have access to the full range of features available with the software you’re using – for example, you might not be able to install plugins.

Your site will also have to host adverts, either from the website building platform you’re using, or from third-parties which you cannot vet.

There’s also a strong chance that your site will have limited storage for photos and assets on site, meaning that you might end up with a pretty spartan-looking homepage.

Importantly, you’ll be limited to the amount of bandwidth available for your site. This is a huge drawback, as it will literally restrict the amount of users who can visit your site.

Find out more about why free website builders should be avoided

Best WYSIWYG Editors to Choose

There are loads of different WYSIWYG website builders out there but, here at Tech.Co, these are out three overall favorites.

Scroll horizontally if you’re using a mobile device to view the whole table.




Wix logo smallWeebly logo smallSquarespace logo small
Test score4.5 stars4 stars4 stars
VerdictWix makes it super easy to edit the design of your site, with a drag-and-drop editor.Another site using a drag-and-drop editor, Weebly’s relative lack of templates put it in second place.Squarespace uses individual WYSIWYG blocks, rather than a drag-and-drop editor, but its incredible templates make it a great choice.
Number of templatesOver 5005691
Features4 stars5 stars4 stars
Design Flexibility4 stars5 stars4 stars
Value for Money4 stars3 stars4 stars
Help and Support5 stars4 stars4 stars
Customer Score5 stars4 stars4 stars
Ease of Use4 stars3 stars4 stars
Free plan14-day free trial
Paid plan (monthly)Starts from $5Starts from $8Starts from $12
Try it TodayVisit WixVisit WeeblyVisit Squarespace*

* Take 10% of Squarespace with code ‘TECH10’

Wix logo Wix

Our best-rated website builder, Wix perfects the WYSIWYG builder tool with excellent templates that are simple to use. It’s also great value for money.

With Wix, it’s no exaggeration to say that you’ll be able to produce professional-looking websites in a matter of minutes.

It’s remarkably easy to use, with an intuitive approach to help you build a site. Wix is powerful, too, letting you create everything from a blog to a fully-featured online store.

Create Your Dream Website Easily With Wix Today


  • Great looking templates
  • Super-easy drag-and-drop WYSIWYG editor
  • Loads of customization options


  • Can’t change to a different template once your site is published
  • Expensive to remove adverts

squarespace logo tiny Squarespace

While customizing a website with a WYSIWYG is great, it’s often best to start with a template. That way, your site remains easy-to-use for visitors, since it’s designed around some good core principles.

When it comes to templates, Squarespace offers the best on the market. However, you’ll still be able to customize every aspect of your design easily, should you wish.

Each template is clean, modern and slick, so your website will look even better than you imagined. It isn’t the cheapest website builder around, and it only offers a 14-day trial, but it’s worth the price for those gorgeous templates.

Make a Stunning Website Easily With Squarespace and take 10% off with code 'TECH10'


  • Offers the best website templates
  • Great for ecommerce sites
  • Intuitive WYSIWYG blog editor


  • No free plan 
  • Menus on the editor can be a bit unintuitive

Weebly logo thumbnail WYSIWYG website editors Weebly

Weebly is one of the most fully-featured website builders on the market. It offers a huge a variety of apps and plugins developed by Weebly itself, as well as an extensive third-party app store.

This, combined with the simple WYSIWYG editor function, means that Weebly is one of the most powerful website builders on the market.

Build A World-Class Website With Weebly Today


  • Intuitive WYSIWYG editor
  • Swap back-and-forth between templates easily
  • Loads of powerful and easy-to-install apps


  • More expensive than Wix
  • Not as many templates as we’d like
  • Can’t edit how your site will look on mobile devices
About our links

Some of the links on our page will take you directly to a provider or retail website, where you may find deals and discounts. If you make a purchase at this stage, we may receive a payment. This has no additional cost to you, and never affects the editorial independence of our reviews.

Did you like this article?

Get more delivered to your inbox just like it!

Sorry about that. Try these articles instead!

Tom Fogden is a writer for with a range of experience in the world of tech publishing. Tom covers everything from cybersecurity, to social media and website builders when he's not reviewing the latest phones, gadgets, or occasionally even technology books.