HTML5 Development Center

Developed for you in part by
 
696-brackets-editor

Brackets: a Revolutionary Code Editor for the Web

By | June 28, 2012 | Business | HTML | HTML5 | News | Open source | Programming | Software

11

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:

Brackets

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:

Learn Responsive Web Design

Join Learnable $29 Includes all SitePoint books

Craig Buckler

Craig is a Director of OptimalWorks, a UK consultancy dedicated to building award-winning websites implementing standards, accessibility, SEO, and best-practice techniques.

More Posts - Website

Tagged as: Brackets, editor, HTML5 Dev Center, IDE, web

{ 11 comments }

Ryan Stewart July 16, 2012 at 7:43 am

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.

=Ryan
ryan@adobe.com

Shankar July 4, 2012 at 2:14 am

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 ..

AnilG July 1, 2012 at 6:42 pm

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

Sam June 29, 2012 at 6:40 am

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.

Kise S. June 29, 2012 at 12:39 am

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

CB June 28, 2012 at 1:04 pm

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…

itmitică June 28, 2012 at 9:49 am

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.

Mike June 28, 2012 at 9:37 am

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.

Gouri June 28, 2012 at 8:05 am

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.

kris June 28, 2012 at 7:56 am

How I can try it on Windows.

Craig Buckler June 28, 2012 at 8:38 am

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

Comments on this entry are closed.