Brackets is the relatively new and still evolving open-source editor for web design and development built with web technologies such as HTML, CSS and JavaScript. The project was created and is maintained by Adobe, and is released under an MIT License, which is thought-provoking since Adobe has a lot of equity already invested in other text and code editing tools such as Dreamweaver.

The driving force of Brackets is that it is for the web and by the web, meaning that as a software application, it is built using the same technologies that build the web. Their catch phrase, “If you can code in Brackets, you can code on Brackets.” Brackets is a fully open-source and community project where developers contribute to the build, and if you are interested in influencing the direction of the project, any interested developers are welcome to join Brackets Dev Google Group to get on the build list. Since Brackets is still young, I would not recommend it for your routine coding tasks; however, if you like cutting edge applications you might enjoy examining some of the clever and creative features.

Test drive Brackets

The initial versions became available in May 2012; the current milestone downloads are available on GitHub Brackets, and as of this writing, Brackets Sprint 17 in both MAC.dmg (23.9MB) and Windows.msi  (21.6MB) versions are dated November 30, 2012, available as zip or tar.gz compressed files. In all, there are sixteen downloads of eleven versions with 24 branches and nineteen tags. The current build is still in its infancy and not deemed a full-featured code editor just yet; it is considered a beta release and ready for early adopters to start playing around with the tool at their own risk. I gave Brackets a test drive myself as displayed in Figure B:

The top level menu bar offers the typical options including File, Edit, View, Navigate, Debug, and Help. From the File menu item you can create a New File or a New Folder, as well as Open File and Folder –nothing really new here. By default, Brackets opens up to its own source code, where you can see the HTML, CSS, and JavaScript backbone of the application. The Debug menu provides a nifty Show Developer Tools (F12) which opens in your default browser (Chrome in my case) and allows you to view the Elements Computed Style, Styles, Metrics, Properties, and Event Listeners for the open file as shown in Figure C:

To create a new file, simply go to File, New File (Ctrl+N) and type in the file name. In this demonstration, I am naming the file index.html, and then the plain file is created and the cursor starts at line 1, as shown in Figure D and E below.

Figure D

Figure E

I then copied and pasted in a snippet of HTML code from my HTML5 Base Template as shown in Figure F:

Next, I’ve added in a header <header> and <hgroup> with an <h1> and <h2> along with a paragraph <p> and some content as shown in the code snippet below:

<header>
      <hgroup>
        <h1>
            The Start of Something New!
        </h1>
        <h2>
            Get your Game On!
        </h2>
      </hgroup>
     </header>
         <article>
            <p>
                The content goes here...
             </p>
         </article>

Another one of the features I like about Brackets is the live preview option which can be selected from one of several ways, either from File, Live Preview (Ctrl+Alt+P), or from the lightning bolt at the top right of the Brackets window, as shown in Figure G and H below.

Figure G

Figure H

Another great feature that I enjoy with Brackets is the built in automatic refresh upon saving the file. As you continue to edit the open file, the live preview continues to update once the file is saved without having to refresh the page in the browser. I’ve entered a few more lines of content with paragraphs. Once the file is saved, it is automatically updated in the live preview in the browser window; this effect is displayed in Figure I:

You can also edit styles with CSS and view the updates on the fly in the browser as well. I’ve added in an associated CSS file and linked it from the head of the original index.html file; then, I’ve incorporated a bit of simple styling for the <header>, <article> and <p> elements. The CSS code snippet is displayed below:

header {
    font-family: Helvetica;
}
article {
    background: beige;
}
p {
    font-family: ariel;
    font-size: 1em;
    font-weight: bold;
 }

Once you attach a new file such as the styles.css you do need to refresh the browser preview, and from then on your updates are displayed in the preview. As you edit the selected element within the CSS, it becomes highlighted within the live preview as shown in Figure J. As you make an edit in the CSS, the live preview adjusts on the fly.

Figure J

From the Navigate menu item another nifty tool is the Quick Edit (Ctrl+E). With this you can click on any element you are working on within the HTML and use the hot keys, or go to Navigate | Quick Edit and you’ll see the associated style pop up for editing purposes. So, let’s say you want to edit the <article> element style. You would click anywhere within the <article> element tag and then use the hot key combination Ctrl+E to make any edits in the Quick Edit window. When you are done, just toggle out of the Quick Edit by hitting the Ctrl+E key stroke again. The edit is also populated in the live preview automatically. With the Quick Edit in action on the <article> element, I’ve added in a padding of 10px into the style and this is displayed in Figure K:

As you can see, the live preview automatically updates with the new style of 10 pixel padding added to the <article> element. Other options include the ability of adding new styles to the CSS from the Quick Edit, where you can add in other styles for elements without having to jump into the styles file itself.

Extensions

At this time, Brackets does not have any functionality for self-discovering or installing any extensions, but there is a list of Brackets Extensions on GitHub that several people have built. All you do is select the extension that is useful for your project, download it, and then copy it to the User directory under the Extensions directory in the Brackets installation. With over forty listed, the extensions include the following subjects:

  • Code/Text Editing
  • Code Generation
  • Quick Open Support for PHP
  • General Functionality
  • Live Development
  • Visual Editing
  • External Tools
  • Linting and Warnings

Once the extension is placed into the extensions directory, go to Menu and click through Help | Show Extensions Folder | User, and then click on the extension you want to include. Typically you will need to close and then restart Brackets for the extension to be installed. Once your extension is installed it will show up at the top menu bar along with its associated menu item options.

This short piece is only a brief overview of the Brackets open source editor, and while it is still in the early stages of development, it is nice to see folks like Adobe opening up an open source development project for public inspection and engagement. Brackets might be too new for some folks, but others are taking it to new levels with development and extensions that are sure to make it one of the blistering open source text editors in 2013 and beyond.