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.

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.

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.

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.jsserver 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 CodeMirroras the underlying text editor, require.js to structure the huge amount of JavaScript code, LESSfor 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.