Brackets Is a Future Text Editor With Build-In Live Preview and Inline Editing


We talked about some awesome development tools before, especially, tools in web developments. We also shared couple different text editors you can try on Windows to help improve your daily work. Today, I want to talk about the future text editor, Brackets.

Brackets, is an interesting text editor open sourced by Adobe. It has some feature that I think will dramatically improve your workflow if you are a web developer. It’s still in early stage of development, so don’t expect it to work perfectly. With that said, Brackets, have already included some very unique feature you won’t find in any other text editor.

Those two features will amazes you. You can download the latest experimental build here.

1. Live Preview

The idea isn’t new, you open up your text editor, making changes in the code, when you save the file the browser will automatically refresh and reload any new changes. This is pretty much what people used to do (or is doing), it either require an external application monitors the directory of the code, or it need browser plugin/extension to watch for file changes and then tells the browser to reload the file.

Brackets, does it differently, you don’t need anything third party application to monitor file changes nor browser plugin/extension. All you need is enabling the feature in Brackets, click on the top right corner lighting icon next to the “Experimental Build” (currently only works with Chrome Browser), or press Ctrl + Alt + P.


This will fire up Chrome and renders the file you are currently editing.


If you make any changes, save the file in Brackets. You will see the change is automatically show up in the Chrome without you ever to refresh the browser. If you are a beginner of web development, you will find this feature to be very helpful in terms of understanding which line of code does exactly what.

2. Inline Editor

Any web page is build with HTML, CSS and JavaScript. The traditional method of web development, what most developer is doing right now is edit the code in different files individually. They jump between the files frequently.

Well, not anymore,  if you press  Ctrl + E in any HTML tag that has a CSS file associated with, Brackets will open up the CSS file inline and find the tag you can edit in. Any change you are making will be saved automatically.


Take a look a the video below to see it in action !

If you think this is cool, you should definitely go ahead and try it out.


Please enter your comment!
Please enter your name here