1. Home
  2. Windows

Embed HTML5 And CSS3 Elements Directly With BlueGriffon WYSIWYG Editor

Since web standards are evolving continuously with new formats and languages, web development IDEs must have an ability to conform with these latest standards in terms of new language & syntax support, newly applied constraints, and all the newly created formats and web elements. BlueGriffon is a simple WYSIWYG editor which covers the aspects of latest web standards, including HTML5 and CSS3. The application is powered by open source rendering engine of latest Firefox 4 – Gecko, enabling users to deal with web application API and XUL-based interfaces in a better way.

It offers a neat interface to let both novice and professional web developers build and manage web content with all the latest web standards-specific tools and features without much effort involved. Take HTML5 for an instance, which supports direct video embedding. With BlueGriffon, you wont need to get a hang of syntaxes to begin with, it allows you to directly embed both HTML5 elements video and audio.

The interface is designed keeping all types of users in mind. The main screen shows a simple WYSIWYG editor with margin controls right above it to set the overall size of the page. Unlike traditional way of designing a web page which includes defining classes in CSS followed by calling them in HTML, it allows on the fly web page creation with all the essential tools, which you wish to insert in web page, are listed on the toolbar.

Be it CSS class you want to define, an ID or need to tweak with HTML elements attributes in CSS file, it lets you perform both basic and advance operations without much hassle involved. Source code of the page you’re designing can be seen by clicking Source button. You can bring up CSS style properties pane besides main editor to view the changes being made.

css at

On the toolbar, you have options to quickly open an existing page, embed image, video and audio into current page, insert a user-entry form and table, and set CSS styles. By default, it comes without browser integration, nevertheless, you can click globe-imaged button to select your favorite browser as a live viewer.

browser 2

Along with CSS property pane, it also offers DOM explorer to do anatomy of current page elements. To show DOM explorer, from Panels, select DOM to view the page elements with attributes and inline styles.

dom explorer

We have tried to touch most salient features of BlueGriffon. Check out the product page for complete feature list. It works with Windows XP/Vista/7.

Download BlueGriffon


  1. The fact that BlueGriffon is charging a fee for a lifetime subscription to plug-ins makes me wonder if there’s a plan to eventually charge for BlueGriffon itself, once all the beta testing is done.

    Does anyone know?

    If I were to use a WYSIWYG editor, it probably wouldn’t be BlueGriffon (though BlueGriffon’s looking better and better all the time), but for those who WOULD like to use it, it might be useful to know if it’s ultimately going to become not-free on account of its becoming commercial.

    The answer might lie somewhere on the BlueGriffon web site…

    …but as with most projects of its type, the (yes, I’m going to call them “geeky”) developers of the BlueGriffon product have little marketing sense, and so think that site visitors (who aren’t associated with the project) want to read boring blog postings about the latest coolest thing that has happened, rather than a succinct explantion of the product, with links to feature pages, screenshot pages, demo pages, etc.; and, of course, including anticipating questions, right up front, such as “If you’re now charging for plugins, will you also be charging for the product itself,” and then addressing that question right on the features and/or description (or at least a FAQ) page.

    People thinking about using a product need to have it explained to them, in a classic marketing sort of way, right on the front page of the the product’s (or its project’s) site…

    …or, absent that, then at least some kind of teaser copy, with a “Learn more” link which then takes the reader to a full page of marketing-style copy which truly “sells” the product (but, at the same time, without being too commercially crass).

    This is the key mistake that geeky programmers often make on their project web sites. They’re typically all impressed with the whole “keeping the community up-to-date” aspect of it, and so make one blog posting after another on the front page which chronicles the development of the project, but which leaves the potential user who just wants the facts bored to tears! Those entirely too close to the project don’t stop to think that potential users just want to be told, simply and directly, what the product is and does; wth a link, then, to a full page of features… and maybe on that page some links to demos or screenshots (or both)… that kind of stuff.

    Every open source project which doesn’t get that — and CMS systems of the “nuke” variety tend to be the worst offenders — are llkely so clueless that the product, itself, will be awful. Most end-users have now figured that out…

    …and so those with project pages should avoid, at all costs, being too arcane and impressed with their own navels that they totally ignore the end users and the basic information that they need when they first hit the site.

    Get a clue, folks! Either that, or bother to include a person with some marketing sense on the founding team so that the web site always spells things out so that even Denzel Washington’s character in the movie “Philadelphia” (“explain it to me like I’m a three-year-old”) can understand it.

    Gregg L. DesElms
    gregg at greggdeselms dot com
    Napa, California USA

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.