Brackets by Adobe: An Open Source Code Editor in the Making


By
Web Design

In this article, I shall be taking a look at Brackets, the free and open source code editor from Adobe. According to Adobe, the focus of Brackets is on ‘inline context-sensitive editing that allows you to code without any hassles or distractions’. It hooks up directly within your web browser, thereby allowing to develop in the same environment that you deploy. It comes with an MIT License, and is completely based on HTML, CSS and JavaScript.

However, before you get your hopes too high, be warned: Brackets is still in its initial stages, and is thus far from ready for use in bigger projects as a full-fledged code editor. You can, of course, get your hands on the milestone builds and see what Brackets has to offer, and even contribute towards development if you wish to. In order to do so, just head over to their Github page.

A Closer Look

Brackets comes with specialized features such as Live Preview and Quick Edit. Naturally, Adobe is trying to emphasize on the streamlined aspect of web development. The editor also supports extensions for additional functionality, including debugging, browser-specific CSS prefixes, JSDoc annotations, and so on. You can learn more about the Extensions API here.

Furthermore, the fact that Brackets is built on JavaScript and HTML/CSS, and comes with the rather liberal MIT License means that you can hack, extend or
tweak Brackets as per your needs and requirements. In fact, as Adobe has already exclaimed, “If you can code inBrackets, you can code on Brackets.”

Brackets is a rather small editor with a quick, nimble and swift interface. Apart from inline editing and breakpoint setting, it also allows you to see real-time edits to the output as you code, thereby giving you a quick preview of the changes that you make.

As of now, the Brackets team has been focusing on the desktop version, even though the browser version too is not far behind. You can even embed Brackets in your existing web applications. Once again, the fact that Brackets is easy to extend and comes with a lenient license further adds to its USP. In fact, when you first launch Brackets, the first code that you will see will be the source code for Brackets.

Plus, as is common practice, every web project involves a set of HTML, CSS and JS files that are inter-related. Generally, in most editors, if you wish to tweak a particular aspect, you need to locate the right stylesheet, search for the right class, edit and save it. In Brackets, however, you just need to use Quick Edit (Ctrl+E). The editor itself will then display only those classes that apply to the inline element. Obviously, this is a smart concept that can save a lot of frustration and wasted time for the developers.

Brackets operates by opening a live connection to your web browser. This means that Brackets brings some of the in-browser tools into the editor itself, thereby ensuring that your code lives in the editor but runs in the browser. You can then easily use the Live Preview functionality to see real-time changes to the output as and when you make edits in your code.

Additional Info

As already mentioned, Brackets is supported by its own set of extensions. For instance, the Markdown extension for Brackets, that you can grab via Github, provides you with a sleek live preview of the Markdown text in a separate panel each time you open a .MD file.

Along similar lines, the PageSuck extension for Brackets sucks down the content of a remote URL and loads it into Brackets for editing. In other words, once you specify a valid URL, the PageSuck extension grabs the HTML code for that web page and creates a new file in the active directory. The title tag of the retrieved web page serves as the filename for the newly created file.

Despite the fact that Brackets is still under active development and is not yet ready for a final release, the number of extensions is rapidly increasing. Plus, if you are planning to use Brackets for your web development projects, you obviously are aware of HTML, CSS and JavaScript, and thus you can easily code any extension that you may feel the need for.

Conclusion

Brackets is evolving at a good pace, and you can stay updated with the development process by joining the mailing list or following the IRC channel.

As a code editor, Brackets brings several new features to the table, and intends to make life easier for the web developer. Furthermore, the open source license and its ease of use are additional factors that can ensure a good reception for Brackets when its ready for a final launch.

Adobe seems to be taking its sweet time with Brackets, because development process went public almost a year back, and there are still no time-frames announced for the launch of the first version. Yet, all said and done, Brackets definitely seems to be a wonderful code editor for web developers and coders.

What do you think of Brackets by Adobe? Will you be giving it a spin? Share your thoughts with us in the comments below!

Useful Links

Related Topics


Top
This page may contain affiliate links. At no extra cost to you, we may earn a commission from any purchase via the links on our site. You can read our Disclosure Policy at any time.