Instant HTML/CSS Updating

Want instant updating to HTML / CSS pages you’re editing?

See it in action

You can now have it. I’ve tried it on both IntelliJ IDEA and WebStorm successfully. It should most likely work on our other IDE’s too (PhpStorm, PyCharm).

To install:

1. Download Web Browser Connector plugin for JetBrains plugin repo. This is needed for the actual Instant HTML editing plugin.

2. Download Instant HTML editing plugin.

3. Open up WebStorm (or IDEA) and click on Preferences. Search for ‘plugin’

4. Install the plugins previously downloaded from disk. First install the Web Browser Connector*

5. Restart WebStorm (or IntelliJ)

6. Open up your Web Project. Under the Run menu select Instant HTML editing

7. Launch Chrome**. If all has gone well you should now see this below the URL bar

As you make changes (to both HTML and CSS) you should now be able to see them updating live in Chrome.

It’s still early days of the plugin so there might be quirks with it, but I’m sure Vladmir will appreciate any and all feedback.

* You could in principle just install this directly from WebStorm by clicking on Browse Repositories without having to download. However for some reason, Web Browser Connector is not listed.

** Currently only works in Chrome.

4 thoughts on “Instant HTML/CSS Updating

  1. fernandozamoraj

    Thanks for the post. I finally got it working after some finaggling with it. Instead of preferences I used settings – don’t know if this is an error or just different on PHP Storm. Also the second plugin was downloading with a .htm file extension.
    It all seems to be fine now. I will give a go.

    Reply
  2. Pingback: In the News: 2012-05-15 | Klaus' Korner

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s