What’s cooking: Instant HTML/CSS editing preview

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 it works? 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)

This blog is permanently closed.

For up-to-date information please follow to corresponding WebStorm blog or PhpStorm blog.

 
This entry was posted in Cool Feature, PhpStorm, WebStorm and tagged , , , , , . Bookmark the permalink.

45 Responses to What’s cooking: Instant HTML/CSS editing preview

  1. kiran aghor says:

    Awesome feature. Thank you very much.

  2. Rob Juurlink says:

    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?

  3. Nicole says:

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

  4. Rafi B says:

    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:

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

  6. cordoval says:

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

    • Orillian says:

      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:

    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.

  8. Tom Pester says:

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

  9. teejay says:

    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:

    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:

      Will be done in 0.2.5 (today).

      • Alex says:

        .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:

          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. 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:

    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:

    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:

      We will investigate it ASAP.

    • Vladimir Krivosheev says:

      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:

        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:

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

          • Doster says:

            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:

            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. Hi!

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

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

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

  17. Alex says:

    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:

    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:

      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:

    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

Comments are closed.