Menu Search
Jump to the content X X

Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now →

20 Useful WYSIWYG Editors Reviewed

When it comes to coding editors, it’s damn hard to a get a clear overview of all the benefits and functionalities different editors have to offer. However, in the end everybody needs one, so it’s important to know which editor is best tailored to your personal needs.

WYSIWYG-editors are often criticized by real coding ninjas for bloated, dirty and not standards-complaint source code they’ve been producing over the last years. However, WYSIWYG-editors have become much better recently. Some of them even produce valid and elegant code. [Content Care Nov/15/2016]

Sometimes you need to provide your clients with some simple tools to edit or update their web-sites. And this is where the utility of WYSIWYG-editors comes in. As a web-professional you need to provide your clients with some sophisticated advice and offer a simple yet effective tool — e.g. a WYSIWYG-editor.

You may want to take a look at the following related posts:

We believe that it would be wrong to recommend you some “best” editors, because the choice always depends on your requirements, primary goals, skills and experience. Therefore in this article we’ve tried to give you an overview of both useful and deprecated WYSIWYG-editors.

Hopefully, you’ll find some editors you’ve never heard about before. Or maybe you’ll find some features you miss in your current editor and risk to experiment with some promising alternatives to improve your workflow. Besides, you can learn what editors you could use and what tools you shouldn’t use.

What does WYSIWYG mean? Link

The somehow cryptic abbreviation WYSIWYG stands for “What You See Is What You Get”. In such editors you edit not directly the source code of your documents, but its presentation as it (hopefully) will appear in the final document. So instead of writing blocks of code manually (as you e.g. would do it in Word or Latex), you manipulate with design components using an editor window. This means that you view something very similar to the end result while the document or image is being created.

Notice: this post reviews only desktop-based WYSIWYG-editors which run on Windows, Linux or Mac. It doesn’t provide an overview of JavaScript-based WYSIWIG-editors — you can find an extensive overview of JavaScript-based WYISWYG Web Editors in the post Through The Web WYSIWIG Web Editors — The List3 or WYSIWIG Editors Test4.

Adobe Dreamweaver Link

Dreamweaver5 (Win / Mac)
Previously Macromedia Dreamweaver, this tool is one of the commonly used editors which can support developers, improve the workflow and save you a lot of time during coding. While previous versions of Dreamweaver sometimes produced rather quirky source code, the last version is able to generate (mostly) quite clean markup.

Dreamweaver also offers numerous helpful tools such as the library of code snippets, ftp management, server debug and an integrated coding development. E.g. you can view CSS information in a single, unified CSS panel that makes it easy to see the styles applied to a specific element, identify where attributes are defined, and edit existing styles without entering Code view. See also our List of Dreamweaver Tutorials. Price: $400 (version CS3).

Screenshot6

Some of Dreamweaver’s endless features:

  • Advanced CSS Editing
  • Integrated coding environment
  • Spry framework for Ajax
  • Browser Compatibility Check
  • Integration with Photoshop CS3 and Fireworks
  • Code snippets (e.g. CSS Layouts)
  • FTP management
  • XML support
  • FLV support
  • Learning resources (e.g. Adobe CSS Advisor)

Amaya Link

Amaya7 (Win / Mac / Linux)
What really makes Amaya different is the fact that it is a hybrid of a web browser and a web-page editing application — thus you can browse in the Web and edit your pages in the same application. Created by the WWW-concorcium, this allround-tool allows you to manipulate web-sites, change or update their content, insert new images or links. Of course, if Amaya can display these pages.

Screenshot8

The last version of the editor, Amaya 10, was released in February 2008. It is able to work on several documents at a time (several (X)HTML, native MathML (.mml) and SVG (.svg) documents can be displayed and edited at a time). E.g. you can insert mathematical formulas using a pop-up: Amaya converts them via Math-ML on the fly.

Amaya also includes a collaborative annotation application (annotations are external comments, notes, remarks that can be attached to any Web document or a selected part of the document) and it has support for SVG, RDF and XPointer. Open-source.

Adobe Contribute Link

Adobe Contribute9
The main purpose of Adobe Contribute is to allow editing web-sites and blogs for users without any technical expertise. Contribute CS3 enables content authors to update existing websites and blogs while maintaining site integrity. Contribute offers a Dreamweaver integration, enables posting from Microsoft Office and editing from IE 7 and Firefox.

Screenshot10

With a WYSIWYG authoring environment, content authors and contributors can edit or update any website or blog without having to learn HTML. Price: $169 (version CS3).

Microsoft Expression Web Link

Microsoft Expression11 (Win)
Once being severely criticized for its really bad web-editors (Frontpage), Microsoft’s recent editor, Expression, seems to have learnt a lot from its predecessors. Expression attempts to comfort web-users with features which are remarkably similar to Adobe Dreamweaver. However, in a direct comparison Dreamweaver offers more and produces a cleaner code. Nevertheless, Expression does produce decent standards-compliant code and knows how to deal with CSS and CSS-layouts.

The Studio edition with further software applications (graphic design tool, video encoding tool etc.) costs ca. $500. Single Expression package costs $350. You can get Expression by updating Frontpage and thus save some money.

Please notice: Expression isn’t a successor of Frontpage, rather a different development tool. Microsoft Expression, which bears striking similarity to Microsoft SharePoint Designer, is rather designer-oriented, aimed at general web development. Microsoft SharePoint Designer which reflects the emphasis on designing and customizing SharePoint-based sites, can be considered as Frontpage’s big brother.

Screenshot

Some of Microsoft Expression features:

  • ASP.NET 2.0 Integration
  • Advanced CSS rendering
  • XPath Expression Builder
  • Build and format views of industry-standard XML data
  • Tag Property Grid
  • Accessibility Checking
  • Real-time Standards Validation
  • Full Schema Support

Kompozer Link

KompoZer12 (Win / Mac / Linux)
This tool is a branch of NVU which has been developed further after the development of NVU has slowed down. KompoZer is a complete web authoring system that combines web file management and WYSIWYG-editing.

KompoZer is designed to be extremely easy to use, making it a feasible solution for users who want to create sites without obtaining technical knowledge. Compared to NVU, Kompozer produces a cleaner markup and has visible marks — visible carriage returns and block borders.

Screenshot13

The last version was released in August 2008. Kompozer can be considered as a sound alternative for small projects and for users without technical knowledge. But it’s definitely too weak for professional web-development.

NetObjects Fusion Link

NetObjects Fusion14
This editor was once probably the worst yet extremely popular WYSIWYG-editor. It produced horrible source code (only MS Word produced worse source code), but was often given away by web-hosting companies and ISPs. NetObjects Fusion allows you to create web-sites without any technical knowledge. Particulalry if you’d like to create a business card, you may get it done in minutes. But if you want to create professional web-sites, NetObjects isn’t an option worth considering.

Currently NetObjects Fusion is available in its 10th version. The quality of the produced source code might have changed, but it doesn’t really matter. There is a trial-version which requires you to register in a shop. Which is why we have no screenshot for the product. Price: €100.

Seamonkey Composer Link

SeaMonkey Composer15 (Win / Mac / Linux)
This editor is a simple yet powerful alternative for large commercial applications. Being a successor of Netscape Composer, SeaMonkey Composer doesn’t really have anything common with it.

Screenshot16

The editor is powerful yet simple and offers dynamic image and table resizing, quick insert and delete of table cells, improved CSS support, and support for positioned layers. The WYSIWYG-editor is built into SeaMonkey, an all-in-one web application suite.

Create Link

Create17 (Mac)
Create combines the major features of applications like Illustrator, InDesign, Pages, GoLive, Canvas, DreamWeaver, QuarkExpress, Streamline in one easy-to-use, low-cost, OS X native application. Among other things you can add links to text and graphics with drag-n-drop, the tool automatically creates navigation bars and index and you can produce PDF and web-sites from one document.

WYSIWYG Web Builder Link

WYSIWYG Web Builder18
Web Builder is a highly customizable and extensible application with numerous features, scripts and templates. New design elements are added via drag’n’drop, many scripts. Image editing is available within the software.

Screenshot19

The PayPal eCommerce Tools are integrated; RSS Feed object with podcast option, blog with built-in RSS feed option and Google compatible sitemap generator are available. The editor also has numerous extensions such as password protection, RSS feed, RSS parser, photo album and lightboxes.

Editors for non-professionals, newbies and small companies Link

Sandvox20 (Mac)
Sandvox features drag-and-drop website assembly, live editing without a preview mode, over 40 designs, and 17 different pagelets. It’s an easy and elegant website creation tool for people who don’t want to spend too much time developing their websites.

Drag and drop content, watch your site take shape as you create it, and make it available to others with Sandvox’s publishing assistant. Pricing starts at 49,- USD.

Screenshot21

Studioline Web322 (Win)
The results of Studioline can be observed only if Javascript is activated — otherwise you won’t see anything at all. The source code doesn’t contain tables, but it has a very low quality and is extremely bloated. Don’t try this at home.

Website X523 (Win)
WebSite X5 is a completely visual software: web-sites aren’t coded but “clicked” together. Remarkable: the results are standards-conform. Price: $60+.

Screenshot24

<oXygen/>25 (Win / Linux / Mac)
Actually, <oXygen/> is an advanced XML editor, but it also offers a number of useful tools for both newbies and professional web-developers. In fact, you can exploit the tool for editing (X)HTML-web-documents. E.g. it makes easier the document sharing between content authors by including a Subversion (SVN) client. The SVN client allows you to browse repositories, check for changes, commit changes, update your working copy and examine the revision history. The editor is available as standalone desktop or Java Web Start application, or as an Eclipse plugin. Price: $59.

No code and text-editors? Wait, there will be more. Tomorrow.

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2014/05/next-generation-responsive-web-design-tools-webflow-edge-reflow-macaw/
  2. 2 https://www.smashingmagazine.com/2009/03/10-things-to-consider-when-choosing-the-perfect-cms/
  3. 3 http://geniisoft.com/showcase.nsf/WebEditors
  4. 4 http://www.standards-schmandards.com/2007/wysiwyg-editor-test-2/
  5. 5 http://www.adobe.com/products/dreamweaver
  6. 6 http://www.adobe.com/products/dreamweaver
  7. 7 http://www.w3.org/Amaya/
  8. 8 http://www.w3.org/Amaya/
  9. 9 http://www.adobe.com/products/contribute/
  10. 10 http://www.adobe.com/products/contribute/
  11. 11 http://www.microsoft.com/expression/
  12. 12 http://kompozer.net/
  13. 13 http://kompozer.net/
  14. 14 http://www.netobjects.com/
  15. 15 http://www.seamonkey-project.org/
  16. 16 http://www.seamonkey-project.org/
  17. 17 http://www.stone.com/Create/Create_Overview.html
  18. 18 http://www.wysiwygwebbuilder.com/
  19. 19 http://www.wysiwygwebbuilder.com/
  20. 20 http://www.karelia.com/
  21. 21 http://www.karelia.com/
  22. 22 http://www.studioline.biz/EN/products/overview-web/default.htm
  23. 23 http://www.websitex5.com/en/index.html
  24. 24 http://www.seamonkey-project.org/
  25. 25 http://www.oxygenxml.com/

↑ Back to top Tweet itShare on Facebook

Advertisement

Sven is the co-founder and former CEO of Smashing Magazine. He's now writing at his Conterest Blog, where he focuses on blogs, content strategy, writing and publishing — all in German.

  1. 1

    I’ve been using Dreamweaver for years, but I only ever use it in code view and stuck with it because I sometimes need a code hint .. and I have a useable management, ftp and diff system going on with it (using winmerge).

    But I feel daft using a WYSIWYG app to simply type markup, especially when I’m sure there must be a hundred and one better scripting/coding interfaces, yet I’ve never managed to find one that works particularly well for me. Only a cluster of apps which must be used together.

    I’d be interested in Smashing Magazine’s overview of the non-wysiwyg authoring options available to me that provide site management, code-hints, ftp, diff tools.
    What is the ‘pro-tool’ for all these things.

    0
  2. 2

    Are you serious!?!?!

    How about mentioning some of the professional programs used by professionals on here, like Eclipse, Netbeans, .NET, etc…. Real professionals use a development environment that helps and supports the coding language your writing. Sure, cutting your teeth on dreamweaver or one of these other freebie toys is a great way learn the ropes. You need to move into textpad or something non-GUI based to really gain any real talent or skill.

    I hate to disagree here but I’m gonna have to. Just because some people prefer to use one solution over the other doesn’t mean they have no “real” talent or skill or that they aren’t professionals. It means that the program they are using works for them. That attitude reminds of a guy I used to work with who was MS certified who told me our company shouldn’t even consider using PHP because the language would be dead in a year (it’s now 3+ years later).

    A lot of big companies will ask you to hand write out some code for them as an example in an interview. If DOCTYPE and meta information wasn’t the first thing you thought of when reading that, your not even close yet to being a professional and should consider switching to a different development environment.

    Since I own my own company, I don’t have to worry about interviews but I’m of the opinion that just because I can’t write the DOCTYPE or meta info from memory doesn’t mean I’m not close to being a professional. It means that I have templates set-up with these things already in place to maximize my time and be able to make more money. Part of being a professional is good time management. If I have to repetitively type something because that makes me a “professional” then I’ll gladly call myself an amateur and pass on those savings to my clients—which I’m sure they appreciate a lot more than knowing if I can type all the code by hand.

    13
    • 3

      Jen, I love your comment. Right on the spot correct.
      I’m a self-employed web-developer and I use .NET. Why? Because I started my coding with it on previous employments and haven’t bothered changing since it fulfills all my needs. It is always quite time-consuming to start using a new tool.
      No, I wouldn’t be able to write the DOCTYPE, nor all the META-tags needed from within my head. It is all there on the internet to lookup when I need something specific.
      An important thing to remember about being a self-employed professional is that he professional needs to have other stuff in his/her head like:
      * Which task to work on at the time
      * Who to contact to get the next task
      * Search for more work
      * Do reports on work done
      * Invoice clients
      * Check incoming payments and overdue invoices
      * Surf the internet in order to keep up with the latest development in the field
      * And sooo much more

      An employed developer doesn’t need to think about all this stuff, therefore the simple answers and complaints sometimes. But we, the “real” professionals know it, so we don’t take offence, right :-)

      Keep it up!

      2
  3. 4

    “The last version was released in August 2008. Kompozer can be considered”

    how come? :) released into the future? :))

    -2
  4. 5

    ilovecolors

    May 6, 2008 11:55 am

    The only issue with Dreamweaver is that some/many-times it doesn’t matches the final real output. In the beggining I used to work a lot with it, and for laying out text and applying classes is ok.
    While I’m writing this, I realized that the topic is WYSIWYG, not coding, not IDE. For w…, Dreamweaver with its integration with other products is the king. However, Fireworks is more w… than DW, DW tries to reach for the code too and that’s its falldown. Fireworks should’ve been in this list as the better wysiwyg.

    0
  5. 6

    Chris Porter

    May 6, 2008 12:10 pm

    I used to use Dreamweaver, but now that I’m very advanced in xHTML/CSS, I don’t need it since its a resource hog and the FTP sucks sometimes. Now I just use Notepad++ and Filezilla for F T P.

    I tried Aptana, but they were missing some features such as anonymous FTP login (for work on internal servers), and some other features.

    1
  6. 7

    Except for Dreamweaver, Nvu / Kompozer / Seamonkey Composer and maybe Web Expression, they all suck. Especially the “WYSIWYG Web Editor”. Built my first site with it. It was rubbish.

    In conclusion, one can say: The benefits of these products are best put to use by professionals, who are adept at coding anyway, and not by newbies, who often manage to make a complete mess of things. They would definitely be better off learning the “hard way”.

    1
  7. 8

    Just spent 20 minutes fiddling around with the Coda trial.

    I can understand the positive energy. Very light, very fast, with tight integration of a quality FTP client. My only issue being that there’s no popup CSS code hints. Like others with a good understanding of CSS, I want to write directly into the document (single line font and background declarations, especially) and not have to resort to filling out forms. It seems to be aimed at pros, so I figure they should have such a feature.

    1
  8. 9

    Akiva Levy,

    Just because one uses a software which is capable of WYSIWYG, does not mean the individual does not know code standards. I have been using Dreamweaver for years, but not once have I used the WYSIWYG features.

    I use Dreamweaver for it’s simple project manager.
    I use Dreamweaver for it’s code highlighting.
    I use Dreamweaver for it’s excellent interface.
    I use Dreamweaver for it’s code completion.
    I use Dreamweaver for it’s code folding.
    I use Dreamweaver for it’s built-in F T P.

    … and when I’m doing front-end work, it’s always valid XHTML/CSS.

    I’m sure there are many like me :).

    0
  9. 10

    Matthew Bergman

    May 6, 2008 12:24 pm

    I have to agree with the prevailing feeling. WYSIWYG editors are the bane to a well formed web. It teaches laziness and bad coding methodologies. Not to mention the bigger ones use templates to keep websites with them from editor to editor. Best thing for a newbie to do is to learn by hand as painful as the process can be. At least it is cheaper.

    -1
  10. 11

    How about some suggestions for editors that can be integrated with a CMS like tinyMCE or Expression Engine for example.

    0
  11. 12

    i also code with notepad++, quanta plus or aptana… human code is always better than generated one

    -4
  12. 13

    Matt Tuley

    May 6, 2008 2:02 pm

    What great timing! I just guest-blogged on the importance of freelance writers having their own website, and there are some great tools listed here that will help folks do just that. I used Rapidweaver for my first site, but have switched to a WordPress-hosted site that I tweak by hand in Textwrangler (Mac text editor).

    I can also recognize this is the kind of article that can drive a design professional crazy since it points to all sorts of ways a nondesigner can do a mediocre job on their own. Unlike most nondesigners, though, I recognize the limits of my talents and do intend to hire a pro when my budget allows!

    -2
  13. 14

    I tried DW, but once you learn how to hand-code your sites with Coda, you’ll never go back.

    0
  14. 15

    I use Dreamweaver – it’s cos I’m so used to it. I’ve never used the WYSIWYG features; I’m only responding cos it annoys me how people can say you have ‘no real talent’ and such just for using a tool which makes life easier. I use it for code snippets, auto-completing (I type

    0
  15. 16

    I am using DreamWeaver for web development and so far there is no problem for me :) Thanks for the useful info and list.

    1
    • 17

      Alexis Feyou de Happy

      October 5, 2010 7:48 pm

      Very informative. Any reason why serif was not mentioned? It is a reasonably priced and it is a good wysiwyg that I have used for many years. I have also tried Kompozer and like it as well as Sandvox which is quiet easy to use.

      2
      • 18

        I have been forced to use Serif only once and I was mildly surprised at how it performed until I looked at the code it had created.
        My little brother can produce better code than that and he’s 12…

        1
        • 19

          If the site works, why does it matter how the code looks?

          1
          • 20

            It matters because, not all browsers render the same and sometimes even minor spaces can throw off the look in other browsers. Also bloating and floating when not needed is a royal pain in the neck to debug if you ever have to write a web app.

            0
          • 21

            As we speak, we are trying to update our site using Serif WebPlus 10 and it is a nightmare. it is renaming the images every time we are making a change. It is renaming files to local hard drive paths.
            I would recommend you only use this product if you had no other alternative.
            We are pulling our hair out and wish we had gone ahead and invested in Dreamweaver.

            0
          • 22

            Is this comment for real?

            -4
    • 23

      If you consider Dreamweaver’s price it a real piece of crap. It doesn’t generate pure HTML code without CSS!?!? As usual Adobe complicates what is simple. Good luck when you try to integrate its code with other platforms.

      2
  16. 24

    This is a great list, but does any one of these other editors come close to offering the features and ease of use that DreamWeaver does? I don’t know of any professional web designer/developer that uses anything other than DreamWeaver.

    2
    • 25

      For those that need WYSIWYG, I suppose Dreamweaver is still king, but a text editor like Textmate is all I’ll ever want to use.

      -1
  17. 26

    Kyle P. Johnson

    May 6, 2008 7:58 am

    Another great cross platform tool is Aptana

    0
  18. 27

    I use Coda (Mac only) and sometimes Dreamweaver, but each one have its lacks, I’m still searching for THE EDITOR. Now I’m also testing CSSEdit for css, looks fine. but I would like to have only one app to code html, css, javascript, php…. jejeje, too much!?

    Bye!

    1
  19. 28

    I used FrontPage a couple of years ago when I was just starting with web design but I was so annoyed with its code that I quit WYSIWYG editors. But judging by the list, I’d give Nvu a shot..

    0
    • 29

      I don’t understand how one can create a website -the most graphical of interfaces- with an editor that’s mostly text based. I mean the jumping back and forth to see how things are lining up on the page is irritating and time consuming. I moved from Frontpage to Expressions Web ’cause the web moved to CSS and I didn’t want to be left behind. My copy of Dreamweaver is rarely used because it places the emphasis on coding. That’s like writing lines of code to create the Mona Lisa when it’s quicker to just paint her. Funny thing is I got a Step-by-Step book for Expressions and most of the instruction has me working directly with code. So even the WYSIWYG I use daily isn’t really WYSIWYG. Should we have stayed in DOS? I can probably go back to coding apps in dBaseIV though my soul would probably die.

      0
  20. 30

    Matt Crest

    May 6, 2008 8:25 am

    @Angstrom – I’d check out Coda (as doug just mentioned). It’s an all-in-one app that really is a dream to work in. It’s Mac only though, so if you’re a PC guy…dunno.

    @doug – Coda isn’t a WYSIWYG editor. You get a great inline real browser view of your page, but you still code everything by hand (except for CSS, which can be more WYSIWYG like).

    0

↑ Back to top