Features WebStorm

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)