What’s Cooking: Instant HTML/CSS Editing Preview

Posted on by Vladimir Krivosheev

Rapid feedback is one of most important productivity features. Especially when working with something actually visual – HTML or CSS. While we have discarded the idea of “built in preview” – mostly because in 80% cases it wasn’t true – long time ago, we are working on some power tools to aid you.

The first one, the Instant HTML editing plugin is released. It allows you to view your changes in an actual browser window instantly without a page refresh. Currently only Google Chrome is supported, but extensions for Firefox/Safari are coming soon.

Check out a screencast for a demo.

How does it work? It inspects all opened tabs in browser and if page is located at localhost (file:// or http://localhost/) tries to find edited element and update its contents or attributes. Page will still be reloaded if you edit head tag content or JS though. Be aware — CSS sync is not working if Web Inspector is opened (WI-11416).

Download and install via Settings|Plugins|Browse repository -> type in Instant
Share your experience via our forum
Please report bugs ONLY to our bugtracker (Subsystem – Plugin: Instant Preview)

Comments below can no longer be edited.

47 Responses to What’s Cooking: Instant HTML/CSS Editing Preview

  1. kiran aghor says:

    May 25, 2012

    Awesome feature. Thank you very much.

  2. Rob Juurlink says:

    May 25, 2012

    The idea is great, but unfortunately I can’t get it to work at the moment.

    First tried it with IntelliJ IDEA 11 (latest release). The plugin shows up in the Run menu, but nothing happens when clicked. Thereafter I Installed PHPStorm EAP. The notification balloon shows up and the Chrome plugin installes fine. When I start editing CSS or HTML, the yellow bar is shown in Chrome, but my changes are not live visible.

    Any solutions?

    • Vladimir Krivosheev says:

      May 25, 2012

      Please open issue with details:
      1) Url of editing page (only host and protocol)
      2) chrome://chrome/extensions/ -> Check “Developer mode” -> JetBrains Chrome Extension -> Inspect active views: _generated_background_page.html -> Console -> select all text and attach to issue.

  3. Nicole says:

    May 25, 2012

    Are you planning to support any other browser? Maybe Firefox in there?

    • Vladimir Krivosheev says:

      May 26, 2012

      Yes, extensions for Firefox/Safari are coming soon.

  4. Rafi B says:

    May 25, 2012

    Awesome plugin! Works better than LiveReload2 😉
    I don’t know how you did it, but even editing .mustache files instantly updates the HTML in Chrome… Hope Firefox plugin will come soon! 🙂

  5. UFUK says:

    May 25, 2012

    Killer feature but when adding styles or javascript codes, plugin is crashing.

  6. cordoval says:

    May 26, 2012

    i think more time should be spent on dev oriented features and not so much front end stuff.

    • Orillian says:

      May 28, 2012

      Frontend features “ARE” dev oriented. Dev doesn’t just mean the parts you can’t see! Frankly; as we move forward the visual aspects of web application development need to be considered more and more.

      I for one am excited about this, as it’ll significantly reduce the amount of time I spend refreshing the browser when cleaning up styles etc.

      O.

  7. Rob Edgar says:

    May 26, 2012

    Great idea!
    You mention only file:// or localhost:// url’s is there a plan to support a non local url, i.e the same url as already specified in the project when I right click and ‘open in a browser’?

    In my case I open WS for editing to a shared folder on a local net server, this is specified in the project so when I open the file in a browser it is the url of my local server not localhost.

    • Vladimir Krivosheev says:

      May 28, 2012

      “file:// or localhost://” restriction was added to prevent unwanted modification — your case will be supported in next version (1-2 days).

      • Bart McLeod says:

        September 20, 2012

        I was looking for the exact same feature. Is it available by now? In that case, you should update the article to reflect those new options (hosts other than localhost).

  8. Tom Pester says:

    May 28, 2012

    If this is done right it will stand out. Looking forward to see this go into production!

  9. teejay says:

    May 31, 2012

    I have an issue that it doesnt ask me to install the chrome extension. I installed the plugin now a couple of times but i dont have any success :(. Any ideas ? Can i download the extension from somewhere and install it manually ??

  10. Jürgen Hörmann says:

    May 31, 2012

    Can you please add to the allowed url scheme http://[project].local/
    This would enable us to get a generic solution for all development projects on a local computer as described here: http://akrabat.com/computing/automatic-apache-vhosts

    • Vladimir Krivosheev says:

      May 31, 2012

      Will be done in 0.2.5 (today).

      • Alex says:

        June 15, 2012

        .dev pattern should be supported too (if it isn’t) as it is commonly used as well
        Thank you for the great tool!

        • Vladimir Krivosheev says:

          June 15, 2012

          I think, *.dev is inspectable. Since 0.2.5 — if uri resolves to local net, so, it is inspectable (regardless domain name and domain zone).

  11. Denis Obydennykh says:

    June 20, 2012

    Unfortunately this great feature doesn’t work with another one great feature – CSS preprocessors.

    If I change sass file – css are changed immidiately, but IDE sync new css only on frame activation. Is there any way to solve the problem?

  12. sam says:

    July 9, 2012

    Just tried it on idea 12 eap with twitter bootstrap on mac, installed the plugin on idea, installed on chrome, can see the tab is being debugged by jetbrains chrome extension.

    No edits work, no changes I had made in idea is reflected on the tab being debugged

  13. Doster says:

    August 1, 2012

    Great work so far! But with the last version of Chrome the plugin just stoped working. I installed the last version but says that the plugin isn’t compatible (PhpStorm 4.0.3). Then I tried deleting the Chrome Extension, and when I wanted to install it again, Chrome says that extensions only can be installed from the Chrome Store since version 21. So, I have a lot of troubles as you can see. Someone there to save my day? 🙂

    • Vladimir Krivosheev says:

      August 2, 2012

      We will investigate it ASAP.

    • Vladimir Krivosheev says:

      August 2, 2012

      Thanks a lot. Well, this new security check can be easy avoided — just save extension (https://dl.dropbox.com/u/43511007/ic.png), open chrome://chrome/extensions/ and drag-n-drop it to.

      Note: when you delete extension — extension is blacklisted. So, “Update extensions now” (available if you check “Developer mode”) is not working.

      • Doster says:

        August 2, 2012

        Vladimir I just can’t thank you enough! Everything is back to normal. PhpStorm prompt a message to update the plugin, and I follow your instructions to bring the extension back. So, THANKS!

        But I notice that the plugin don’t work with ‘.html’ files —they just don’t reload when you make changes—. Anyway, I found a workaround and renamed my files to ‘.php’ and work just fine. Just for let you know.

        • Vladimir Krivosheev says:

          August 3, 2012

          Cannot reproduce. Chrome extension: 0.2.13, PhpStorm plugin: 0.2.14. Is it reproduced in any html file (simple small html)?

          • Doster says:

            August 3, 2012

            I tried to reproduce it again and find 3 things:
            1. If I create a new ‘.html’ file, the plugin works just fine.
            2. If I copy an existent ‘.php’ file and rename it to ‘.html’, the plugin don’t work at all with the markup but well with CSS. And as I said before, if a rename this file to ‘.php’ again the plugin updates the changes in the markup like it should.
            3. It’s a reeeally weird error.

            Chrome extension: 0.2.13.
            PhpStorm plugin: 0.2.14.
            PhpStorm version: 4.0.3.

          • Doster says:

            August 3, 2012

            Me again. I just realized that the problem is with existing files in my project, after I updated the plugin. If I create a new ‘.php’ file and then rename it to ‘.html’ the plugin works fine.

            I can’t think in a way to give you more information so you can reproduce it; but it’s probably a not so common bug. Let me know if I can help you in any way.

  14. Henning Kvinnesland says:

    August 7, 2012

    Hi!

    How does the plugin determine which javascript has been altered? Is there some sort of path-mapping?

  15. Web Developer Orlando says:

    August 24, 2012

    Have any idea about when the Firefox plugin will be ready? That would make the ultimate front-end development set-up.

  16. LiveEdit plugin features in detail | WebStorm & PhpStorm Blog says:

    August 28, 2012

    […] 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 […]

  17. Alex says:

    September 2, 2012

    Great work! Thanks.
    But I have some trouble and wishes for this plugin:
    1. The plugin don’t work with .html files. Just don’t reload page when I make changes. But all right if I make change in php files.
    2. I want make changes in files not localhost only. I want work on a local net server with specified uri such as http://test1.test etc.

  18. ItsLeeOwen says:

    September 4, 2012

    Does this work with IntelliJ? I’ve seen a WebStorm preview, but after downloading the LiveEdit.jar, and installing from disk, I do not see any indication of it being a success, and the plugin name is highlighted red in IntelliJ’s settings.

    • Vladimir Krivosheev says:

      September 5, 2012

      Yes. But you don’t need to install it from disk because you, seems, don’t know what version from plugin repository suitable for your version of IntelliJ Idea (plugin is available for 4 idea platforms (117/119/121/122), so, pay attention to since/until build fields).

      Best way — Settings|Plugins|Browse repository -> type in LiveEdit (in any case latest version of LiveEdit available only for Idea 12 EAP).

  19. John Marsden says:

    September 13, 2012

    Trialing Phpstorm 5.0.1 and I am having a really tough time installing the chrome plugin. I have reinstalled phpstorm 3 times now. I have tried to do a manual install of the plugin but every time I try to download the jb.crx file: http://localhost:63363/jb.crx
    I just get Oops! Google Chrome could not connect to localhost:63363 . I have Phpstorm running when i try to get the file and I even tried the other listed port and the same thing happens. This IDE looks so promising but at the moment I am not happy with it. Is there anything left to try or can you send me the crx file needed for a manual install.

    Regards

    • Binu says:

      September 13, 2012

      I too experience the same issue.
      PHPStorm 5 is running, and still I’m not able to access the URL.
      Also there is no alternate location provided from where I can download and install manually.

      I’m having XAMPP running, pls let me know if I have to shut it down.

      Thanks

  20. rootandy says:

    July 10, 2017

    Hey, its almost 5 yearas later – and for now i do not see any firefox plugin. The JavaScript Debugging works with the Developer Tools – but not Live Reload. That is pretty sad.
    Have you any plans?

    • Ekaterina Prigara says:

      July 10, 2017

      Sorry, we don’t plan to support Live Edit with Firefox.