Get the highlights in your inbox every week.
7 Open source HTML/CSS editing tool options
7 open source alternatives to Dreamweaver
Looking for an open source alternative to Dreamweaver or another proprietary HTML/CSS editor? Let's round up some of your options.
How do you design for the web?
Editor's note: This article was originally published in March 2016, and has been updated to reflect changes in several of the originally recommended tools.
Not all that many years ago, pretty much every webpage on the Internet was, at some level, designed painstakingly by hand. It was tough, and before CSS really took hold and became well supported across most common browsers, it often involved hacking a layout together by using HTML tables in a way they were never really envisioned to support.While some designers developed workflows completely based around manual editing of raw HTML files, the WYSIWYG (what you see is what you get) editor began to emerge as a tool of empowerment to millions of amateur and professional designers who didn't know, or at least hadn't mastered, the art of hypertext markup.
Products like CoffeeCup, HotDog, FrontPage, GoLive, and many others filled the market, and many web-based WYSIWYG editors emerged as well. Among the more successful was Macromedia (later Adobe) Dreamweaver, which was among my personal favorites for many years.
These web authoring tools weren't just about WYSIWYG editing; even for those who were comfortable with direct authoring of markup language, these tools offered advantages with template control, file management, and simply reducing the time it takes to create functional code.
But just as these helpful editors were expanding access to webpage creation, something else was happening too. Content management systems like Drupal and WordPress (and many, many others before them) displaced the need for the average content producer to need to edit raw HTML at all. You could easily make a functional website without even worrying about the underlying markup.
So did the rise of the content management system change the web? Absolutely. Did it eliminate the need to hand code HTML? Well, for some people, yes. But as the web moved from a collection of content to a platform for applications, just as many new opportunities have arisen for doing markup. Every software as a service application, every social media network, and even many mobile applications rely on HTML and CSS to render their display. And those content management systems? They still need templates to function.
And though many helpful libraries exist to standardize and simplify the web development process, coding for the web isn't being displaced any time soon. Proprietary tools are still common, but there is a rich collection of open source alternatives out there. Here are some you should consider.
1. Aptana Studio
BlueGriffon is a WYSIWYG editor powered by Gecko, the same rendering engine included in Mozilla Firefox. One of a few derivatives of NVU, a now-discontinued HTML editor, BlueGriffon seems to be the only actively developed NVU derivative that supports HTML5 as well as modern components of CSS. Licensed under the MPL, GPL, and LGPL, a version of BlueGriffon is available for most major platforms.
SeaMonkey is a community continuation of what was once a Mozilla-produced internet application suite. While Mozilla decided to narrow its focus to individual projects, SeaMonkey continues to make regular releases of its full suite, which includes SeaMonkey Composer, a WYSIWYG HTML editor.
5. Aloha Editor
6. Choose a legacy editor
There are other projects that have fallen by the wayside, but still have dedicated followings of their own, despite not having seen new releases in the past few years. Many are still capable choices, if a little dated. A few of these include:
- Amaya, an editor by W3C last updated in 2012, which features support for HTML 4.01.
- KompoZer, a community-developed fork of the NVU editor with WYSIWYG support along with side-by-side editing. The last stable version was released in 2007.
- NVU, a cross-platform editor upon which KompoZer was later based, which has not been updated in many years.
7. Try an advanced text editor
While not necessarily the best for beginners, a number of text editors provide additional functionality that is incredibly useful to those editing HTML/CSS documents. When used side-by-side with a modern browser with built-in debugging tools, you may be just as productive with one of these as you are with a more dedicated solution. Some of our favorites include:
- Atom describes itself as a "hackable text editor for the 21st century." Developed by GitHub, it has support for HTML and CSS out of the box and many additional plugins available.
- Bluefish is a lightweight integrated development environment with code highlighting and matching for HTML and CSS, remote upload capabilities, and a number of other basic features for web authoring.
- Vim or Emacs. Without participating in the holy war between these two traditional text editors, I can safely say that there are a number of enhancements for web editing available for both. So if you're already a terminal junkie, take your pick. Or, if those don't satisfy, try one of these Emacs/Vim alternatives.
Are any of these solutions a feature-by-feature reproduction of Dreamweaver or another proprietary tool? Of course not. They weren't designed to be. They each have had their own roadmap and goals, and their own strengths and weaknesses. Web design is a big world with lots of applications and lots of approaches. Take the time to find the workflow that meets your needs. Try out a new tool, see what you like and don't like about it, and share your feedback with the broader community in the comments.
Are you interested in reading more articles like this? Sign up for our weekly email newsletter.