Live Development with Brackets (experimental)

As you all know and love, Brackets gives you immediate feedback in the browser when editing CSS files through the live preview. We call this “live development”. What you did not know is that Brackets already includes some experimental features that allow the live development of HTML and JavaScript files.

The video below demonstrates what I mean (best viewed in 720p):

The YouTube ID of qrtaj8IwAmg?modestbranding=1&vq=hd720 is invalid.

So, how does it work?

For the live preview, we open a remote debugger connection to Chrome, which we can use to inspect and interact with the visible page. Through this connection, we can replace some of the source files of the rendered web site with updated copies. This is how CSS and JavaScript changes are passed to the browser. For HTML, however, we need to do more to preserve the state of the web site, because updating the HTML source this way resets the website entirely. Instead, we create and maintain a mapping between the source code and the rendered DOM tree through the HTML inspection methods of the remote debugger. We can then use this mapping to update the rendered element when the source code changes. So far, this works only for text elements, but it should be possible to extend this to all possible HTML manipulations (it is just a lot of work to do so). The same mapping is also used to drive the navigation between web site and source code. We install a new click handler in the web site, adding a special data-tag to elements upon hovering over them, which can be detected and visualized by Brackets.

The live preview remote debugger connection can be used by extensions to do cool things. For example, the Debugger extension uses this connection to create JavaScript breakpoints and allow pausing and stepping through code.

The connection is fairly easy to use and documented (see brackets/src/LiveDevelopment/Inspector/inspector.html) or the official (but incomplete) documentation. To use the connection, just include “LiveDevelopment/Inspector/Inspector”, attach a connect handler, and code away!

16 Responses


  1. Derek says:

    Can I also just open the Mac app package and edit the .js file in there to enable that flag or does Brackets *have* to be rebuilt after this edit is made? I’m trying to edit the HTML on a file and it’s not updating currently so I’m guessing that means no?

    • It should work but you still need to disable the cache as shown in the video. However, I submitted some bugfixes that are not included in the current release, yet. To get them, check out my branch and activate it by holding Shift while starting Brackets and selecting the index.html from this branch.

  2. sathyamoorthi says:

    Nice features. This will make developer life, much interesting.

  3. Caleb M. says:

    Wow, great job Brackets team! These live development tools are really the key to making Brackets standout from other editors. I know I’ve mentioned it before, but having live preprocessor support is a HUGE feature for many developer today.

    Keep up the great work!

  4. Ryan says:

    Just curious if you guys are allowing people to live edit the original HTML source code or your replacing the original source with the DOM generated representation from the inspector and then allowing people to edit that in Brackets.

    I ask because I tried to use WebKit to take a crack at this exact problem a few years ago and I found there to be no built-in way (with the inspector or otherwise) to map DOM nodes to their original source location.

    Unless this has changed recently, the only way I could see this working is if you build your own html parser into Brackets that exactly matches webkit’s (that would be quite an achievement!) or you’re just using the source that gets re-generated from the DOM loaded in the browser.

  5. pppdns says:

    Nice feature!
    Does it work only with file protocol or when files are loaded from a local webserver?
    (I guess Brackets can figure out the filesystem mapping from the set Live Preview Base URL (set at Project settings))

  6. […] the course of this year, we’ve been quietly working on Live Development for HTML. Live Development goes beyond a simple auto-reload that triggers a page refresh on save. With Live […]

  7. dadf says:

    Just trying Brackets and noticed the Live Preview feature today- looks like a VERY promising IDE extension- not sure any other has it to this level, let alone where it will go as it develops further! However, primarily being a JavaScript developer, a little disappointed that when I have a page being previewed, that if I open the developer console, Live Preview cancels the preview and shows a pop-up saying ‘Live Preview was cancelled because the browsers developer tools were opened’. Surely thats a bug? I should be able to look at console while previewing, even simply to check my own console info statements etc… am I missing something? As mentioned, new to Brackets- thanks!

  8. Jonathan Channon says:

    I get the same

  9. Keystar says:

    please help me !!!
    i’d try Brackets live preview but it doesen’t work.just shows brackets logo.

  10. Md Sami says:

    How can i change the default browser of brackets ( Chrome set default browser to Live preview )
    i wanna see Live preview in Mozilla firefox how can i make the change .

  11. Baddou says:

    Me too please, can I change live preview to Firefox Thanks.

  12. Eamon says:


    First off, I appreciate the hard work that goes into Brackets, it’s amazing.

    The reason I leave a comment is to ask for help regarding the installation of this live development tool. I think that I followed the instructions as well as I could, and ended up with an error when I tried opening Brackets again, that said:

    Oops! One or more required libraries could not be found.

    Would you know how I can reinstall these libraries? I am a novice and just got acquainted with GitHub and Git…

  13. Drimax says:

    Hello you can see a link that explains how to install the plugin to work with other browsers Firefox , Safari , that’s good I love it Brackets

  14. Michael says:

    My live preview is launching IE, not Chrome. I need to be able to specify multiple browsers…in fact, I would say this single feature is the most important on the planet right now. Launch chome, IE, and firefox in web-view, mobile-view and fablet-view.

One Trackback

Post a Comment

Your email is never published nor shared. Required fields are marked *

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=""> <s> <strike> <strong>


+ six = 11