LiveEdit plugin features in detail

Posted on by Vladimir Krivosheev

LiveEdit it is a new name of former “Instant HTML Editing” plugin (see What’s cooking: Instant HTML/CSS editing preview). Since WebStorm & PhpStorm 5.0 EAP 121.110 this plugin is bundled.

It allows you to view your changes in an actual browser window instantly without a page refresh, reload corresponding browser pages (related to opened file in IDE) and highlight corresponding element. Currently only Google Chrome is supported (extensions for Firefox & Safari are still postponed).

Let’s look at features in detail.

Reload corresponding pages for any opened file in IDE

If you edit your PHP file or Smarty template, it is so boring to switch to the browser and reload tab manually, isn’t it? Forget about it! Just View -> Reload in Browser (of course, you can assign keyboard shortcut (as example, you can assign ⌃+R under Mac OS)).

http://www.youtube.com/watch?v=1TfGpgxP3eo&feature=plcp

Live edit HTML, CSS and JavaScript

Want to see your change instantly? No problem. And yes, SASS/CoffeeScript are supported (external watching compiler is still needed). CSS and JavaScript (Kotlin, CoffeeScript and any other compilable to JS) will be hot-swapped without page refresh (of course, hot-swapped JavaScript will be effective only if it used in cycle or event-driven).

http://www.youtube.com/watch?v=w0Db0TTZJa8

Live completion

Completion lookup is also live.

http://www.youtube.com/watch?v=2N5XlqJYhIg&feature=plcp

As usual: feel free to report any problems that you have in bug tracker. We will instantly answer all your questions at the forum.

Happy coding!
JetBrains Web IDE Team

Comments below can no longer be edited.

96 Responses to LiveEdit plugin features in detail

  1. SylvainPV says:

    August 28, 2012

    Okay this is awesome. I just let a feedback to Webstorm team two weeks ago about this specific feature, and now here it is better than ever. Congratulations, you guys rocks !

  2. dmitrij says:

    August 29, 2012

    Does it use source maps?
    Thanks in advance.

    • Vladimir Krivosheev says:

      August 30, 2012

      Source maps is not supported yet. If your page uses minified JS with different file name and you edit original source — reload functionality will not work. Please specify what you want.

  3. cordoval says:

    August 29, 2012

    can this work for a complex php symfony2 app?

    • Vladimir Krivosheev says:

      August 30, 2012

      Should work. If not or you want something special — feel free to file issue about desired feature.

  4. Apple’s Victory, SkyDrive for Andorid, Office Web Apps, and Much More | Zfort Group Blog says:

    August 31, 2012

    […] LiveEdit — Instant HTML/CSS Editing Preview Plugin for PhpStorm. […]

  5. Petr Jirasek says:

    September 3, 2012

    It looks really good.

  6. Thierry Koblentz says:

    September 9, 2012

    Does this actually work?
    I just downloaded v5 and I can’t make “Live Edit” work.
    I have View > Live Edit checked and I also have the 2 Live Edit options in “settings” enabled. But no luck!

    Am I missing something?

    Thanks!

    • Thierry Koblentz says:

      September 10, 2012

      Answering my own question here…

      If things did not work it is because even if the “Live Edit” plugin appears in the list of already installed plugins (in v5), there is some manual work to do:

      1. adding the Chrome extension
      2. adding netty to the lib

      Things worked only after I did both steps above .

      • Vladimir Krivosheev says:

        September 10, 2012

        netty is not required for WebStorm. I think you have problem with JB Chrome extension installation. We are working with Google to simlpify this process. Did you see any notification in IDE about extension? May be you can send me idea logs (Help -> reveal in Finder, you can file issue http://youtrack.jetbrains.com/dashboard)

        • Ryan Aslett says:

          September 12, 2012

          The google chrome extension did not enable automatically. I had to quit and restart chrome to get it to appear. Perhaps a dialog indicating that if chrome is running when PhpStorm attempts to install the plugin, that chrome needs to be restarted?

          • Ryan Aslett says:

            September 12, 2012

            Nevermind. I didnt see this in the eventlog: 10:12:55 AM JetBrains Chrome Extension
            JetBrains Chrome Extension for Live Editing will be automatically installed after you restart Google Chrome.
            If you wish to install it manually without restarting Chrome, follow this procedure (link opens in a new Chrome window).

      • Eugene says:

        December 27, 2012

        > 2. adding netty to the lib
        Could you please tell how to accomplish that step?

        • Vladimir Krivosheev says:

          December 27, 2012

          You don’t need to add netty anymore.

  7. Frank says:

    September 9, 2012

    Can LiveEdit be used in IntelliJ as a separate plugin?
    Or will be be bundled with IntellJ some time?
    If it will be bundled with IntelliJ, when?

    • Vladimir Krivosheev says:

      September 9, 2012

      LiveEdit plugin is available for all JetBrains IDE — AppCode, RubyMine, PyCharm, IntelliJ IDEA, any other JetBrains platform-based product. Please Settings|Plugins|Browse repository -> type in LiveEdit

  8. Elv says:

    September 11, 2012

    Awesome!
    Waiting for firefox 🙁

  9. cordoval says:

    September 13, 2012

    it does not work for symfony2 apps using twig etc

  10. Pavel Kostenko says:

    September 14, 2012

    I’ve watched videos and it looks amazing 🙂
    You guys, at Jetbrains, are creating the best PHP IDE ever.
    Coding is a pleasure to me now 🙂 Thank you!
    Still downloading new version, and waiting…

  11. Live Edit в PhpStorm / PHP::Portal says:

    September 15, 2012

    […] LiveEdit plugin features in detail […]

  12. Mischosch says:

    September 17, 2012

    should it work with Chromium (Mac)?

    No plugin seems to be installed.
    Can I manually trigger the installation of the plugin?

  13. Alex says:

    September 17, 2012

    1) Does Live Edit supports LESS files runtime compilation?
    2) What about coffee script?

    Thanks.

    • Vladimir Krivosheev says:

      September 17, 2012

      1) external watching compiler is required.
      2) external watching compiler is required. And don’t forget, we don’t reload page — we use hot-swap for JS (hot-swapped JavaScript will be effective only if it used in cycle or event-driven).

      • Adrian Fedoreanu says:

        December 6, 2012

        Reloads perfectly .css and .html files! Great plugin!

        With .js files the webpage doesn’t get refreshed when I execute Reload in Browser.
        I looked into the console of the generated_background_page.html and I have an object IN with the updated script in it, but I have to manually refresh the webpage for the changes to take effect.

        Is it normal? :))

        Thanks!

        • Vladimir Krivosheev says:

          December 7, 2012

          Can you file issue about it with attached test files? http://youtrack.jetbrains.com/issues/WEB#newissue=yes

          • Adrian Fedoreanu says:

            December 7, 2012

            Before I open the issue, I want to be sure of my configuration and the way that the plugin works 🙂

            So in html file, when I change a letter, the change is instantaneous (no reload in browser shortcut).
            If I modify a .css file, I press the shortcut, the browser window get’s refreshed and the change is visible.
            With the .js file, I press the shortcut, the plugin communicates with the browser, but I have to manually refresh to see the change.

            Help? 😀

          • Adrian Fedoreanu says:

            December 7, 2012

            Reloading .js files for me works only if I modify the .js and press reload in browser shortcut from the .html file that includes the .js. Like that the browser window gets refreshed automatically and the new js code executes 🙂

            Should I open an issue?

            Thanks.

  14. Tony says:

    September 17, 2012

    How is it possible to run it from a local web server rather than running it with file:// and run into crossdomain issues.

    Starting chrome with –disable-web-security doesn’t work because Chrome says: JetBrains is running some error handling.

    Hope it is possible to configure an external url, maybe as part of the run configuration.

  15. WebStorm 5 – IDE for HTML5 / CSS3 / JavaScript development | techscouting through the java news says:

    September 17, 2012

    […] Live Edit Mode – Preview of your app in Google Chrome […]

  16. Jim says:

    September 18, 2012

    Live Edit is a great new feature – many thanks.

    Note – I use Linux Debian and needed the workaround as per Vladimir comments above – i.e. create new extensions directory, download the jb.crx file and move it to the new extensions directory.

    Grateful if major new features could highlight different O/S issues (Sorry if they are already listed clearly somewhere!) – I found my solution a bit by accident when reviewing this blog.

    Anyhow – great new feature.

  17. Dmitry says:

    September 19, 2012

    Awesome plugin!!
    Looks like it is not working for html files inside iframes (specific of our project 🙁 )
    Could you please take a look?

  18. dmitrij says:

    September 27, 2012

    Hello.
    Is there any way to make PhpStorm to reload live the page if it is generated through the server side (by php).
    And if the server is remote (files are always autosynced with PhpStorm feature “autodeploy”).
    Liveedit is working fine with static pages but not with the configuration described.

  19. Michiel says:

    September 30, 2012

    Is there a way to easily disable and enable (short key)? Also can it be disabled for php files?

  20. Jonathan Perl says:

    October 3, 2012

    How can we use this if we are using requirejs?

  21. Enrique says:

    October 22, 2012

    Does it work with Kohana? I can’t seem to get it (html or javascript debugging) working.
    I have View -> LiveEdit enabled, as well in Settings -> Live Edit.

    • Vladimir Krivosheev says:

      October 23, 2012

      If LiveEdit enabled, so, any change php file will cause page reload in browser. What file do you edit?

      • Enrique says:

        October 23, 2012

        Having LiveEdit enabled, I’m simply testing it by editing a view file, which is a php file that contains html and php scripts in it.

        I thought it would be the way my local domain is structured, but it’s not. My domain ends with .local, so that shouldn’t be a problem unless the https is throwing it off?

        Do I need to set my running/debugging configuration different?

        Well, any help would be appreciated. Thank you for the reply Vladimir.

  22. aug says:

    October 30, 2012

    Plz i want to know if the LiveEdit plugin is workable on Windows Operating system

    • Vladimir Krivosheev says:

      October 30, 2012

      Of course, do you have any problems?

  23. João Saleiro says:

    October 30, 2012

    Hello,

    LiveEdit is not working for me.

    I’m using PHPStorm 5.0.3 #PS-121.351 with Google Chrome 22.0.1229.94 m to edit the simplest HTML page running under a local vhost ( http://www.mypage.dev ).

    The connection between the browser plugin and PHPStorm works (and Chrome shows “JetBrains Chrome Extension is debugging this tab”), but live editing doesn’t. I have checked the background page, and the error message I have is:

    connected to jb server browser-ext-platform.js:112
    IN [“Dom”,”highlightElement”,[“7f5b9e69″,”html > body > div.blue-area:only-child”,1]] browser-ext-platform.js:124
    Uncaught TypeError: Object object has no method ‘get_asParsedUrl’ chrome-ext.js:341

    What can I do to fix this?

    Thanks,

    JS

    • Vladimir Krivosheev says:

      November 6, 2012

      Fixed in 5.0.4

  24. Frank says:

    October 31, 2012

    It’s not working here (Linux, Chrome)
    Extension is installed properly in Chrome. If I understand this correcly this doesn’t need a debug session? It needs only to enable the “Live View” option.

  25. hiro says:

    November 1, 2012

    http://local/ -> working
    http://local.com/ -> not working

    • Vladimir Krivosheev says:

      November 6, 2012

      Please try 5.0.4

  26. GodNob says:

    November 2, 2012

    Hello

    I have local project – mysite.my. Live edit not working.
    But it working for http://localhost/test/index.html
    ——————————————————

    Здравствуйте. Можно ли использовать лайв эдит для всего проекта, а не для отдельных файлов html?
    Т.е. проект на локальном веб-сервере – mysite.my.

    • Vladimir Krivosheev says:

      November 2, 2012

      Yes, but currently there is some issues with it. If you have problems with local sites, please, wait 5.0.4 (today will be released). Да. Но сейчас возможны с этим проблемы, так что если вы с ними столкнетесь (вкладка не инспектируется), подождите, пожалуйста, выхода 5.0.4 (сегодня).

      • GodNob says:

        November 2, 2012

        Спасибо. Вы лучшие

  27. Денис says:

    November 3, 2012

    the menu item “Reload in Browser” is not active, why?
    the Chrome extension is installed, the phpstorm settings checked too.
    What is the reason?
    Help please.

    • GodNob says:

      November 5, 2012

      phpstorm не нашел ваш проект среди открытых вкладок в браузере по-умолчанию. Если вы работаете с проектом, такое может случится, как у меня.

      • Vladimir Krivosheev says:

        November 6, 2012

        Вкладка открывается только при отладке, LiveEdit работает уже с открытыми (то есть инспектирует текущие открытые).

        LiveEdit doesn’t open any tabs — you need to open page by hand.

    • Vladimir Krivosheev says:

      November 6, 2012

      WebStorm 5.0.4 or another version?

  28. GodNob says:

    November 5, 2012

    Здравствуйте. После обновления 5.0.4 появилась ошибка “Can’t start Mercurial: hg.exe. Probably the path to hg executable is not valid.” В папке, где установлен phpstorm не нашел файл hg.exe.

    Подскажите как решить проблему? или надо скачать заново новую версию?

    • Vladimir Krivosheev says:

      November 6, 2012

      Please see Settings -> Version Control -> Mercurial
      You can set path explicitly (Specify executable path) if autodetect fails.

  29. Валерий says:

    November 6, 2012

    Помогите пожалуйста – как вообще установить плагин для Google Chrome? Где его взять?

  30. Rafael Franco says:

    November 9, 2012

    I’m trying to use the Live Edit functionality. I’m running Tomcat with a exploded war file.

    I’m editing a Javascript file, and although whenever I edit I see the message in Chrome saying: JetBrains Chrome Extension is debugging this tab I still don’t see the change reflected.

    I tried with launching the browser directly, Javascript debugger, but still nothing…

    Does it need any extra configuration to make it work? I’m running Windows 7

  31. Sasky says:

    November 10, 2012

    Hello, I’m having trouble with the live reload. Does anyone else have my problem?
    When editing HTML, I get the text “JetBrains Chrome extension is debugging this tab”
    Great,
    I can also select elements of the page in phpstorm and that elements are highlighted in Chrome.
    Great,
    The problem is the live editing is not working??
    I am running 5.0.4 and in the live edit settings ( in phpstorm ) both
    Enable live editing and Highlight current element in browser are selected.

    As a temporary fix I have assigned a keyboard shortcut (ctrl, command S ) to View -> Reload in Browser.
    But I hope someone can help me get live reload working properly!
    Thanks

  32. nakanaa says:

    November 14, 2012

    Sasky:
    I had exactly the same problem. I used couple hours to try everything possible and finally found the problem: Windows firewall!

    So everyone having problems: try disabling the Windows firewall completely to see if it’s causing the problem. I don’t suggest you leaving it disabled for a long time though..

    I’m on Windows 8 btw.

    • Niek says:

      November 22, 2012

      any idea which port is used?

      • Vladimir Krivosheev says:

        November 23, 2012

        Please try WebStorm EAP 6 (some related changes were done).

  33. mikesilence says:

    November 20, 2012

    Live Edit work with remote servet?

    • Vladimir Krivosheev says:

      November 21, 2012

      Yes, should works.

  34. mel says:

    November 28, 2012

    just downloaded trial version 5.0.4 to test it out. Looks great but live edit doesn’t work on mac OS X 10.8.2.

    The plugin seems to be installed ok in chrome (I can see message “JetBrains Chrome Extension is debugging this page”) and when I move the cursor in the IDE, it highlights the correct section, however when editing text, the browser is still displaying the old content and nothing changes.

    Chrome: Version 23.0.1271.91
    OS: OS X 10.8.2 (12C2034)
    JetBrains Plugin version: 0.3.11

  35. Mariano Simone says:

    December 4, 2012

    Hello.

    Google Chrome 23.0.1271.95 (Official Build 169798)
    OS Mac OS X
    JetBrains 5.0.4

    Liveedit doesn’t not automatically reload changed until I hit View->Reload in Browser.

    It is a bug?

    • Vladimir Krivosheev says:

      December 4, 2012

      Yes, please file issue about it (check View -> LiveView checked).

  36. Ryan Aslett says:

    December 17, 2012

    I finally got this working in for Drupal+Less (this will probably help Sass folks as well)

    I use Less and the less compiler plugin watching to constantly compile changes to the less files (https://github.com/acdvorak/intellij-lessc-plugin). So far so good, I make changes, and the less is automatically turned into my css files. Except the browser page did not refresh on reloading of the css files.

    This is because Phpstorm is looking at ‘myfile.css’ to change, except that due to drupal stuffing it’s cachebusting querystrings in there, phpstorm does not recognize it as the same file and therefore needs to change. So it sees myfile.css?87sdfh and doesnt recognize the change.

    It would be nice if the Live Edit feature ignored the query string portion of the javascript and css files, but for the time being, if you add the following to your template it’ll shave off those cachebuster strings and Live Edit will be in sync with those changes: http://drupal.org/node/1462572#comment-6096822

    Now, a half second after I make a change in my less file I see it in my browser. Nirvana.

  37. Dave Stewart says:

    December 20, 2012

    I’m testing WS5.0.4 on a Win7 Virtual machine.

    I get layout highlighting but no update when I type.

    Are there issues on Virtual Machines?

    • Vladimir Krivosheev says:

      December 20, 2012

      There is no any known issue. Try to use WebStorm 6 EAP.

  38. Ricardo Mallols says:

    December 21, 2012

    Yeah, that’s a great step ahead! Thank you very much for this improvement 🙂

    I have a question about. As somebody else reported before, for me live edit is perfect over *.html, but it’s not working for *.js scripts. I’m loading these resources through tag, no XHR protocol is involved at all. My env is Windows 7 and WebStorm 6 EAP.

    Thanks in advance!

  39. Steven Pribilinskiy says:

    January 3, 2013

    Please give an example of a hot-swapped cycle-driven JavaScript code

  40. Alex says:

    January 4, 2013

    at the beginning I was so happy to use this program. I downloaded trial version. And at the end this program didn’t satisfy me. I mean they came up with a lot of new staff that makes coding life a lot easier but few issues made me uninstall the program. CSS3 doesn’t support. Experienced some issues with image source file. ( webstorm automatically puts a forward slash in-front of images folder and that’s why none of my images were not showing ), As a beginner it took me a while to figure out the issue. Which I had to fix all manually. I would love to give a try on next version. Hopefully they fix the issues and add more feature. CSS3 definitely.

  41. Pete says:

    January 11, 2013

    Such an great feature but no firefox support makes it frustrating. Tried to swap on several occasions from Firefox deving to chrome. But it just doesn’t compare. Firefox support please.

  42. Panagiotis Kosmidis says:

    January 12, 2013

    I hope in 6th version this plugin will be also available for firefox! 🙂

  43. Marcus Pereira says:

    January 15, 2013

    First of all, I’d like to send you greetings for that so wonderful idea! One of the things we need to “fight with” on development cycle is the time spent waiting to see any little change on a file.

    I’ve installed it, and tried it with IDEA, with Java web application, running on a Tomcat server; every time I change some:
    a) JSP file it doesn’t work at all
    b) HTML file
    b.0) opening the file provided by the web service: the browser loads something, but the content of the page doesn’t change at all
    b.1) opening the file by the file system: it works as stated.

    My question is: do you have any plan to make it work with resources provided by a local web service, running from the IDE?

  44. Sergiy Shychynov says:

    January 18, 2013

    По поводу всех этих багов в “WebStorm 5.04 Live Edit Not Working”
    Я вычислил как заставить его работать в 5.04 (нужо чтобы вебсторм был загружен с включенными флажками лив эдита – в этом случае оно работало, а если при загрузке они были выключены – то нужно было включить и перезагрузить вебсторнм).
    Все это уже пофикшено в WebStorm EAP 6, но он же не позволяет ввести регистрационный ключ и через месяц потребует чтобы я его переставлял :-((( Не будет ли от этого проблем?

    • ksafonov says:

      January 23, 2013

      @Sergiy EAP program assumes you upgrade to the fresh EAP build every week or two. Most of the time we publish patches for upgrade, so the procedure is as easy as 2 clicks and takes a couple of minutes.

  45. Peter says:

    January 20, 2013

    WS 5.0.4: Local Live-Edit AND working Deployment-Server at the same time?

    Scenario 1
    a. set up local project (no Deployment Server configured, no locally installed server involved)
    b. use any of the browser/preview-related commands from the “View” menu
    c. this will open a browser with the source file from the local disk (file://[..])

    >> live edit works perfectly, deployment commands (sync/upload/download) are of course unavailable

    Scenario 2
    a. now configure a (remote) deployment server
    b. again use any preview command from the view menu
    c. this time a browser shows up with the source file opened remotely.

    >> While the deployment commands are available now, live edit does not work anymore (although the browser shows “JetBrains Chrome Extension is debugging this tab” and flickers/refreshes if I change the source file in WebStorm). Configuring automatic upload on file-save is not an option (live edit would then always be one step behind anyway)

    Question: can I set up WebStorm’s preview commands to open files locally (file://) with working live edit, while at the same time having a deployment server configured to be able to upload/download/sync files to the remote server?

    I only came up with a workaround by adding Chrome as an External Tool passing “$FilePath$” (the current local file through file://) as a parameter but would prefer the different built-in preview commands.

    Thank you in advance.

  46. Live reload website design with phpStorm | OpenGround says:

    January 29, 2013

    […] a holiday promotion. It’s a sharp web editor that not long ago just gained the new feature of live edit, aka live reload.  With the meticulous work required in front end development, really the only way […]

  47. Dave Carner says:

    January 31, 2013

    Love the feature. Is there any existing way to slow down the refresh rate of the browser? Working on dual monitors it’s distracting to continually have the web browser refreshing on one side as I’m editing code on the other. If the plugin would wait a few seconds after the last keypress before refresh that would be outstanding.

    Besides that small issue this is a wonderful tool/extension. Thanks for making it happen!

    • Vladimir Krivosheev says:

      February 7, 2013

      What file do you edit? PHP?

  48. Thomas Pons says:

    February 8, 2013

    The Chrome extension doesn’t work i’ve got an error

    GET http://127.0.0.1:63342/browserConnection/buildInfo 400 (Bad Request)

    I’m on windows 8 the extension version is : 0.5.3 and the Chrome version : 24.0.1312.57 m

    Any idea ????

    • Vladimir Krivosheev says:

      February 8, 2013

      Colud you specify IDE (WebStorm, Idea) and version?

      • Thomas Pons says:

        February 8, 2013

        Webstorm 5.0

        • Vladimir Krivosheev says:

          February 8, 2013

          Webstorm 5.0 is not supported (please use bundled extension, see http://confluence.jetbrains.com/display/WI/How+to+install+Chrome+extension)

          Please try WebStorm 6 EAP — http://confluence.jetbrains.com/display/WI/WebStorm+6+EAP.

          • Thomas Pons says:

            February 8, 2013

            Wow it’s not support ! I’ve got the extension from the Chrome Store coz i don’t find the extension in my install folder !

          • Vladimir Krivosheev says:

            February 8, 2013

            Yes, is not supported, because it is developer for WebStorm 6+.

            5.0.4 contains /plugins/JavaScriptDebugger/extensions/jb.crx If you don’t want try WebStorm 6 EAP, just install old extension.