Brackets: Free Open Source Code Editor Built with HTML/CSS

Whether it is for writing PHP, CSS, HTML or other languages, we all want to have to use only one, simple-to-use editor which looks great and have good features to boot. If this is what you are looking for you may find it in Brackets.

Brackets is a free and open-source editor built with HTML,CSS and Javascript. You may notice that it is also built using Twitter Bootstrap, which gives a great-looking and powerful framework to a pretty good editor. So far, it is available for download only for Windows and Mac systems.

Here are just some of the features you can find in Brackets.

Sidebar Menu

Brackets comes with a handy-dandy vertical sidebar navigation menu that can be used to navigate between previously opened files quickly. Using this menu, you can also open up a folder and display each and every code- or text-related file in that folder.

bracket editor sidebar

Live Preview

Brackets hooks up directly to the browser allowing you to preview the files you are editing. My favorite part of live preview is that it even supports the previewing of PHP files! The live preview can be used by clicking on the lightning bolt in the top right hand corner of the editor.

bracket livd preview

Quick Open

Yet another great feature of the Brackets editor is the quick open tool. This is easily accessible by heading to Navigation > Quick Open in the top menu. Quick Open allows you to open up a file in the editor just by typing the filename, skipping the regular dialog pop up.

bracket quick open

Quick Edit

The ‘Quick Edit’ feature is another one of my favorite features. It allows you to edit CSS elements quick and easy while editing your HTML element related to that particular CSS element.

For instance, if I were editing a small paragraph on an HTML page and wanted to edit the CSS background for that paragraph, I can use quick edit to change the color of the background.

bracket quick edit

Open Source

Another one of Bracket’s great and useful traits is that the editor is completely open source. Meaning, that anyone can add to the code and contribute to it. The developers have written out a complete guide to "hacking" and adding to the Brackets Editor. You can even create and download extensions for the editor.


Brackets is an amazingly useful and feature-packed editor, play with it to find more features that can suit your needs. However, note that it still can be a bit buggy at times as it is still in active development.