Putting Your Code into Brackets(.io)

We all have our own preference on text editors. Some like the completeness and presentation of Coda 2, the increasingly popular and lightning fast Sublime Text, while others may prefer the simplicity of Notepad++. There are a quite a few text editors at your disposal, but for this piece, let’s take a look at Brackets.

What is Brackets?

Brackets is a text editor built on HTML, CSS and JavaScript. Predominantly it’s aimed at web designers and developers built on and around web standards. Since it’s release in 2012, it has been gaining more and more converts. Presented by Adobe and featuring many ways to incorporate Adobe Edge into the platform make this an editor with a future.

Stand out Features

One of the greatest ‘wow factors’ of Brackets is the real time feature. For those who may have used LiveReload, you might be familiar of the concept: compile your code and rather than keep refreshing or reloading your browser window for any changes, it’s all done automatically. However, where Brackets raises the bar is the real time output. As you edit code on the fly, your browser is automatically refreshed. No need for saving each time. This feature is superb as you can experiment more fluently , visually seeing if something will work or not. Great for testing the flow of your content – notably aspects such as typography, what colours work, general layout – the list goes on.

To accompany the real time preview aspect, each time you click on an area – be it HTML or CSS – the area is highlighted in a focus mode of sorts, allowing you to target various segments of your page – again, in a highly visual and intuitive manner.

Like Sublime Text has a package manager for allowing you to extend the functionality of the software, so to has Brackets with it’s Extension Manager. The Extension Manager is much more intuitive than it’s Sublime Text counterpart as it features a very simple management interface with search functions and compatibility lists.

There are many more features within the current Brackets build (36 as of writing) that haven’t been covered here. One such feature that shows a lot of promise is Theseus – principally used for debugging with Google Chrome and Node.js. Other new features include faster file caching, improved code hints for CSS including Sass and LESS.

Free For All: Brackets is Free to Use

To fully appreciate the practicality of Brackets, we encourage you to download it and give it a trial. There’s no emphasis on the word trial however as this is a pure open source platform and should remain 100% for the foreseeable future. For now however, it’s free to use and certainly worth experimenting with.

Whether you’re a hardened veteran coder, new to web design or just simply looking to tweak your own website, the visual aspect of coding and seeing real time amendments is a selling point in itself. That’s not to say that the very many features both present and in development aren’t appealing – they most certainly are as you can see from the above. Give it a try and let us know what you think.