Live Edit in PhpStorm

Posted on by Mikhail Vink

Live Edit gives you an opportunity to see all the changes instantly in the browser without refreshing the page. Just install the browser extension, and as you edit HTML, CSS or JavaScript in PhpStorm, Live Edit will reload the corresponding browser pages and highlight the elements you are working on. Completion lookup is also live.

Just have a look at this screencast to understand why Live Edit is one of the main productivity-enhancing features for front-end web developers:

Live Edit configuration and usage workflow has been significantly re-worked for PhpStorm 7 / WebStorm 7. To make its behavior more predictable, we are now enabling Live Edit only within a JavaScript debug session, so a Run/Debug Configuration should be configured first.

You can automatically create Run/Debug Configuration and run Debug Session for any HTML file by clicking Debug file_name item in the file context menu (or in the context menu of the editor when the file is opened). Run/Debug configuration will be created, file will be opened in the browser.

Otherwise, you can create Run/Debug Configuration manually.

By the way, Live Edit also provides a Reload in Browser action. Map it to a hotkey and reload any page in your browser you are working on right from the IDE (including PHP pages or Smarty/Twig templates).

Please read the full tutorial on Live Edit in PhpStorm.

Give PhpStorm 7 EAP a try. And as always, let us hear your thoughts in the issue tracker, through the comments below or in our forums!

Develop with pleasure!
– JetBrains PhpStorm Team

Comments below can no longer be edited.

33 Responses to Live Edit in PhpStorm

  1. jv says:

    September 10, 2013

    Gee I hope it isn’t available ONLY in this new context. I REALLY LIKE the way live edit works now and would hate to have to configure one more thing to get it to work.

    Two of the best features of phpstorm are zero config xdebug and LiveEdit. Please allow a choice of whether we want this new behavior or not.

    (a three year purchaser of phpStorm licenses)

    • zepho says:

      November 3, 2013

      I totally agree with jv.
      Currently phpstorm7 is not usable for me and my team. We honestly tink using another IDE….
      Why have you changed a running feature???

      • Mikhail Vink says:

        November 4, 2013

        Could you please provide us more info? Why you don’t like it? Have you tried following this tutorial – ?

        The only one major change in the PhpStorm 7 Live Edit workflow is that now you need to run JS Debugger to use Live Edit, but this JS run/debug configuration is created automatically when you select “Debug ..” from the context menu of the HTML file. And it makes Live Edit much more stable.

        See linked issues to in order to check why “always running” Live Edit had to be changed. And please have a look at the full tutorial at

        We will be very glad to discuss all the obstacles or usability issues you have.

      • Paul Redmond says:

        November 13, 2013

        I can’t believe this feature would be a deal-breaker. Especially considering how easily you can configure debugging (which is useful anyway for JS debugging) and the fact that it’s more stable :\

  2. Thorsten says:

    September 10, 2013

    I agree with jv

  3. Arno.Nyhm says:

    September 10, 2013

    very impressive the video, but: why you not add the used shortcuts as overlay captions so i can see which shortcuts are used? whithout this i can not learn the shortcuts 🙁

    • Mikhail Vink says:

      November 4, 2013

      We’ll try to provide all these shortcuts in the future. Thank you!

  4. Andrii Dieiev says:

    September 11, 2013

    Any chances to get Live Edit to work in Opera 15+ since it is very close to Chrome and allows to install same extensions?

    • Mikhail Vink says:

      October 1, 2013

      Officially it’s not supported yet.

  5. Henning Kvinnesland says:

    September 11, 2013


  6. Andrii Dieiev says:

    September 11, 2013

    Any chanses to get Live Edit to work with Opera15+?

    • Andrii Dieiev says:

      September 11, 2013

      Ooops, sorry for duplicate 🙁

  7. Tom says:

    September 11, 2013

    Please add a configuration option to restrict the live edit feature to selectable filetypes!
    In V6 live edit forces an reload on every change in php files, what causes a lot of problems. It is uncomfortable to switch live edit on/off, when switching from a html template to a php file!

    • Tom says:

      September 11, 2013

      PS: Ohh, forget my hint. If I have understood correctly, the plugin forces just reload, if a template files has been changed. So the php part is executed every time. I hoped that the live edit changes the dom of the document, like the debugger in firefox do!!

      • Mikhail Vink says:

        November 4, 2013

        It changes the dom of the document when you are working with HTML/CSS/JS, but if you are working with template engine (eg Twig, Smarty) you should re-execute it (there is PHP behind that after all).

  8. | wsp-web says:

    September 19, 2013

    […] Демонстрация работы Live Edit в PhpStorm  […]

  9. jv says:

    October 23, 2013

    Well, I truly hate the way Live Edit requires additional setup in PHPStorm7… glad I didn’t overwrite PHPStorm6… There’s lots to like about phpStorm7… but the new implementation of Live Edit isn’t one of those things…

    • Mikhail Vink says:

      November 4, 2013

      @jv Could you please share your ideas on how to make Live Edit in PhpStorm better and what in particular you do not like? JS Run/Debug configuration now is created automatically when you hit “Debug …” in the context menu. It makes the entire workflow much more stable. We would be glad to hear your ideas on how to improve it! Thank you!

  10. RiderSx says:

    October 29, 2013

    Totally agree with jv, it’s now impossible to live edit CSS if it included somewhere in Symfony2 templates, hidden deeply in you project bundle. Why the hell i should start Javascript debug session to edit css in a most comfort way? Uh, i wish i wouldn’t upgrade…

    • Mikhail Vink says:

      November 4, 2013

      JS run/debug is the most comfort way now, as we also answered in your HabraHabr comment ( – Live Edit has been reworked in order to make it more stable and predictable.

      The most comfort way now is to create these JS run/debug configurations invoking “Debug …” in the context menu of HTML files. As for twig templates, for example, you can easily create this JS run/debug configuration for the actual file you are going to use Live Edit for.

      Feel free to share any ideas on improving the workflow. Thank you!

  11. VIRUXE says:

    November 2, 2013

    I’ll just jump on the live edit sucks on v7 bandwagon and say i’m reverting to v6 just because of this.

    • Mikhail Vink says:

      November 4, 2013

      Could you please tell us why? Have you tried following this tutorial – ?

      The only one major change in the PhpStorm 7 Live Edit workflow is that now you need to run JS Debugger to use Live Edit, but this JS run/debug configuration is created automatically when you select “Debug ..” from the context menu of the HTML file. And it makes Live Edit much more stable.

      We will be very glad to discuss all the issues you experience with new Live Edit. Thank you!

  12. nullpeter says:

    December 5, 2013

    Live Edit for CSS doesn’t work anymore for me in PhpStorm 7. Changes in PHP or Twig files are triggering a page reload in a JS Debug Session. But changes in CSS-Files don’t show up anymore until a manual page reload.

    • Mikhail Vink says:

      December 10, 2013

      Are these CSS files “linked” from the file you are debugging?

      • Du lich Singapore says:

        June 11, 2014

        I linked css file in html file. But html is work but css not work

  13. agon says:

    December 30, 2013

    Doesn’t work on Webstorm 7 either, but worked fine on 6 with just HTML and CSS. I am trying to live edit my HTML and the CSS that’s being compiled from SCSS and it’s not working. I’m downgrading to 6 but this is a great inconvenience.

    • Maarten Balliauw says:

      December 31, 2013

      Can you provide us with a sample project or repro steps?

  14. Andrew Luhring says:

    January 13, 2014

    Here’s my setup and results:
    JavaScript Debug:


    Remote URLs of local files (optional):
    File/Directory (structure):

    public/ Remote Url : http://localhost:5000/


    Node interpreter:
    Node parameters:
    Working Directory:
    JavaScript file:
    Application parameters:

    Environment variables:

    Run with CoffeeScript plugin (unchecked).

    Before launch:
    External tool ‘derp/scss’


    Name: scss
    Group: derp
    Description: scss
    Synchronize files after execution (checked)
    Open console (unchecked)

    Show in:
    Main menu (checked)
    Editor menu (checked)
    Project views (checked)
    Search results (checked)

    Tool settings:
    + scss
    + –style expanded –sourcemap –watch $FileDir$/style.scss:$FileParentDir$/stylesheets/style.css
    Working directory: $ProjectFileDir$

    Browser / Live Edit

    Open browser:
    After launch (Default [which is chrome]) (checked)
    with JavaScript debugger (unchecked)
    ^^^Unchecked because opening Chrome’s Dev tools kill the Live edit.

    JetBrains Plugin in Chrome

    IDE Connection:
    Port: 63342

    Force CORS (Access-Control-Allow-Origin: *)
    http://localhost:5000, http://localhost:5000/*, http://localhost:63342/*,

    Start Node.js Debug Session (by clicking on the little bug icon.)
    Chrome launches to the correct page.

    Start JavaScript Debug Session (by choosing it from the debug drop down and then clicking the little bug icon.)
    Chrome page now has the ‘”JetBrains IDE Support” is debugging this tab’ message.

    Go to View and insure Live Edit is checked.

    Open up style.scss.
    border: 1px solid black;
    } # Wait for browsr to show changes.


    No changes happen until I refresh the page.
    Modifying any of my view files does not trigger a live update either (I’m using handlebars…actually express-hbs [node module]).
    Modifying any of my JavaScript files– either/both front and back end files does not trigger live edit.

    What do?

    • Andrew Luhring says:

      January 13, 2014

      Forgot to include:
      Webstorm v7.0.3.

      Chrome v 31.0

      OS X v 10.9.1

  15. Stuart Barker says:

    April 16, 2014

    The various comments here suggest php templating should work. I’m using expression engine which has it’s own templating engine. Editing an included php works but editing the templates doesn’t update.

  16. Saner says:

    August 22, 2014

    This has been one of the most disappointing changes to PHPStorm and is a real ballache!

    I watch colleagues using coda2 and watch as their changes appear live on their browser for the whole project. There I am changing items in php/html files having to setup a new debug session each time. Oh and then I want to make changes to a CSS file and those don’t change because I’m not debugging that file.

    I really don’t think that this should have been forced on everyone and should be an option.

    Maybe I have missed something but if I have then this is still a real huge step away from the “it just works” attitude that I have come to love about PHPStorm.

    It affects my work enough now that I am looking at different IDE’s and I really never thought I would hear myself say that!


Subscribe for updates