Early Access Program

Live Edit Updates in WebStorm 9 — What’s New?

This post is part of a series of posts covering features in WebStorm 9 EAP:

WebStorm 9 brings a highly demanded new feature: Live Edit for Node.js. With this powerful functionality, WebStorm can now automatically update your Node.js application or restart Node.js server on any changes.
You can download WebStorm 9 EAP right now.

Update: WebStorm 2017.3 brings some changes in the Live Edit configuration. You can read about them in this blog post.

With changes in HTML, CSS and JavaScript code on the client side Live Edit updates the contents of your web page in the browser without reloading. When working with Node.js, Live Edit first tries to update the app incorporating your changes without restarting the Node.js server; if hotswap fails, the server is restarted.

To make Live Edit work consistently and transparently for both client-side and server-side code, we’ve significantly reworked Live Edit configurations.

Let’s have a closer look at new Live Edit.

To use Live Edit, start a JavaScript or Node.js debug session. Accordingly, all Live Edit configurations are available in Preferences | Debugger | Live Edit.

Live Edit can work in two different modes: Auto or Manual.


The Manual mode is enabled by default. Start your debug session and make some changes in the code. To try the changes in action, click the Update Application button updateRunningApplication on the debugger tool window or in the main Run menu, or press Ctrl+F10 on Windows and Linux (or cmd+F10 on Mac OS).



Please note that an update will now be performed only if none of the modified files have any syntax errors. Previously, Live Edit would update the page even when some other modified files had errors.

In the Auto mode, the Update Application action is performed automatically. You can configure the delay before the update (300 ms by default) in Preferences | Debugger | Live Edit.

The check-box Restart if hotswap failed configures the Live Edit behavior for situations when changes in the code require a server restart (in case of Node.js) or a browser reload (in case of client-side code). If it is not selected, you will be notified that a restart required and will be able to do it manually.

Note that right now changes in HTML code will be updated in the browser automatically regardless of the selected Update mode.

In the following updates of Live Edit, we will add the ability to select different Update modes by file wildcards. For example, you will be able to select Auto mode for all CSS files by adding a rule for *.css, while still using manual updates for all *.js files.

Go ahead and try the updated Live Edit in action! If you haven’t used it before, have a look at our helpful tutorial, Getting started with Live Edit.

We would appreciate your feedback and bug reports on new Live Edit functionality here and in our issue tracker.

Develop with pleasure!
JetBrains WebStorm Team

Comments below can no longer be edited.

28 Responses to Live Edit Updates in WebStorm 9 — What’s New?

  1. Avatar

    Sadi says:

    August 11, 2014

    No Love for ReactJS ?

    I am having issues with the XML syntax. :S

  2. Avatar

    Rob says:

    August 28, 2014

    What sort of things can be hotswapped into Node? So far everything I’ve changed still requires a server restart.

    • Avatar

      Vladimir Krivosheev says:

      August 29, 2014

      Function body code. Could you please file issue and attach example?

  3. Avatar

    Matt Williams says:

    August 29, 2014

    Will this feature be available in IDEA 14? Its not present in the EAP.

    • Avatar

      Vladimir Krivosheev says:

      August 29, 2014

      LiveEdit is not bundled, you need to install, Settings -> Plugins -> Browse Repositories -> type in LiveEdit

  4. Avatar

    Duc Nguyen says:

    October 19, 2014

    How can I use Live Edit with my APIs come from Tomcat server (UI: AngularJS) while I start debug my project, webstorm 8 start new chrome window

    • Ekaterina Prigara

      Ekaterina Prigara says:

      October 20, 2014

      Do you want to use Live edit for your client-side code, right?

    • Avatar

      Pascal Salg says:

      January 23, 2015

      I too am interested in this. Our Java Backend is running on tomcat (managed by eclipse), we currently are switching to webstorm for the angular frontend.

      But with this setup, interacting with the application is not really possible as requests for RESTful web services are routed to localhost:63342 (tomcat is listening on port 8080) and thus are not reachable for the angular UI.

      • Ekaterina Prigara

        Ekaterina Prigara says:

        January 26, 2015

        To use Live edit feature for your client-side code, you need to create a JavaScript debug configuration where you can specify the URL to debug that would be http://localhost:8080/ in your case. If the project is in Tomcat’s webroot or you have automatic deployment configured in WebStorm, then all should work fine.

  5. Avatar

    Brennan says:

    November 6, 2014

    I’ve created a new project with node.js express as the project type. When trying Live Edit with Chrome I’m seeing immediate changes when updating jade files. The style.css however requires I press the ‘Update Application’ button, checking restart if hotswap fails doesn’t fix this and I don’t get a notification that it failed. Is this correct behaviour? Or is there something wrong with the default setup in the project type? I did notice if I update the CSS file first and then the Jade file, when the Jade triggers an update the CSS file will also be reloaded.

    When altering index.js in the routes folder, changing the title does nothing unless I physically refresh, I’ve had both JS and remote node debug configs enabled. Is there documentation on what file types work with Live Edit and what locations are being watched?

  6. Avatar

    Blair Morris says:

    November 21, 2014

    If we already used something like grunt-contrib-watch to do auto-reloading, will it have conflicts? It sounds as if the new feature is turned on by default.

    • Ekaterina Prigara

      Ekaterina Prigara says:

      November 21, 2014

      grunt-contrib-watch actually executes your grunt tasks on file changes. Whether it causes conflicts with Live Edit depends on what kind of tasks are executed.

  7. Avatar

    Sergey says:

    November 25, 2014

    Hi, Ekaterina
    You mentioned: In the following updates of Live Edit, we will add the ability to select different Update modes by file wildcards. For example, you will be able to select Auto mode for all CSS files by adding a rule for *.css, while still using manual updates for all *.js files.

    When that awesome feature will be implemented? Will it help with following issue – https://youtrack.jetbrains.com/issue/WEB-14341 or has to be fixed separately?

    Thank you

    • Avatar

      Vladimir Krivosheev says:

      November 25, 2014

      >> When that awesome feature will be implemented?
      It depends on your feedback 🙂 Now we got it. Probably WebStorm 10.

      WEB-14341 is not related, will be fixed separately.

  8. Avatar

    Juan says:

    February 25, 2015

    Where is Preferences in Windows??

    • Ekaterina Prigara

      Ekaterina Prigara says:

      February 25, 2015

      Menu File – Settings

  9. Avatar

    Giovanni Battista Lenoci says:

    October 21, 2015

    Hi, I’m going countercurrent and I would like to use liveedit only on demand.

    There’s a change to use liveedit only to reload browser windows on demand (with a shortcut) without leaving the ide and not when saving?

    After years of programming I’ve developed an habit to press many times “ctrl+s” during editing, but that doesn’t mean I want to reload the page every time.

    • Avatar

      Vladimir Krivosheev says:

      October 21, 2015

      You can disable auto update (Settings -> Build, -> Debugger -> Live Edit -> Set Update to Manual), but HTML editing not yet support manual update.

  10. Avatar

    Gregg Casey says:

    June 2, 2016

    On mac at least it is:
    Preferences | Build, Execution, Deployment | Debugger | Live Edit.
    Preferences | Debugger | Live Edit.

    And, if you are working in Node.js, turn on auto

    • Avatar

      Gregg Casey says:

      June 2, 2016

      I take that back. Live Edit does not work with Node.js. I turned it back to Manual. I will keep testing it manually from time to time and update this if it starts working.

      • Ekaterina Prigara

        Ekaterina Prigara says:

        June 3, 2016

        We’d appreciate if you share with us a bit more details on that on our tracker https://youtrack.jetbrains.com/issues/WEB: what Node.js version you use, what kind of changes are not reloaded? Thanks!

  11. Avatar

    LAU says:

    July 30, 2016

    Does it support reactjs?
    I’m getting this error whenever I updated my react component:

    Failed to compile new version of script: SyntaxError: Unexpected token import

    • Ekaterina Prigara

      Ekaterina Prigara says:

      August 1, 2016

      What tool do you use to compile your code? It seems that you get this error from it.

      • Avatar

        Vladimir says:

        November 26, 2016

        I have the same problem, livereload doesn’t work with babel.
        WebStorm 2016.3.1
        Run/Debug Configuration: https://snag.gy/gBbYkc.jpg
        Debugger Live Edit Configuration: https://snag.gy/vYwUN7.jpg
        Initial “Debug server.js” works fine but after any file change:
        0:30 server.js: Failed to compile new version of script: SyntaxError: Unexpected token import

  12. Avatar

    Kieran says:

    May 18, 2018

    Whilst running ionic serve in webstorm 2018.1 terminal I am experiencing from time a phantom rebuild.. I have not made any changes, am testing the app from localhost:8100 and suddenly the host decides to rebuild. This can be annoying if I am half way into testing some feature.

    Could this have something to do with LiveEdit?

    • Ekaterina Prigara

      Ekaterina Prigara says:

      May 21, 2018

      Please check the IDE auto-save settings in Preferences | Appearance & Behavior | System Settings – when using build tools that run in watch mode, it’s better to disable all the checkboxes in the Synchronization section to prevent the IDE from saving the files automatically. It also better not to use Live Edit in this case since the Ionic serve should take care of reloading the app on save. Hope it helps!