By Lukas White

A Review of the Brackets Editor

By Lukas White

This article is going to take a look at Brackets, an open-sourced editor originally developed by Adobe. It may not have had quite the same level of publicity and hype as Atom, GitHub’s new lightweight editor, but it’s a promising option for the front end developer.

Target Audience

It’s worth pointing out that Brackets is primarily aimed at front end developers and web designers. Although it’s essentially a text editor and therefore suitable for coding pretty much anything, it’s optimized for HTML, CSS, and JS (as well as derivatives such as SASS, Less, CoffeeScript, and so on). Ruby, Python, PHP developers, and the like might be better served looking elsewhere, whether that be for a fully-fledged IDE or something more lightweight such as Sublime or, indeed, Atom.

What Makes Brackets Different?

Brackets makes a big deal of the fact that it’s written using a combination of HTML, CSS, and JavaScript. While this may mean little for the casual user, those who wish to extend – or even hack it – have the opportunity to do so using technologies they’re probably already familiar with. The fact that it’s open-sourced also makes it stand out from the crowd. Sublime, for example, is a commercial product, while Atom is closed-source and won’t be free forever.

Getting Brackets

Brackets can be downloaded from the website, and is available for Mac OSX, Windows, and Linux (32 or 64-bit). For the purposes of this review, I’m running the 37th “sprint”, on Mac OSX.

First Steps

When you open Brackets for the first time, you’re thrown straight into an HTML-based tutorial file with accompanying CSS, which is a great way to start exploring.

The Brackets editor

The left-hand column lists the working files, and beneath that is a folder view. It’s like Sublime in that you can view a file with one click without actually opening it. A double-click opens the file for editing, adding it to the working files list.

The right-hand column contains icons for opening Live Preview (which we’ll look at shortly) and for the Extension Manager. Many third-party extensions create their own icons and place them in this bar, so it can quickly become an invaluable launchpad.

A Quick Feature Tour

Let’s look at some of the key features of Brackets.

Live Preview

The Live Preview feature launches a new Chrome window showing the current page that not only doesn’t require a manual refresh when you change a file, but also as you type. It’s essentially Chrome’s Web Inspector, but with all the benefits of a self-contained editor. It’s a truly great feature, particularly if you have a splt-screen setup. It doesn’t just work with HTML files, either. If you make a change to a linked CSS file which impacts the current page, that too gets reflected immediately in the browser. If you’re editing a CSS file used by the currently visible page, highlighting rules causes the preview to highlight elements which are affected by them.

Quick Edit

The Quick Edit feature is context-specific. Let’s look at a few of its uses.


When you’re editing HTML, if you click a tag with a corresponding CSS declaration situated in a linked file and hit Ctrl / Command + E, an inline editor appears allowing you to quickly edit that rule. This is probably best illustrated with the following screenshot.

Inline CSS editing


Hovering over a color in a CSS declaration shows a small swatch of that color. Also, the same keyboard shortcut (Ctrl / Command + E) gives you a pretty sophisticated color selector / converter, as illustrated below.

The Color selector


While unlikely to be used nearly as often as the CSS rule or color editor, the bezier curve editor is a hugely impressive little feature. Again, it’s best illustrated with a screenshot:

Editing beziers in Brackets

And More

It looks like third-party extensions will provide additional contexts for Quick Edit, like the regular expression editor described later in the article. It will be interesting to see what’s produced; there are clearly many possibilities for it.


Enabled by default, built-in JSLint support will check your Javascript code upon saving, with its results displayed as a panel below the main editing window.

JSLint in action

Because Brackets runs the JSLint process when you save, rather than as you go, it can feel a little unresponsive; you can correct something and the report remains on-screen because you haven’t saved it. However, the performance impact of doing it any other way would probably create its own problems.

Other Features

As you’d expect from a code editor, Brackets implements code completion. And, it’s fast. Really fast. I’ve found a number of editors in the past to feel sluggish, which negatively impacts the experience, but not so here. That’s not to say it’s perfect. For example, when writing SASS it would be good if, once you start typing out a nested selector (i.e., with a period or a hash) that code completion would stop prompting you for a rule.

Autocomplete isn't perfect

Extending Brackets

The true power of Brackets, I feel, lies in its potential for extension. There are already a significant number of extensions available. I’m going to take a look at a few that stood out for me.
The process of installing an extension couldn’t be easier. Simply click the “brick” icon on the top right, then you can search for and install them from within the application.

Installing extensions from within Brackets

If you’re looking for features found in other code editors, there are extensions for code-folding, snippets, and smart highlighting, among others. Theseus is a JavaScript debugger for Brackets, which works with both Chrome and Node.js. It probably warrants its own article, so I won’t cover it in detail here.

If you work with Markdown, you might find the Markdown Preview extension to be useful. When you open or create a Markdown file in Brackets, it splits the screen horizontally into two panels – one for editing, and one for a live preview. While this offers nothing a dedicated Markdown editor such as Mou doesn’t, one benefit is that you can edit a project’s Markdown files (GitHub READMEs, for example) without having to leave the editor. On the downside, it doesn’t do everything you’d expect, like have keypresses for bold or italics. A screenshot of this extension in action is shown below.

The Markdown extension in action

For Node.js developers, this extension allows you to stop and start your applications and view their output from within the editor itself.

The Autoprefixer module parses CSS declarations and automatically adds vendor prefixes to the appropriate rules, using up-to-date browser information from Can I Use.

If you work with files for whom the extension doesn’t give away the language, such as .inc files, PHP files masquerading as .module files, or indeed those without extensions, then the Language Switcher module may help. This module is shown below. It also means you can take advantage of language-specific features such as syntax highlighting on a new file before you’ve saved it.

The file language switcher provides a new drop-down menu to specify a file's language

If, like me, regular expressions can give you headaches then there’s even an inline regex editor. This works in the same way as the other Quick Edit contexts such as colors and beziers, suggesting that this is an area where contributions will be particularly active.

You can even run a terminal from inside the editor.


Brackets feels like an extension of Chrome’s Developer tools. The Live Preview feature is incredibly useful, combining the advantages of coding in the browser with those of a dedicated editor. Its other killer feature for me is Quick Edit, although it feels like that’s some way off from its full potential. However, by tapping into users’ knowledge of web technologies, it seems likely that any gaps will quickly be filled by contributions.

From a personal point of view, I can’t see myself switching to Brackets for the server side work I do using languages such as PHP. For more front end focused development I can see it becoming a useful part of my toolkit. If you’re a front end developer then I would urge you to take it for a spin, at least – and after all, it is free.

  • kilinkis

    yes, I love it, but its front end only. I use it along with Sublime, some days I feel more like using Brackets and other days Sublime

    • mirkinoid

      It’s kinda weird, but I have just the same feelings about it: used to Sublime, like Brackets, but not ready to choose just one of them

  • Taylor Huston

    The main feature it is missing is the ability to have two files open side by side. When you’ve got a 23″ wide monitor it’s plenty of room to say have an HTML and a CSS file open side by side for easy scanning of both.

  • Jingqi Xie

    I am just not quite used to it.

  • robis

    I have tried them all and geany is the most productive editor I have ever used if you are willing to spend the time customising it to your needs.

    • taariqq

      Does Geany have Live preview and Quick Edit as well?

  • gbabula

    I’ve been a huge fan of Sublime text since it came out, but this editor looks really interesting, what really caught my eye is the bezier curve editor – would be interesting to see that done with a lot of different properties – especially animations and transitions, etc…

  • Mike Ritter

    I’m enjoying it as a lightweight alternative.

    Would like to see collapsing / folding code and mouse-free file bar navigation (hello accessibility).

    A note: with an add-on I enjoy it as a markdown editor (but sure would like to see word count).

    A great example of how powerful script engines are (and smack-down for those who say script isn’t real programming).

  • Mirko

    I first tried Brackets in the early sprints, just to try it out(Webstorm user here). A few days ago, I downloaded the latest sprint, but one thing bugs me. It was there in the early sprints, it is here now.

    When editing CSS files, and using code completion, upon pressing enter to choose the desired attribute, Brackets always go to the new line. Only when choosing with left mouse click, it stays in the same line.

    I want my CSS like this:

    And not like this :


    What is the point of code completion, if I can’t hit enter? BTW, it works normally for HTML files.

    • Ernesto

      don’t know what sprint did you try, but is working fine for me (linux, sprint 41)

    • Weird, it’s not working like that for me Mirko.

  • cool19

    thanks for the review. i am finding the editor useful.

  • Vo Quoc Dat

    I have tried and feel it so interesting. It look like sublime text , but animation is amazing ….
    Thanks for sharing.

  • Mirko

    It is on every sprint. I even have Brackets installed on two different Windows machines. And it is driving me crazy!!

    I tried to see if maybe there is some pattern to it. When I create a new project and the CSS file is clean and new, there is no issues.
    But, since I have a lot of my reusable code, I often just copy/paste typography styles, my grid layout, etc.
    I think that the bug starts happening after I copy/paste a lot of the aforementioned styles.

    I tried this with two new projects, and it was exact behaviour as mentioned. But it just seems unlogical that something like plain copy/paste could do this.

    • JackMarse

      You could have embedded CR or like codes you cannot see. Open in hex editor to inspect.

  • rufwork

    It’s all Ragu’d now. (It’s in there.)

  • Jonathan

    I’ve been using Brackets now for a week, I also use Coda (which I absolutely love), yet whilst using Brackets I keep feeling the need to head back to Coda – however I think this may be due to habit? I like brackets’ simple layout, very aesthetically pleasing so I think that is the element that’s kept me using it this week.

  • Syed Umair Umer

    I’ve used Brackets for several months. But finally decided to switch back to Notepad++

    • Adam Swaine

      Hey Syed,
      Would you mind explaining why you moved back to Notepad++?
      Been using Brackets for a few days and it seems great. Though I have used many other editors in the past and always land up going back to Notepad++ myself. Wanted to see what shortfalls you came across using Brackets

      • Syed Umair Umer

        What I’ve noticed is Brakcet is only beautiful in it’s look. But it actually lacks in functionalities. In notepad++ I can easily search and replace things. But it’s quite difficult for me to do this in Brakcets. Also I didn’t like how Brackets formats the code. And the best thing about Notepad++ is it’s very lite software with tons of features.

  • Godson

    Great editor. I use it for designing webpages. It makes designing a whole lot faster.

Get the latest in JavaScript, once a week, for free.