Key Takeaways
- Brackets, an open-sourced editor developed by Adobe, is primarily designed for front end developers and web designers, offering optimization for HTML, CSS, and JS.
- Distinguishing features of Brackets include its open-source nature and its construction with HTML, CSS, and JavaScript, offering users the opportunity to extend or modify it using familiar technologies.
- Key features of Brackets include the Live Preview function, which allows immediate reflection of changes in a new Chrome window, and the Quick Edit feature, which is context-specific and allows for quick rule edits, color selection, and bezier curve editing among others.
- Brackets’ potential lies in its extensibility, with a significant number of available extensions that can be easily installed from within the application, enhancing its functionality and adaptability to individual user needs.
Target Audience
It’s worth pointing out that Brackets is primarily aimed at front end developers and web designers. Although it’s essentially a text editor and therefore suitable for coding pretty much anything, it’s optimized for HTML, CSS, and JS (as well as derivatives such as SASS, Less, CoffeeScript, and so on). Ruby, Python, PHP developers, and the like might be better served looking elsewhere, whether that be for a fully-fledged IDE or something more lightweight such as Sublime or, indeed, Atom.What Makes Brackets Different?
Brackets makes a big deal of the fact that it’s written using a combination of HTML, CSS, and JavaScript. While this may mean little for the casual user, those who wish to extend – or even hack it – have the opportunity to do so using technologies they’re probably already familiar with. The fact that it’s open-sourced also makes it stand out from the crowd. Sublime, for example, is a commercial product, while Atom is closed-source and won’t be free forever.Getting Brackets
Brackets can be downloaded from the website, and is available for Mac OSX, Windows, and Linux (32 or 64-bit). For the purposes of this review, I’m running the 37th “sprint”, on Mac OSX.First Steps
When you open Brackets for the first time, you’re thrown straight into an HTML-based tutorial file with accompanying CSS, which is a great way to start exploring.![The Brackets editor](https://s3.amazonaws.com/f.cl.ly/items/1N1o3i1O092o1p0B3Q0j/brackets-main.png)
A Quick Feature Tour
Let’s look at some of the key features of Brackets.Live Preview
The Live Preview feature launches a new Chrome window showing the current page that not only doesn’t require a manual refresh when you change a file, but also as you type. It’s essentially Chrome’s Web Inspector, but with all the benefits of a self-contained editor. It’s a truly great feature, particularly if you have a splt-screen setup. It doesn’t just work with HTML files, either. If you make a change to a linked CSS file which impacts the current page, that too gets reflected immediately in the browser. If you’re editing a CSS file used by the currently visible page, highlighting rules causes the preview to highlight elements which are affected by them.Quick Edit
The Quick Edit feature is context-specific. Let’s look at a few of its uses.CSS
When you’re editing HTML, if you click a tag with a corresponding CSS declaration situated in a linked file and hitCtrl / Command + E
, an inline editor appears allowing you to quickly edit that rule. This is probably best illustrated with the following screenshot.
![Inline CSS editing](https://s3.amazonaws.com/f.cl.ly/items/452f090w2U1g1Q353z1h/brackets-inline-css-editing.png)
Colours
Hovering over a color in a CSS declaration shows a small swatch of that color. Also, the same keyboard shortcut (Ctrl / Command + E
) gives you a pretty sophisticated color selector / converter, as illustrated below.
![The Color selector](https://s3.amazonaws.com/f.cl.ly/items/1j171U1a2m2m2B242D2k/brackets-colours.png)
Curves
While unlikely to be used nearly as often as the CSS rule or color editor, the bezier curve editor is a hugely impressive little feature. Again, it’s best illustrated with a screenshot:![Editing beziers in Brackets](https://s3.amazonaws.com/f.cl.ly/items/3M3t0L3I3a401W26190j/brackets-beziers.png)
And More
It looks like third-party extensions will provide additional contexts for Quick Edit, like the regular expression editor described later in the article. It will be interesting to see what’s produced; there are clearly many possibilities for it.JSLint
Enabled by default, built-in JSLint support will check your Javascript code upon saving, with its results displayed as a panel below the main editing window.![JSLint in action](https://s3.amazonaws.com/f.cl.ly/items/0j0H3B1K123C3O1z1J15/brackets-jslint.png)
Other Features
As you’d expect from a code editor, Brackets implements code completion. And, it’s fast. Really fast. I’ve found a number of editors in the past to feel sluggish, which negatively impacts the experience, but not so here. That’s not to say it’s perfect. For example, when writing SASS it would be good if, once you start typing out a nested selector (i.e., with a period or a hash) that code completion would stop prompting you for a rule.![Autocomplete isn't perfect](https://s3.amazonaws.com/f.cl.ly/items/340i0X0G0K1V1O3D2b0b/brackets-autocomplete-issues.png)
Extending Brackets
The true power of Brackets, I feel, lies in its potential for extension. There are already a significant number of extensions available. I’m going to take a look at a few that stood out for me. The process of installing an extension couldn’t be easier. Simply click the “brick” icon on the top right, then you can search for and install them from within the application.![Installing extensions from within Brackets](https://s3.amazonaws.com/f.cl.ly/items/1t0P1f3d2o0B332H3z3F/brackets-installing-extensions.png)
![The Markdown extension in action](https://s3.amazonaws.com/f.cl.ly/items/0X2V030S38332t0g073X/brackets-markdown.png)
.inc
files, PHP files masquerading as .module
files, or indeed those without extensions, then the Language Switcher module may help. This module is shown below. It also means you can take advantage of language-specific features such as syntax highlighting on a new file before you’ve saved it.
![The file language switcher provides a new drop-down menu to specify a file's language](https://s3.amazonaws.com/f.cl.ly/items/1D1x1y2D3H2u280K091C/brackets-file-language.png)
Conclusions
Brackets feels like an extension of Chrome’s Developer tools. The Live Preview feature is incredibly useful, combining the advantages of coding in the browser with those of a dedicated editor. Its other killer feature for me is Quick Edit, although it feels like that’s some way off from its full potential. However, by tapping into users’ knowledge of web technologies, it seems likely that any gaps will quickly be filled by contributions. From a personal point of view, I can’t see myself switching to Brackets for the server side work I do using languages such as PHP. For more front end focused development I can see it becoming a useful part of my toolkit. If you’re a front end developer then I would urge you to take it for a spin, at least – and after all, it is free.Frequently Asked Questions about Brackets Editor
What makes Brackets Editor unique compared to other text editors?
Brackets Editor is a modern, open-source text editor that understands web design. It has unique features like inline editors and live preview that set it apart from other text editors. Inline editors allow you to open a window into the code you care about most, without having to navigate away from the main view. Live preview gives you a real-time connection to your browser, letting you see your changes instantly.
Is Brackets Editor suitable for beginners?
Yes, Brackets Editor is suitable for beginners. It has a clean, visually appealing interface that is easy to navigate. The live preview feature is particularly useful for beginners as it allows them to see the effects of their code changes in real-time.
Can I use Brackets Editor for languages other than HTML, CSS, and JavaScript?
While Brackets Editor is optimized for HTML, CSS, and JavaScript, it also supports other languages. You can use it for Python, PHP, Ruby, and many more. However, you may need to install additional extensions to get the best experience when coding in these languages.
How can I extend the functionality of Brackets Editor?
Brackets Editor has a strong and vibrant extension community. You can find and install a wide range of extensions directly from the editor. These extensions can add new features, improve existing ones, and even customize the look of Brackets.
Is Brackets Editor free to use?
Yes, Brackets Editor is completely free to use. It’s an open-source project, which means that it’s not only free to use, but you can also contribute to its development.
How does the live preview feature in Brackets Editor work?
The live preview feature in Brackets Editor allows you to see your changes in real-time in the browser. When you make a change in your code, the browser updates instantly to reflect that change. This feature is particularly useful for web development as it allows you to see how your code affects the web page without having to manually refresh the browser.
Can I use Brackets Editor on different operating systems?
Yes, Brackets Editor is cross-platform. It’s available for Windows, Mac, and Linux. This means that you can use it on your preferred operating system without any issues.
How can I contribute to the development of Brackets Editor?
As an open-source project, anyone can contribute to the development of Brackets Editor. You can contribute by reporting bugs, suggesting new features, or even writing code. You can find more information about how to contribute on the Brackets GitHub page.
Does Brackets Editor support collaborative coding?
While Brackets Editor doesn’t natively support collaborative coding, you can add this functionality through extensions. There are several extensions available that allow you to code collaboratively in Brackets.
How often is Brackets Editor updated?
Brackets Editor is regularly updated by its community of developers. These updates often include bug fixes, performance improvements, and new features. You can check for updates directly from the editor.
Lukas is a freelance web and mobile developer based in Manchester in the North of England. He's been developing in PHP since moving away from those early days in web development of using all manner of tools such as Java Server Pages, classic ASP and XML data islands, along with JavaScript - back when it really was JavaScript and Netscape ruled the roost. When he's not developing websites and mobile applications and complaining that this was all fields, Lukas likes to cook all manner of World foods.