HTML5 Editors: 5 Best Tools for Web Developers

October 2nd, 2011 Leave a comment 1 comment
Like the article?

With HTML5 quickly becoming widely accepted in today’s online arena, the HTML4 editors of yesterday are no longer up to the task of providing the most cutting-edge development environment possible. Finding a replacement, however, can be quite a task: fortunately, we’ve gone out and found a few HTML5 editors for you to get your HTML5 development going and keep on the cutting-edge of Web creation!

1. Mercury HTML5 Editor

Mercury HTML5 Editor

The first tool on the list is interesting in that it’s also written in HTML5: talk about enforcing the no-legacy route! Mercury HTML5 Editor is a web-based editor in the style of TinyMCE or CK/FCKEditor, and if you’ve used either of those you’ll feel right at home here. It’s got the usual suspects as far as web editors go: image insertion, link insertion, etc. and so forth, as well as having some of those abilities in their HTML5 equivalents, such as embedding video and other new features that HTML5 provides.

Mercury is written entirely in HTML5, JavaScript, and Rails, meaning older browsers aren’t welcome here; you need relatively new versions of Chrome, Firefox, or IE that support HTML5. It is slick and well-suited to a cutting-edge website, and if you don’t mind sacrificing legacy compatibility in your web-based application or CMS then Mercury HTML5 Editor is a great chance to get a web editor with HTML5 functionality!

2. Maqetta

Maqetta HTML5 Editor

The next HTML5 editor on our list is also a web-based one: Maqetta is an HTML5 editor written in HTML5, and as such the same restrictions apply as they did to Mercury. No old browsers need apply here, and you’ll need a modern HTML5-compliant one to get any use out of Maqetta. Maqetta’s quite slick, however, perhaps moreso than Mercury, and its polish may be enough to convince even the most diehard compatibility fans to forsake their older browsers; in fact, it stands testament to HTML5′s power and usability that these developers are choosing to use it as a base to build actual applications with heavy-duty ability and functionality.

As far as features go, it is quite powerful: although still in preview, Maqetta has a great deal of functionality that you wouldn’t expect from a web-based editor, including a very powerful and intuitive ability to design a website based on dragging and dropping objects as well as editing the page in source code or design view. This one is definitely worth keeping an eye on as it develops, and even now is quite usable as a day-to-day HTML5 editor!

3. Aloha Web Editor

Aloha Editor

The next tool in our list is also an HTML-based HTML5 editor, but unlike the previous two they have not foregone compatibility: it is possible to use Aloha in an HTML4-compliant browser, which is sure to please some people nervous about giving up compatibility for older browsers; given Aloha’s feature-set, however, I can’t imagine many people would resist migrating even if it was incompatible.

Aloha’s features are nothing short of stunning, and are worthy of a full-featured editing suite: it boasts an intricate repository API, in-line link addition with hotkeys, and real-time web page editing: there’s no need to reload or refresh, and your changes show on the page in real time as you edit it. Aloha’s design philosophy is to make your editing experience faster and simpler, and in that it succeeds handily: this one is definitely a worthy addition to your toolbox!

4. Aptana Studio 3

Aptana Studio 3 Editor

Finally, we have a traditional downloadable application on our list: Aptana Studio 3 is a program designed for web development, and it’s actually more geared to that end than the other editors on our list. While the other HTML5 editors here are more tuned towards the needs of designers and content editing, Aptana Studio 3 is actually more for web developers: it has support for many web technologies like Ruby and Python, and you’ll spend more time in the source code part of Aptana than you will in the source code part of the designer-based tools.

That said, however, Aptana Studio does a great job in that regard: it’s a streamlined and very usable development tool, and its integration with a myriad of different web technologies makes it quite attractive to the developer who would otherwise be compiling these technologies and cobbling them together in disparate environments. Aptana’s a great developer tool, and it’s one HTML5 editor that definitely deserves a spot in your toolbox!

5. Adobe Dreamweaver CS5

Adobe Dreamweaver CS5

The brand-name heavyweight in the room, Dreamweaver is probably familiar to everyone, though not always with praise: previous versions of Dreamweaver were held suspect because of their tendency to do some rather broken things with their actual source code. This version of Dreamweaver, however, has no such problems: it’s a full-featured and impressive HTML5 editor that’s well-deserving of the Adobe brand.

Its functionality falls somewhere in-between the web editors above and Aptana: it strikes a good balance between designing and developing, though it does lean more towards design. Developers have some treats, however, including support with Android or iOS apps, something that’s going to become increasingly important. Adobe’s extension suite is also quite vast, and it’s very easy to install extensions to Dreamweaver to give it additional functionality. It’s not free, but if you’re a professional web developer it’s definitely worth the sticker price to have this one!

Conclusion

And so there you have it: 5 HTML5 editors for today’s rapidly-changing Web landscape. It’s not always easy keeping up with development tools, and hopefully this list has helped you discover some tools that will help you in your quest to find an efficient and effective HTML5 editor for use in your workplace!

Help us spread the word!
  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Delicious
  • DZone
  • Reddit
  • Sphinn
  • StumbleUpon
  • Google Plus
  • RSS
  • Email
  • Print
Don't miss another post! Receive updates via email!
  1. Mark Brito says:

    Checkout HTML Builder / Web Server for Android

    https://play.google.com/store/apps/details?id=net.web2rev.fileshare

    It’s a web server and development environment that you can access through your phone or on your desktop via the web server on the phone.

    There is a free version at:

    https://play.google.com/store/apps/details?id=com.web2rev.droid.Sphere

Comment