Open source HTML and CSS editors

4 open source alternatives to Dreamweaver

Posted 24 Mar 2016 by 

Jason Baker (Red Hat)
up
109 readers like this
4 open source alternatives to Dreamweaver
Image by : 

opensource.com

How do you design for the web?

Looking for an open source alternative to Dreamweaver or another proprietary HTML/CSS editor? Let's round up some of your options.

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 that 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 have disappeared. 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. And though proprietary tools are still common, there is a rich collection of open source alternatives out there. Here are some you should consider.

1: Aptana Studio

It may seem odd, but the first item in our list isn't a WYSIWYG editor at all. Aptana Studio is an "open source development tool for the open web" which, in practice, means it's more of an advanced IDE specializing web development. Based on the open source Eclipse project, Aptana Studio features tools for assisting in HTML and CSS authoring, including code coloring and completion, debugging, and outlining of documents. Its main selling point is its JavaScript support, making it a strong tool for developing more complex web applications.

2: BlueGriffon

BlueGriffon is a WYSIWYG editor which is powered by Gecko, the same rendering engine included in Mozilla Firefox. One of a few derivatives of Nvu, a now-discontinued HTML editor, BlueGiffon is still actively updated, and seems to be the only actively-developed derivative which supports HTML5 as well as modern components of CSS. Licensed under each the MPL, GPL, and LGPL, version of BlueGriffon are available for most major platforms.

3: Seamonkey

Seamonkey is a community continuation of what was once a Mozilla-produced Internet application suite. While Mozilla decided to narrow their focus to individual projects, Seamonkey continues to make a regular release of its full suite, which included Seamonkey Composer, a WYSIWYG HTML editor. Though as of this writing the last stable release was just last week, the Composer portion of Seamonkey is no longer being actively updated. However, as the same engine is also used to power the email component of the project, basic maintenance is performed, and it remains a plausible option for newcomers to HTML.

4: 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.
  • Komposer, a community-developed fork of the Nvu editor with WYSIWYG support along with side-by-side editing, for which the last stable version was released in 2007.
  • Maqetta, an HTML5 capable in-browser editor which was last released in 2013.
  • Nvu, a cross-platform editor upon which KompoZer was later based, which has not been updated in many years.
  • Quanta Plus is an integrated development environment designed specifically for HTML, CSS, and related languages, with WYSIWYG capabilities, last updated in 2009.

Bonus option: 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, a relatively new project from GitHub, which describes itself as a "hackable text editor for the 21st century," has support for HTML and CSS out of the box and many additional plugins available.
  • Bluefish, 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.

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 if it helps you solve a problem, why not share back your feedback with the broader community to help them as well?

30 Comments

sethkenlon

Call me a traditionalist, but I really believe the only "right" way to do web design is by typing.

(...in Emacs, but I digress.)

There's a place for getting a quick webpage online, but in those cases I think it's best to keep it as simple as possible. I say this because I've seen way too many over-designed sites that abuse little hacks in GUI design applications, and it ends up not rendering correctly on browsers, or for screen readers.

tl;dr: I don't think GUI designers are bad, just mis-directed.

Vote up!
1
Vote down!
0
Eduardo Medina

Today WYSIWYGs are an outdated technology because web development is fully modular, and I don't know any WYSIWYG that works at server level.

For web development y I use NetBeans. NetBeans supports PHP, JSP and lots of frameworks.

Vote up!
1
Vote down!
0
verdy_p

True, what is needed is the integration with development platforms for server-side applications. Good opensource environments exist for various languages, including Java, Javascript, CSS, HTML, C, C++, notably the excellent Eclipse.
During this develomement you may use some WYSIWIG editor to help generating a template page or create some fragments, or to modelize a general visual layout.
However, most of the time you'll work only on fragments of the pages.
A WYSIWIG ediotor however ''may'' be helpful for creating various static sections such as documentation pages, but even for them it is now simpler to use a dedicated software such as a wiki, or to templatize also the documentation (which can be also partly generated automatically from the application design.
For interactive pages, such as support forums (like this one) or blogs, there are also dedicated applications that you can deploy on a subdomain or in a HTTP subdirectory of your website. All those apps have convenient ways to customize the layout and integrate them them to the rest of your website.
You'll need a real development only for complex interactive pages that are linked to a background process, such as online catalogs and shops, or pages showing the state of a process or organizing some collaborative work and measuring the advancement. For bug tracking there are also convenient applications that are easy to deploy and you'll use your WYSIWIG editor only to create a template from which you'll extract some fragments to integrate in the layout of these apps.

Vote up!
0
Vote down!
0
Wordpress editor

Agreed. I make Wordpress templates for many of my clients. I don't use my WYSIWYG editor to design whole pages, but I do use it to make the basic layout and then snip those pieces into a text editor. The open source world still needs a good WYSIWYG editor. Templates don't appear from nowhere, someone still has to design them.

Vote up!
0
Vote down!
0
seanballais

I gotta say, Atom is an excellent text editor!

Vote up!
0
Vote down!
0
drajt

Quanta Plus was actually pretty good, but it's dead in the water so no joy there. Bluefish is pretty dire.

I mostly use a decent editor that knows what html/css is rather than anything else. Kate is okay, as is Geany, but there are plenty of them to choose from.

Vote up!
0
Vote down!
0
Jammy

Try http://liveweave.com

It is a very cool online Html, css, js tool.

Vote up!
0
Vote down!
0
WeAreGeek

I recently discovered Brackets. A really awesome editor for html/css/js.

Vote up!
1
Vote down!
0
Jason Baker

Thanks, Brackets looks pretty cool, I'll definitely check it out!

Vote up!
0
Vote down!
0
Maheeky

Recently found brackets myself for my first web development project in a long time,found it incredibly easy to use, with a very intuitive manner of displaying what you are doing in a live web page.
It's awesome.

Vote up!
0
Vote down!
0
Erwin

For my projects I use mostly Netbeans, it's like eclipse / aptana, and all that kind of IDEs... but if i need to fix something really quick and i don't want to wait all the time netbeans or any other IDE takes to fully load, i edit files on vim... i've used atom, and sublime text.. but netbeans auto-completion code, or the control+click link on file includes or methods, are very usefull when your code start to grow in number of methods, and classes. but in my work at the data center, if i have to fix some client codes... vim is my tool.

Vote up!
0
Vote down!
0
dgrb

You don't have to run emacs in a terminal window...

Vote up!
1
Vote down!
0
Jon

Brackets without compromise

Vote up!
0
Vote down!
0
jimmysjolund

I used Bluefish for many years but then moved on to vim. Hooked ever since.

Vote up!
1
Vote down!
0
Guilherme

Geany it's great! Very simple and very fast. I liked and I use!

Vote up!
1
Vote down!
0
dw

For those using an X desktop, geany remains an excellent and very much active editor. Geany website at www.geany.org ; HTML/CSS plugin add-ons at plugins.geany.org

Vote up!
1
Vote down!
0
coryhilliard

Apparently brackets is the next awesome tool, also headed by Adobe. I've used Eclipse for JSP, I've use VS with .NET (but hate VS because of it's insane 10GB install size, I resent it VS) I've used BlueGriffon and BlueFish a lot for PHP, CSS, HTML

Vote up!
0
Vote down!
0
James Earls

Adobe Brackets is free and I use it.

Vote up!
0
Vote down!
0
Dynamik Beaver

Another vote for Brackets.

Vote up!
0
Vote down!
0
Billy321

I recently started to use Silex a free / libre website builder which I use a bit like Dreamweaver. But a modern one, online and all...

Also webflow is awesome, but not open source though

Vote up!
0
Vote down!
0
Don Watkins

Great article Jason! I've used CoffeeCup, HotDog, FrontPage, GoLive, Dreamweaver, Nvu, Seamonkey, and gEdit. My first HTML was written using the MS-DOS text editor. I really liked Nvu when working with teachers and students because it was so easy to use.

Vote up!
1
Vote down!
0
Darryl

Actually license wise Emacs is not open source, its creator is quite adamant about this.

Vote up!
0
Vote down!
-1
Too Calverone

Why hasn't anybody mentioned KDEVELOP? It's what Quanta and QuantaPlus was based on and it's still actively developed and extremely capable and feature rich. Whilst it doesn't have WYSIWYG as such, it's still fantastic for web development.

Vote up!
1
Vote down!
0
DJ Everest

I first tried Atom, but a bug that causes parts of its window to disappear made me search for another editor, i tried bluefish which is really nice, but also tried Brackets and i liked it very much. Now Brackets is my first choice.

Vote up!
0
Vote down!
0
wavesailor

My vote is for Sublime. Used it for everything from config files to .js to .php to .py to

Vote up!
0
Vote down!
-1
dragonbite

I've used Netbeans, which includes a cool Google extension that helps in debugging. It allows me to make changes and view the changes without having to refresh the page.

Currently for PHP, my preferred program is WebMatrix 3. Unfortunately it is Windows-only. Visual Studio is also pretty good, but their PHP support is lousy (without paying for a 3rd party plugin).

Vote up!
0
Vote down!
0
nik

Brackets is the one

Vote up!
0
Vote down!
0
Rafie

Open element...anyone ?

Vote up!
0
Vote down!
-2
sethkenlon

Open element is not (in spite of its name) open source, meaning that even though it costs $0 to use, programmers cannot look at the source code of open element and improve it, or change it, or learn from it, or ensure it's secure, or port it to other operating systems (open element runs only on windows, for instance). This article is about open source alternatives, so open element doesn't really qualify. Citation: open element forums post ?TID=407

Vote up!
2
Vote down!
0
Vishnu M

We do use notepad++ for editing the codes. Pretty good in handling many a number of programming languages.

Vote up!
0
Vote down!
0

Jason is passionate about using technology to make the world more open, from software development to bringing sunlight to local governments. He is particularly interested in data visualization/analysis, DIY/maker culture, simulations/modeling, geospatial technologies, and cloud computing, especially OpenStack. Follow him on Twitter or Google+.