5 Dreamweaver Alternatives
Macromedia released the first version of Dreamweaver in 1997 for the Mac OS 8 operating system. Only three months later – with version 1.2 – the Microsoft Windows version came out. Ten years later the web development software was taken over by Adobe and added to the Creative Suite (now replaced by the Creative Cloud) to take over for the GoLive editor. Those looking to use this extensive application for creating and designing responsive web applications either have to sign up for a single product subscription or rent the complete Creative Cloud package. This means that Dreamweaver software is primarily used by professionals.
This guide first explains the specific features of the Adobe program and then presents interesting, mostly free alternatives to Dreamweaver.
How Adobe Dreamweaver works
Dreamweaver scores points with its typical Adobe interface that users of Photoshop, InDesign, Illustrator, and other Creative Cloud programs are already familiar with. The range of functions for the HTML editor, which is the measure of all things in terms of WYSIWYG, has grown considerably since the publication of the Creative Cloud, turning code writing into child’s play. For example, it is possible to review all changes in real-time without reloading the page or to edit CSS code directly in the HTML file using an inline editor. The implemented coding engine also helps you write clean code by automatically completing snippets with Emmet support, creating automatic indents, and coloring related elements. In addition, Dreamweaver offers the following features:
- Code validation
- Support for CSS processors (Sass, Less)
- Support for PHP (from PHP 5.4)
- Multiple cursors for the simultaneous writing and editing of different code lines
- Integrated CSS framework bootstrap for responsive web design
- Access to license-free photos and vector graphics from Adobe Stock
- Easy access to your own graphics, designs, and other assets on the Creative Cloud
What free alternatives to Dreamweaver are there?
If you have access to all of the products on the Creative Cloud and have tried out Dreamweaver, you’ll know that not much is wrong with Adobe software. But for developers with a limited budget there are good Dreamweaver alternatives that are free to use. We will present five interesting options in the following paragraphs by not only presenting their features and any peculiarities, but also discussing the differences and similarities to Adobe’s software. The usability of the different available tools will be discussed in detail.
BlueGriffon
The Composer/Nvu successor BlueGriffon from Disruptive Innovations uses the rendering engine Gecko, which is written in C++ and used mostly in the web browser Firefox as the basis for the implemented WYSIWYG editor. This makes it possible to create and edit sites using HTML 4, HTML 5, and XHTML, making it possible to examine them during the creative process by opening a preview version. The user interface is available in 20 languages including English, Spanish, German, and French. BlueGriffon runs on the newer Windows systems (from Windows 7 and on) and macOS systems (from 10.8), as well as Linux distribution Ubuntu (from 16.04) – which Dreamweaver does not. The web editor also includes the following features:
- Easy integration of HTML5 forms, videos, and audio files
- CSS editor (allows 2D and 3D transformation techniques)
- SVG editor
- Font manager for FontSquirrel and Google Fonts
- Syntax highlighting and autocomplete
- Customizable menu options and keyboard shortcuts
- Accessibility through ARIA (Accessible Rich Internet Applications)
In addition to these functions you can use free of charge in the freeware version of BlueGriffon, there are a number of first class add-ons that can be acquired by purchasing a one-time license: among other things, the paid version contains an improved CSS editor that includes a visual CSS selector editor, a toolkit manager for the integration of multiple JavaScript and CSS files with a single click, as well as access to more than 2,500 ready-to-use templates. The open source components of BlueGriffon can be found on GitHub as well as on the official homepage. On the official website you can also purchase the licensed version, if you are interested in additional features.
| Benefits | Drawbacks |
|---|---|
| ✔ Controlled by HTML5 | ✘ Missing PHP support |
| ✔ Own SVG editor | ✘ Complex user interface |
| ✔ High compatibility | |
| ✔ Many available extensions |
KompoZer
The web developing software KompoZer originated in the Mozilla project Nvu and so is based on the Gecko engine. At first, KompoZer provided small optimizations of the Nvu software, but it eventually became a stand-alone web editing program under the free licenses GNU GPL (GNU General Public License), GNU LGPL (GNU Lesser General Public License), and MPL (Mozilla Public License). The team from the Mozilla stopped development in 2010, but the software is now usable on all common Windows and macOS systems as well as Ubuntu (version 14.04 or higher). Now more than 20 different language packs exist for KompoZer, including German, English, French, Italian, and Spanish.
Even if KompoZer isn’t one of the Dreamweaver alternatives that can keep up with the function range and complexity of the Adobe program, the open source application offers users some features that allow for the design of professional web pages:
- High-performance WYSIWYG editor that enables easy switches from code to preview
- Integrated CSS editor including import function for previously existing style sheets
- Customizable menu options
- Autocorrect and syntax highlighting
- Tabs for simultaneous work on multiple pages
- Form Wizard
- Integrated markup cleaner that checks projects for W3C compliance
- FTP site managers including drag-and-drop function for media files (i.e. pictures)
The program also has a handful of useful extensions – like, for example, a link checker that can be used to check the validity of integrated links. As a possible Dreamweaver alternative, KompoZer is still missing support for PHP as well as for new web standards such as CSS3 and HTML5. All download versions for the different platforms as well as detailed documentation can be found on the official project website. You also have the opportunity there to report detected program errors or to submit suggestions for new functions.
| Benefits | Drawbacks |
|---|---|
| ✔ Quick-working WYSIWYG editor with preview function | ✘ Missing PHP support |
| ✔ Available in over 20 languages | ✘ No more new development |
| ✔ Program files only a few MB | ✘ Doesn’t support modern internet standards like HMTL5 or CSS3 |
Brackets
Brackets is an open source alternative to Dreamweaver that Adobe itself launched in 2011 as a community project. In the official GitHub repository you can find more than 5500 forks of the MIT-licensed software, written in HTML, CSS, and JavaScript. The web editor is available for Windows and Mac as well as Linux (Ubuntu and Debian), but the Linux variants don’t offer the complete function palette. Brackets runs on the basis of the JavaScript runtime environment Node.js and can be padded with multiple extensions, including a WYSIWYG editor that isn’t included in the standard version.
In this Dreamweaver alternative you can see previews of your code in the standard form, not in the program. You also have the option to view the preliminary results of your web project at any time in Google Chrome. For this you have to install the Chrome web browser first, if indeed you don’t have it already. Three fundamental features of Brackets enhance the development tool for modern web editors:
- Fast editing: Brackets offers the perfect platform for writing code – you open the program and just get started. You don’t have to switch between different files for HTML, CSS, and JavaScript, but instead use integrated editors for stylesheets and scripts directly in the HMTL document. You choose the desired element and then open the mentioned processing mask using specific shortcuts.
- Live preview: If you utilize the preview function in Chrome, Brackets automatically sends all changes in real time in HTML and CSS code so that you can immediately test whether the desired functions work or not. Adjustments made with JavaScript are not yet integrated into the live preview but a corresponding function is planned, according to the manufacturer. Currently, it is already possible to see JavaScript modifications in the browser preview if you save the Brackets project first.
- Support of preprocessors: The code editing in this free alternative to Dreamweaver is not only fast, but the possibility to use Less and SCSS files – thanks to the support of the CSS Less and Sass preprocessors. With their simplified syntax, which Brackets knows how to deal with, you can write and edit your stylesheets even faster.
Brackets profits from the previously mentioned extensibility mainly because of the large involvement of the community – new plugins appear almost weekly. Particularly popular are the W3C validator, the Emmet plugin, and Beautify, a tool for the optimization of HTML, JavaScript, and CSS codes. The simple and versatile expansion possibilities on the developer platform undoubtedly make Brackets the best Dreamweaver alternative.
| Benefits | Drawbacks |
|---|---|
| ✔ Permanent development through the community | ✘ Missing PHP support |
| ✔ Supported by CSS preprocessors | ✘ Limited functions in the Linux version |
| ✔ Inline editors for CSS and JavaScript | ✘ WYSIWYG interface only available by expansion |
Aptana Studio
Aptana Studio is the free, integrated development environment from the company Aptana, Inc. The platform is based on the Java tool Eclipse and supports JavaScript, HTML5, and CSS3 as well as less common programming languages like PHP, Python and Ruby. It’s also possible to integrate Ajax libraries like jQuery, Prototype, or script.aculo.us directly into the application for use in the development process. The Dreamweaver alternative exists as a stand-alone version for Windows (XP and up), Linux (Ubuntu 9.04/Fedora 12 and up), and macOS (OS X 10.5 and up), and also as an Eclipse plugin (Eclipse 3.6 and up). The development team distributes Aptana Studio under a dual licensing model: Users can either select a combination of the GNU-GPL license and the Aptana-GPL exception, or the alternative Aptana Public License (APL).
In addition to its broad range of supported programming languages and platforms, the web editor also contains the following core features:
- Code wizard: The code wizard provides suggestions for possible arguments, properties, or methods and displays the support of any HTML, CSS, or JavaScript elements of your web project in popular web browsers.
- Integrated de-bugger: JavaScript and Ruby on Rails debuggers are already implemented and help to identify and correct errors in your web application.
- Deployment wizard: With its deployment wizard, Aptana Studio offers a tool that supports uploads, downloads, and synchronization of your web project files via FTP, SFTP, and FTPS.
- Version control: You can easily link your web project with Git and ensure the secure, collaborative work on the source code that is possible online at GitHub.
- Integrated command line tool: A built-in terminal allows you to execute system commands directly in Aptana Studio.
- Flexible development environment: You’re free to configure Aptana Studio however you want, and expand the basic options by adding scripts for standard commands and shortcuts to get reach optimal convenience.
Thanks to its close association, this free alternative to Dreamweaver also offers the basic functions of Eclipse. Among which are included a visual syntax highlighter, intelligent code completion, and the automatic closing of opened tags. This also includes support in Aptana Studio for the newest web standards like HTML5. Installation files for all platforms as well as the Eclipse plugin can be found on the official homepage. On GitHub, the source code for core components as well as various plugins for the web editor are available for download.
| Benefits | Drawbacks |
|---|---|
| ✔ Supports diverse programming languages like Perl, Python, PHP, and Ruby | ✘ Numerous dependencies on Java, Git, and Eclipse (in the plugin variant) |
| ✔ Version control with the help of Git | ✘ Installation only works with Node.js installed, which is not indicated by Aptana |
| ✔ Supports the newest web technologies | ✘ User interface is very complex |
Atom
GitHub, the hosting service for development projects of all kinds released its own version of a webs editor in 2014 under the name Atom. At a basic level, the cross-platform framework Electron (formerly Atom Shell) serves to combine the browser Chromium with the JavaScript runtime environment Node.js and also to carry the script of the GitHub developers. After initially releasing extensions and packages exclusively under an open source license, GitHub eventually decided to release the source code of the entire project, including all of the standard “packages” such as the editor’s function modules, under the MIT license. The functions of the web editor are accessible via individual JavaScript APIs, but the developers recommend using CoffeeScript instead of JavaScript. The simplistic stylesheet language Less is used as the standard for CSS content in Atom.
Thanks to their respective plugins, the webeditor supports the newest standards of HTML, CSS, and JavaScript (such as CoffeeScript), as well as various programming languages like, for example, PHP, Ruby, Java, C++, Python, and Perl. Some of the variety of features offered by the free Dreamweaver alternative are:
- Integrated package manager: Atom operates with its own package manager (aptly named the Atom Package Manager) that makes the integration and installation of packages a breeze.
- Automatic completion: Depending on which programming language you’re working with, Atom offers suggestions for the completion of your code. These recommendations can be added at the push of a button. You can also expand the range of possible suggestions with your own code snippets.
- Syntax highlighter: For installed programming languages, the Dreamweaver alternative offers a syntax highlighter for the most important rules. These will automatically be colored if you choose to use the tool.
- Version management: Atom, as a GitHub application, implements the version control tool Git as one would expect. This helps you keep track of changes to your web project. For example, you can set the tool to automatically highlight any altered lines for visual tracking.
- File system browser: File system browsers allow you to easily search for and open individual files, a complete project, or multiple projects, all in one window.
- Command palette: With a simple key combination, you can access a search mask to find available commands and easily access them.
In addition to the high user comfort, which considerably simplifies coding, it’s the extensibility of Atom that makes the modular web editor a top Dreamweaver alternative. More than 90 packages as well as 13 UI themes (as of December 2016) already gives the standard installation a large and diverse range of functions including the previously mentioned excellent language compatibility. If you’re missing a feature you can take a look at the extension directory on Atom’s homepage: Here you’ll have access to thousands of packages and themes developed and released by the user community. For example, you can find a package that complements the web editor with a live preview function of your HTML code.
Metrics and exception reporting are two debatable core packages. The first transmits data to Google Analytics and the second directs unusual program operations (crashes, errors, etc.) to the Atom developer team via bugsnag.com. Even if both packages are only intended to improve the Atom software, it is recommended to deactivate them in the settings. You can download current and old versions of the GitHub program for Windows, macOS, and Linux (64-bit Ubuntu, Debian, Fedora) on the official homepage or from the GitHub registry.
| Benefits | Drawbacks |
|---|---|
| ✔ Highly expandable | ✘ Questionable (though easily deactivated) standard packages for data gathering |
| ✔ Integrated solutions for package management and version control | |
| ✔ Widespread language support (including PHP, HMTL, CSS, JavaScript, Java, JSON, SQL) |
The best Dreamweaver alternatives from the open source area: Conclusion
Adobe Dreamweaver offers novice programmers a complete, comprehensive package for the developments of websites that, thanks to the numerous features and direct connection to the Creative Cloud, undoubtably offers you everything you need to create a successful and artistically designed website. But it comes with a high level of complexity and continual costs, not-to-mention that the Adobe software is not exactly a resource-saving solution. Experienced developers usually rely on editors that offer them greater freedom.
The open source alternatives to Dreamweaver presented in this guide find the middle ground between the modular principle of the Adobe program and the blank programming by means of an ordinary text editor. The main reason is to find the freely available program code that gives open source web editors high levels of flexibility. You can use a program like Atom either as a minimalistic editor with syntax highlighting and code auto-completion or as a full-fledged development environment that is only a few points behind the commercial Dreamweaver.
On the other hand, you can’t expect a similar level of stability out of a free solution as the Adobe product promises. Professional software like Dreamweaver is constantly being developed, keeping it prepped for the current web standards. Often times – as is the case with Dreamweaver – this software is also a comprehensive package that has matured over decades. If you come across problems with the software or need help with a project, the professional software has competent support at the ready, as do some open source services such as the paid version of BlueGriffon. But for free alternative solutions you need to rely on the community for help – whether you’re asking for help with technical problems with the program or just need assistance with the overall development.
| available for | HTML5 and CSS3 | PHP | Special features | |
|---|---|---|---|---|
| Atom | Windows, macOS, Linux | yes | yes | Integrated package manager |
| Aptana Studio | Windows, macOS, Linux | yes | yes | JavaScript and Ruby on Rails debugger, based on Eclipse |
| BlueGriffon | Windows, macOS, Ubuntu | yes | no | SVG editor, commercial additional features |
| Brackets | Windows, macOS, Linux (limited) | yes | no | Inline editor for CSS and JavaScript |
| KompoZer | Windows, macOS, Ubuntu | no | no | Small file sizes |
Related articles
What is AMP (Accelerated Mobile Pages)?
A major concern on all web developers’ to-do lists is making sure their website is user-friendly. Responsive web design and accessibility measures enable you to respond to increasing global mobile traffic without neglecting layout and design. From data published in February 2016, it is obvious that Google’s Accelerated Mobile Pages now provide a new tool in the fight for fast loading times and…
Mockups vs. Wireframes
There is a lot of work between the original idea and the finished result when you’re developing a new website or app. One of the most crucial and demanding stages of realizing a concept is the visualization of your ideas for the layout, design, and functionality. This is when mock-ups and wireframes are the most useful.
What is structured data?
While humans automatically structure data when reading a website, programs like web crawlers or screen readers have to rely on special labeling in order to grasp sematic relationships. This additional information can be embedded in HTML code through a corresponding markup for structured data. Website owners have four formats at their disposal for this task: Microformats, RDFa, Microdata, and…
Sinart CreativeShutterstock Tailwind
If you’ve already got some experience working with CSS and are looking for a particularly flexible and individual framework Tailwind CSS is a great choice. The solution for professionals simplifies work and offers numerous design options. Read on to find out more about the framework and why beginners may fare better using an alternative to Tailwind CSS.
