BlueGriffon: A Multi-Platform WYSIWYG HTML Editor

Ads by Google

wysiwyg html editorThere are several reasons why people hardly use desktop web builders – there are only a few of them available, the good ones are too expensive, and the process of web building itself is not a walk in the park. That’s why it’s sad to hear the news that Apple has decided to discontinue the development of iWeb – the application which can help ordinary people build beautiful websites in a fun and easy way.

With iWeb out of the picture, finding a free and good web builder becomes even more difficult. But it is not dead, yet. There’s a new web editing application called BlueGriffon, a free multi-platform WYSIWYG HTML editor which is easy enough for beginners but also powerful enough for more advanced users.

Rise From The Fire

BlueGriffon is powered by Gecko, the rendering engine of Firefox. Just like Firefox, this web builder supports the use of extensions, so you can add more features according to your needs. It also supports the latest and greatest of web technologies like HTML5 and CSS3. The app is available for Windows, Mac and Linux.

wysiwyg html editor

As a WYSIWYG HTML editor, BlueGriffon allows users to easily add, remove, drag, drop, and arrange elements of the webpage. But the easiest way to start is to use the “New wizard” under the “File” menu.

free wysiwyg html editor

The wizard will guide users to set up their canvas, starting with choosing the document type, filling in data for the property, picking the colors, adding a background image, and deciding on the page layouts.

free wysiwyg html editor

But the real web building process will start after the wizard. To help you during the construction process, BlueGriffon provides you with all the tools that you need on the toolbar.

free wysiwyg html editor

Ads by Google

For example, you can add an audio file to your page by clicking on the “Insert or edit audio file” icon, browse to locate the audio file, and click “OK“. Then the file will appear in the editing area.

wysiwyg web editor

The editing area itself consists of two different layers. The first one is the “WYSIWYG” area where you can arrange objects visually.

wysiwyg web editor

The second one is the “Source” area where you can manipulate the web by editing the HTML code. You can switch between these two by clicking one of the two tabs below the editing area.

04b source

Saving Your Work & Uploading It To The Web

There’s just too many elements involved in a web building process so it’s impossible to discuss all of them here. Please do your own exploration to familiarize yourself with the app.

The next step is publishing your creation. But before you can put the page online, you have to save the document that you are working on locally.

wysiwyg web editor

Choose the name that you want for the webpage and…

05b page title

Save it in the location that you want.

05c location

To publish the webpage so that it’s accessible by anybody from all over the world, you need to have a web hosting account and a domain name. Your web host will tell you the location of your account and you’ll need to upload the document there using a file transfer protocol (FTP) client.

03a get add on

There are many good FTP clients available, but why would you use an external client if you can add one to BlueGriffon? You can find the “FireFTP” extension on the “Add-ons” page on the BlueGriffon site.

03c download add on

After downloading the extension, you can install it by going to “Tools – Add-ons” menu, and…

03d add on menu

Click the “Install Add-on From File” sub menu under the “Extensions” section of the “Add-ons Manager“.

03e install extension

After restarting the application, you can find FireFTP available under the “Tools” menu.

03h installed FTP

After logging into your hosting account, you can transfer files from your local folder to a remote folder (and vice versa).

wysiwyg html editor

You can add other extensions to BlueGriffon using the same method. At present, there aren’t many extensions available, but I’m sure the choices will grow over time.

At version 1.0, the software is still far from challenging veteran commercial web builders like DreamWeaver. But as the only up to date free option available today, BlueGriffon has the potential to grow fast and catch up to the big boys.

Have you tried BlueGriffon? What do you think about the application? Do you think that we still need desktop web builders? Share your opinions using the comments below.

Ads by Google
Comments (16)
  • DJA

    I’m a long-time use of Kompozer but that does seem to be dead-ended. I tried BG but kept getting blank screens when making content changes; the app seemed unstable. BG looks promising, but I’d rather have something old and stable vs. new and frustrating.

  • Weindeb

    I was really committed to Kompozer, finding it by and large user-friendly, etc., especially compared to the monster Adobe created when it bought out Dreameaver! Then I installed Mac Lion, which Kompozer, sadly, is not quite up to, although a number of its aspects do work with this newest Apple feline. I’ve now switched, or am trying to switch, to BlueGriffon, but, oh, how I wish there were some sort of user’s guide. As a truly amateur builder of some websites, I am finding that Blue Griffon does seem to have possibilities, but frankly much of how you accomplish this or that eludes me, even including something as embarrassingly simple as changing font size.

  • Merlefyshwick

    I’m just starting out, but if you go to ‘Set CSS Styles’ (the blue stealth bomber-shaped logo), you can change the font size there. Maybe this is not what you meant, but thought I’d mention it anyway!

  • Scott.

    I’ve used Komposer on & off for years, so I decided to give this one a shot. So far, the only complaint I have is that I can’t figure out how to change font sizes of lines of text. I see the ‘zoom’ function, but that’s not what I mean – I’m looking to enlarge one line of text, for example. I checked their Google Groups pages, but found no answer.

    Other than that, so far it’s pretty good.

    • Anonymous

      Hi Scott,

      You mean like the one in word processor? I couldn’t figure out how to do that either. The best trick that I could suggest is to make use the “H” tag, but that is not really the solution.

      Since we have the software author here, I took the liberty to ask him directly. Hopefully he has the answer (or can add the feature in the future release).

  • OHLover

    I’m not all that experienced with web editors but I have used a few, including some on-line versions in the past. I recently took over maintenance on a website for the Otterhound Club of America site hosted by the AKC. the site has been up for a long time and was completely HAND CODED in HTML by the original author. It’s pretty basic with no bells and whistles as one would expect.  It does the job nicely though.

    When I took over these maintenance duties, I went looking for a new editor. I had Kompozer but was not happy with it. Too clunky for me. I discovered BlueGriffon and have been very happy with it so far after minimal use.

    The next step for me is to attempt to build a site from scratch for one of my businesses. That should be an interesting and educational process. Hopefully, BlueGriffon will make it easier.

    • Tina

      Thanks a lot for sharing your experience! Please do let us know how you manage with BlueGriffon.

    • OHLover

      Hi Tina,
      The site building is on my “task list” but not a high priority atm.  I currently have three published sites up for my businesses but really only have ftp access to my main hosting site. The  other two are hosted by others. One is Jumla based and I can do some fairly extensive editing on-line but there are limits and no ftp.
      The other is a Microsoft OfficeLive site hosted by M$ and is pretty stock template based. Not much to do there but it works for my purposes and pulls traffic.

Load 10 more
Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.
Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.