When it comes to coding tools, web developers are spoiled for choice. Take your pick from dozens of commercial, free and open source editors including Sublime, Eclipse, Netbeans, Aptana, Visual Studio, Komodo, PSPad, Coda, Bluefish, gEdit, Emacs, Vim, Notepad++ and even Windows Notepad for all you coding masochists.

Do we need another option? Adobe thinks so and they’ve founded Brackets — an open-source MIT-licensed editor available at github.com/adobe/brackets.

While most code editors do a reasonable job, the majority have their roots in desktop development. They may offer reasonable tools but web development projects consist of multiple related files. You’ll often have HTML, CSS and JavaScript files open as separate tabs — if you want to change styles on an HTML element, you’ll need to switch to one or more CSS files, locate the properties, edit, save and return back to the HTML.

What makes Brackets different is the Quick Edit option. Highlight an HTML tag and press Ctrl/Cmd + E; the HTML file splits in two and associated styles can be edited below the element:


It seems so natural — why didn’t anyone think of it before?!

Need more? Brackets offers a Live File Preview option which automatically refreshes your browser in real-time as you make changes to the HTML and CSS.

Perhaps of more interest to web developers is that Brackets is built using HTML, CSS and JavaScript. It’s run in a lightweight shell which provides access to the OS file systems but can also be launched in a browser. If you can write web code, you have the skills to customize, extend and contribute to the project.

Brackets appears to be impressive, exciting and could revolutionize the way we write code. That’s not something you can say about many text editors. However, before you rush off to install Brackets, be aware that it’s a new project, not ready for general use and missing many features. For more information, refer to:

If you’d like to contribute to the development tasks, see:

Tags: Brackets, editor, HTML5 Dev Center, IDE, web
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • kris

    How I can try it on Windows.

    • http://www.optimalworks.net/ Craig Buckler

      Check the “How to use Brackets” link — it has installation instructions.

  • http://www.bestwebhostingsites.org/ Gouri

    Looks like brackets is not just another addition to the list of editors; it’s an editor with a difference. Thanks for sharing this new tool.

  • http://mikebull.info Mike

    This is a good proof-of-concept of getting a text editor working using JS, but if you really think this is revolutionary and will change the way we write code you are very mistaken.

  • itmitic─â

    Isn’t that something that Dreamweaver offers already: open associated CSS file?

    And from the looks of it, it’s just file editing based around the webkit engine.

    Overall, not at all revolutionary. Unimpressed.

  • http://www.bootleweb.com CB

    Wonder what proportion of sites are written in HTML these days? Rather than using a CMS (WordPress etc) in which case there’s almost no control over the basic HTML, instead using firebug to inspect the generated code, create CSS to suit, save, reload, rinse and repeat…

  • Kise S.

    I see this project integrated into major projects such as wordpress, drupal in the future, since its offer better way to edit static content

  • http://www.connectedwebsolutions.com Sam

    I was enjoying Brackets until I tried committing my code (Mercurial). Using Brackets corrupted my code and I could no longer commit and I was forced to clone and manually save changes in my original editor. Will try again when this is solved or just keep it for sites not using version control.

  • AnilG

    Unless it has vim shortcuts and modes I’m don’t want to know.

  • Shankar

    Hmm not that much grt…many editors like editplus are good.. this sounds same like that and jus some more new webkit engine append on it… lot of bugs.. uppercase tags are shown are errors…have to work lot… 1/10 ..

  • http://blog.digitalbackcountry.com Ryan Stewart

    Sam, can you drop me an email regarding the issue with Mercurial? Would love to help find out what is going on so we can make sure it gets fixed.


Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.