Posted on by & filed under Content - Highlights and Reviews, Programming & Development.

A guest post by Ingo Richter, a Computer Scientist/Web P&A with Adobe Systems who is currently working on Brackets and you can find him @ingorichter.

Creating content for the web is mostly done in people’s favorite editor. Some prefer a WYSIWYG editor over a plain text editor, but this is purely a matter of taste. What matters most is to have the right tool to make you more productive. You should choose whatever helps you best to do the job. What about a text editor that supports you in creating content for the web? How about an editor that itself is built with the technologies of the modern web: JavaScript, HTML and CSS. Let’s have a closer look at Brackets, which is such an editor.

Introducing Brackets

Brackets is an open source modern code editor, written mostly in JavaScript, HTML and CSS. We built Brackets to help web designers and front-end developers to be more productive by providing features like Live Preview, Quick Edit, Quick View, Quick Docs and Code Hints for JavaScript, HTML and CSS. These features should help you to navigate, inspect and find the information you need at your fingertips.

For example, placing the cursor on the <H3> HTML element and pressing Ctrl/CMD+E will open the Quick Editor to show you all of the matching CSS rules for this element, and in which CSS file the rule is defined. Hit ESC and the Quick Editor will go away. That’s easy in Brackets:


Getting Started with Brackets

First we need to get a copy of Brackets. You have two different ways to get Brackets:

For a first time Brackets user, I recommend downloading the latest installer. Brackets is available for Mac OS X (10.6 through 10.9), Windows (XP, Vista, 7, 8.x), Linux (32- and 64-bit)

Note: The Linux version is mostly driven by the great Brackets community. So expect some rougher Edges for the Linux version. The Brackets wiki has more details about the Linux version.

After you have downloaded Brackets to a local directory, you need to install Brackets on your machine. To start the installation on Windows and Linux you need to start the installer by double-clicking the msi or deb file that you downloaded. On OS X, you need to double-click the dmg and drag Brackets to your Application folder. That’s it!

To use the Live Preview feature with Brackets, you need to have the Chrome Browser installed. Otherwise Brackets will tell you to get it the first time you want to use Live Preview. But why wait? Get it now and you are ready to explore Brackets.

Now find the Brackets Application on your system and launch it. You should now see something like this:


Live Preview

Wouldn’t it be great to develop your website a little more interactively? And I don’t mean the usual edit, save, refresh cycle that you usually have to go through. I mean truly interactively.

Now is a good time to try Live Preview that provides this interaction. Look for the Thunderbolt Icon in the upper right corner of the Brackets Window. Click on it, and Brackets will open your HTML page in Chrome. The first launch brings up this dialog, telling you a bit about Live Preview. Click OK and Chrome will launch and display the index.html page.


Next, make some changes to the HTML document. You can immediately see your changes in Chrome without reloading the page. This is a great productivity boost and it makes developing HTML pages so much easier.

Let’s change the background color of the page:

  • Place the cursor inside of the <body> tag.
  • Press Ctrl/Cmd+E to open the Quick Edit window to change the CSS rule for the body tag.
  • Place the cursor after the background-color property and change it from #FFFFFF to #C00001. You can even see how the background color changes while you are typing.

To finish Live Preview, click again on the Thunderbolt icon:


Building Blocks

At the beginning, I mentioned that Brackets is written in JavaScript, HTML and CSS with some other ingredients to make it look and behave like a native application. What are these other ingredients?

Brackets uses the Chromium Embedded Framework (CEF) as a shell to host the JavaScript, HTML and CSS files, which make up the application that we know as Brackets. Think of CEF as a sandboxed Chrome Browser that displays only one website.

Most of Brackets’ application logic is written in JavaScript, but there are a couple of native additions that we at Adobe have made to CEF. For example, file system access, native OS menus and communication with Chrome for Live Preview are just a few. All of these work under the hood, and you don’t have to deal directly with these native components, because the native functions are bridged into the JavaScript world.

We’ve also integrated a Node.js server into Brackets to enable advanced features like Live Preview and Extension Management.

What else do we use to build a desktop application with web technologies? We use CodeMirror as the underlying text editor, require.js to structure the huge amount of JavaScript code, LESS for styling the UI, and many other great open source libraries.


If you can use Brackets, you can extend it. This is the tagline we use to describe how easy it is to extend Brackets. If you use Brackets to develop frontend HTML or backend JavaScript code, you already know the required tools to enhance Brackets. Brackets was built from the beginning to allow easy extensibility by writing Extensions. If you miss some functionality from other text editors you’ve used, there is a good chance that you can easily create an Extension to fill this feature gap. But before you start hacking Brackets, please have a look at the Brackets Extension Registry by clicking on the block icon in the Brackets toolbar. You may find that there is already an Extension that provides your missing feature. There is a large community out there building all sorts of Extensions that make Brackets more powerful.

In the next post I will give you more information about building your own Brackets Extensions.


We briefly scratched the surface of Brackets in this post. I showed you where to download the latest version, how to install it on your machine, and how to have your first Live Preview session. I gave you a brief overview of the components that we use to build Brackets and where to find Extensions to add new features to Brackets.

If you want to know more about Brackets, I recommend starting with the GitHub Project page, and look below for some great JavaScript resources from Safari Books Online.

Not a subscriber? Sign up for a free trial.

Safari Books Online has the content you need

Learning JavaScript Programming Video teaches you the basics of programming with JavaScript, the worlds most used programming language. The tutorial is designed for the absolute beginner – no prior JavaScript programming experience is required in order to get the most out of this video training. You will start with learning what programming is, and specifically, what JavaScript is, how it it used, and its limitations. You will discover variables and data types, and how to take input and create output. Craig covers conditions, loops, arrays, sorting, functions, paramaters and debugging. You will even learn advanced concepts such as OOP, string manipulations, regular expressions and other programming patterns.
Eloquent JavaScript is a guide to JavaScript that focuses on good programming techniques rather than offering a mish-mash of cut-and-paste effects. The author teaches you how to leverage JavaScript’s grace and precision to write real browser-based applications. The book begins with the fundamentals of programming—variables, control structures, functions, and data structures—then moves on to more complex topics, like object-oriented programming, regular expressions, and browser events. With clear examples and a focus on elegance, Eloquent JavaScript will have you fluent in the language of the web in no time.

About the author

IngoPortrait-1 Ingo Richter is a Computer Scientist/Web P&A with Adobe Systems, and is currently working on Brackets. He has successfully worked through five release cycles of the Adobe Creative Suite and is experienced in creating products from start to finish. He moved from Hamburg, Germany to the Bay Area to explore the Wild West. You can find him on Twitter @ingorichter.

Tags: Adobe, Brackets, Chrome, Code Editor, CodeMirror, CSS, Google, html, Javascript, LESS, Live Preview, open source, Web Developers,

Comments are closed.