Text Editor Review – Adobe Brackets

Adobe Brackets is an open source code editor by Adobe. It’s lightweight, fast, and free, and has a streamlined process for front-end development.

Adobe Brackets is actually built using HTML, CSS, and JavaScript, making it easily extendable and configurable for any front-end developer. When you open up brackets, you have access to the source code of the program. In this Adobe Brackets review, I’m going to go into a few things that I liked so far, and then talk about some shortcomings. Brackets has been developing and expanding at a rapid rate, so I’m under the belief that these shortcomings will be tackled in the future. I currently use Sublime Text 2, so I’ll be throwing a lot of comparisons to that editor.

Simplicity & Evolution

Brackets stands up against the rest so far just for it’s pure simplicity. Looking at it is easy on the eyes, and it responds fast to your actions. It starts up quick, runs easily, and feels smooth. Brackets is also constantly rolling out new extensions and features to streamline the process and make coding as easy and efficient as possible. These extensions are all available through the extensions manager, allowing you to make Brackets truly your own editor. The availability of the Emmet for Brackets extension is already a huge plus, and instantly boosts your coding efficiency.

(Side note: if you haven’t checked out Emmet, please do so! It’s available for other editors like Sublime Text and Text Mate)

Brackets editor

Native LESS Support

We’re in the CSS pre-processor age. Typing nav, nav ul, nav ul li, nav ul li a is a thing of the past. Nested CSS, functions, variables, and mixins are the present and future. Because Brackets is built with HTML, CSS, and JavaScript, and LESS is also built with JavaScript, it’s supported without you even having to do anything. Saving your *.less file automatically updates and outputs your CSS file. LESS (like SASS and SCSS) is a CSS pre-processor that allows you to code faster and neater. Global variables, scoped variables, and functions are a massive benefit in my opinion. Imagine being able to change your project’s primary colour throughout your CSS by just updating one variable. Brackets neatly and elegantly supports LESS.

LESS CSS

Live Update/Preview

With Brackets, you can link your project to a preview window in Chrome by pressing a button in the editor, or you can link your project to a local URL (e.g. http://localhost). Every time you save your file/project, the browser will automatically update without you even having to hit refresh. It works really fast, leaving you no noticeable delay. This is a great feature for quick development. On top of this, when the preview window is open, a highlighted box will surround the current element your cursor is at in the editor.

live-preview

Overall Opinion & Shortcomings

Overall, I think Brackets is neat, lightweight, and user friendly. It’s highly customisable and expandable to suit your needs, and with the right configuration, it can really streamline your workflow. If you’re coming from an editor like Sublime Text of Text Mate, you’re in good shape. Brackets boasts similar functionality in an even lighter package.

For me though, personally, I’d like to see increased support, auto completion, and tab-to-complete for some dynamic languages like PHP. Brackets is a front-end coding editor through and through, and for that it’s amazing. For anyone who does CMS development with web softwares such as WordPress or Drupal, a little extra would be welcome. That’s not to say that you can’t code PHP in Brackets. Syntax highlighting is present. But Sublime Text takes the upper edge for me on this part. Another big +1 for me in Sublime Text is the multiple cursor feature. I’ve gotten so accustomed to that feature, that t’s hard to say goodbye to it.

Upadte (28th April 2014): At the time of writing, Brackets didn’t have “multiple cursor” functionality. It does now, and that’s awesome.

I’d love to make the transition to Brackets. I love the fact that it’s open source and highly customisable, and that updates are frequently rolling out. I think Brackets has a very bright future, and symbolises what code editors should be. Soon enough though, I think Brackets will be in great standing, and maybe I’ll make the switch!

Author

I love the logical side of the web, and I'm an artist/painter at heart. I endorse progressive web techniques, and try to learn something every day. I try to impart my knowledge as much as possible on this site. I love food, I surf every weekend, and I have an amazing creative partnership with fellow mischief maker Elena. Together, we run SAYSM.

7 Comments - Leave Yours Below!

ash says:

take another look at brackets. it has multiple cursors now as well as a good selection of extensions that add some of those features you wanted :) it gets better every month.

Nick says:

Oh nice! Thanks for pointing that out. I still have it here on my computer, so I’ll definitely update it and give it another shot. Thanks!

Ian says:

Been doing no noticeable web work since 2009 and have decided to get started again, Installed my old version of Dreamweaver mx and that found I needed to work with .less and other stuff and this is no longer any good as a text editor.
Not tried Brackets yet your write up sounds exactly what I am looking for so have just downloaded it.
So your in Trinidad & Tobago and love food I was looking for a new best mate for my next holiday hint hint.
Everything I do is for MODx seems a little more flexible than wordpress or at least it was but then anything can be achieved with both I guess.
I digress thanks for the review off now to give it a text.

Cheers

Ian

Nick says:

Hey Ian,
Thanks for reaching out. Brackets is indeed a great editor and has improved a lot since I wrote this review. It’s very front end oriented though, but if you’re not into IDE’s in the first place, then this is cool. It’s great that it’s open source too. I’m fully set up on Sublime Text though, and I love it (for now). Visit Trinidad anytime, and send me an email ([email protected]) and tell me more about MODx!
Nick

Ian says:

Nick,
Great to hear back, I am not a developer and so are out of my depths with IDE’s this is more of a hobby for me rather than a profession.
First impressions of this editor are ok I was trying to make it automatically compile the css file but it looks like I need to add some code to the start of the .less file telling it what to do so for now I will stick to having winless running in the background compiling when I save the file in Brackets but sure I will find some more useful features in time.
Well as for MODx if you ever have a quick look at it and think its just another CMS you need to look further but in a few lines without bloating these blog comments I will try and explain…

You have a backend called a manager and everything to do with development and content management is done there. Everything other than image files is stored in the database so to get a basic site template working you paste your own html of your template into a form in the back-end (manager) and where in your template you would like the content to appear you but a tag of [[*content]] and where your menu is you would strip that out and replace it with [[!Wayfinder]] which like this would output and unordered list.

Take that snippet call [[!Wayfinder]] you would add attributes to it to make it output how you want so if your using a dropdown menu and every layer has its own class then these can all be added inside the wayfinder snippet call to give the desired result. There may be repeating parts of the site like the footer so these would be added into a thing called a chunk so you might create a chunk(like an include) called footer in the Manager and in your template you would put [[$footer]]
But this really is just the basics you might have users who log in and if you want to give them a message you could add a chunk that has some snippets inside of that such as Hello, [[*usersName]]. You have [[*messageCount]] messages.
Nick I will leave it there that’s just to give you the most basic idea and I aint the best at explaining, the initial learning curve is a little steep or at least for me it was but its really worth the effort, if you do try it login go to the package manager and you will see some full site templates that can be installed, install one of these and then have a look at the code in the template to give you an idea but the whole thing is built more for developers and when installed its just the bare bones with no sample content pages (known as documents) so I think this is one reason why its not so main stream it just seems to be more web development companies using it. OH the other great thing you can modify the backend so that someone who’s not very tech minded can log in to update stuff and you can make it so they only see what they need to such as certain menu items and form fields and permissions on delete in fact anything you want.
Right enough from me but if you do ever look into it would be interested to hear your feedback.

Went to Mexico last year and while there met someone who was also there who a hosted a bunch of sites with till I gave them all up a guy called Sergio at secmas.net sure people reading this blog wont need to know that but still in contact with him and his family strange how things workout as initally met him via a hosting forum then 7 years later the wife and me are sitting in Cancun eating great food with him and all his family.
Take care Nick keep up the good work and maybe one day I will make it to Trinidad,

Ian

Nick says:

Hey Ian,
Thanks for the comprehensive run through of MODx, and I hope you get onto a winning streak with Brackets. Programs like Brackets and Sublime Text are all about getting your workflow in check. Once you reach that point, you’ll be rocking and rolling real nice. Take care also.

Shahin says:

The interface is very cool…

I love it very much.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>