1. Technology
You can opt-out at any time. Please refer to our privacy policy for contact information.

Edit Your Code with Adobe's Open Source Brackets Editor

If you're building for the web, this code editor is designed just for you.

By

Man using laptop on sofa
Sam Edwards/Caiaimage/Getty Images

When you think of big open source companies and organizations, chances are that the first names that pop into your head include Google, Mozilla, Linux, WordPress, and Apache ... but would you be surprised to learn that Adobe should be included on that list, too? Adobe's contributions have grown exponentially in recent years, and one of their more recent projects, the Brackets code editor, should be on your radar if you're a web developer.

Brackets At a Glance

Brackets is distributed under the open source MIT License (MIT) and runs on Microsoft Windows and OS X, and as of August 2013, there's also a Linux Preview available. The free-of-charge code editor can be downloaded from the official site, and since it's still in development mode, new features are released about every two-and-a-half weeks.

At the most basic level, Brackets is just a code editor ... but what makes this one stand out is that it's made for web development, and it's written in HTML, CSS, and JavaScript. And, since it's created with that niche in mind, there are several specific tie-ins that can make the work flow for those users more fluid and productive.

Background

Brackets is an Adobe-sponsored project, and even though it's still very early in its development, you can watch the introduction video to get a good idea of how it'll work, what the main features are, and what may happen in future versions.

Features

This review is based on Sprint 31, running on Microsoft Windows.

  • Quick Edit - This is definitely one of my favorite features built into the Brackets editor. A web project is made up of all sorts of files -- HTML, CSS, JavaScript, etc. -- and you often have to bounce from one file to another to make edits. For example, if you're working in an HTML file and discover that you need to make a style change, you have to open the CSS file, find the style you want to edit, make your changes, and then save the revised file. But, with Brackets' Quick Edit feature, this can all be done inline by hitting Cmd/Ctrl + E, ultimately creating a much more streamlined process. This also works with JavaScript files.

  • Live File Preview - This feature comes in a close second to the Quick Edit option up above, and it's another way Brackets helps save you time. Ultimately, if you're creating a website or app, you're going to have to preview and test your code to see if it looks and acts correctly. Now, instead of saving your file and refreshing your browser to see what your change did, you can start the Live File Preview and have your changes automatically be visible in your browser window. No saving, refreshing, copying, or pasting needed.

  • Clean Design - The aesthetic of Brackets is very simple, and when you're staring at lines of code, that's not a bad thing. The lack of menus, toolbars, and windows is a refreshing (and, in my opinion, a welcome) take on code editors.

  • Syntax Checking - One added bonus of using the Live File Preview above is that, according to the software's Downloads page, "Updates pause whenever the HTML is not syntactically valid." This could save you a lot of time by alerting you right away to typos or mistakes.

Drawbacks

  • Lots of Plans for the Future - This might not seem like a con at first, but it's really tied to the idea that the editor isn't quite ready for prime time. There are a lot of good, solid features built into the current version, but there's also a decent amount of tools missing. For example, the intro blog post points out that, "in the future, Quick Edit can also be used to display visual tools inline like a color picker, gradient designer or even just related documentation." So, if you're a web developer looking for a minimalist code editor that doesn't necessarily have all the bells and whistles, this isn't an issue. But, if you're searching for a more full-fledged product, you might be better off bookmarking the Brackets page and checking it out again down the road.

  • Live File Preview is Only Available for Google Chrome - This will (hopefully) be remedied in the near future, but in Sprint 31, the Live File Preview feature only works with Google Chrome. So, while this is great for a quick and dirty test of your code, in the end, you'll still have to do the browser refresh exercise for Internet Explorer, Mozilla Firefox, Safari, and whatever other browsers you need to test against.

  • Very Frequent Updates - This isn't really a drawback per se, but with a release schedule averaging around two-and-a-half weeks, it'll be easy to fall behind with features. Adobe does, according to the Downloads page, make it obvious when a new update is available (a small gift icon appears), but with so many work-related tasks already on a to-do list, do you want to add semimonthly code editor updates to your schedule?

Getting Brackets

You can download Brackets from the official site, or if you want to grab the sourcecode from GitHub, you can do that, too.

Contributing to Brackets

The Brackets developers openly welcome contributions to the project, and if you're interested in helping out, check out their Contributing section on GitHub.

  1. About.com
  2. Technology
  3. Open Source
  4. Desktop Software
  5. Programming and Development
  6. Edit Your Code with Adobe's Open Source Brackets Editor

©2014 About.com. All rights reserved.