Review - Brackets Text Editor
Recently I decided to evaluate a few open source text editors. In this review, we will take a look at the Brackets code editor, an open source project by Adobe.
My personal requirements for a text editor are simple. I need to code in one window and see a live update in another. Brackets has a Live Preview feature that opens your file in to the Chrome browser. You can see the results in Chrome as you change your code. So, you won't be using the old process of edit - save - refresh browser. The instant live preview works for both the html document and the css code in the Inline Editor.
First, install Brackets
You don't need to open and switch between your html and css files. Brackets has an Inline Editor that will display and allow you to edit the css code associated to a tag selected in the html. In this screenshot, I've selected the h1 tag. As you can see, we can edit the existing css or click the New Rule button to add a new rule to the tag. This also works with html color codes, image thumbnails, JS functions and animation.
Extensions
Brackets is written in HTML, JS and CSS. So you can get your hands dirty modifying and extending the app if you like. As with most open source projects, Brackets has a large community of users and developers. You can join in and help or just browse the list of themes and extensions that can be added to extend the Brackets features. Just click File - Extension Manager. You might want to consider the Autoprefixer extension, which adds vendor prefixes to your code.
Download Brackets
https://brackets.io/
Brackets Blog
https://blog.brackets.io/
Brackets Support
https://github.com/adobe/brackets/wiki/Troubleshooting
My personal requirements for a text editor are simple. I need to code in one window and see a live update in another. Brackets has a Live Preview feature that opens your file in to the Chrome browser. You can see the results in Chrome as you change your code. So, you won't be using the old process of edit - save - refresh browser. The instant live preview works for both the html document and the css code in the Inline Editor.
First, install Brackets
- Download and open the dmg file
- Drag the Brackets icon to your application folder
- Click on Brackets.app in the Applications folder
- Read the introduction in the default html file. It is very useful. Don't skip it.
You don't need to open and switch between your html and css files. Brackets has an Inline Editor that will display and allow you to edit the css code associated to a tag selected in the html. In this screenshot, I've selected the h1 tag. As you can see, we can edit the existing css or click the New Rule button to add a new rule to the tag. This also works with html color codes, image thumbnails, JS functions and animation.
Extensions
Brackets is written in HTML, JS and CSS. So you can get your hands dirty modifying and extending the app if you like. As with most open source projects, Brackets has a large community of users and developers. You can join in and help or just browse the list of themes and extensions that can be added to extend the Brackets features. Just click File - Extension Manager. You might want to consider the Autoprefixer extension, which adds vendor prefixes to your code.
Download Brackets
https://brackets.io/
Brackets Blog
https://blog.brackets.io/
Brackets Support
https://github.com/adobe/brackets/wiki/Troubleshooting
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Content copyright © 2023 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.
