What’s Cooking: Instant HTML/CSS Editing Preview

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)

Subscribe to WebStorm Blog updates

Subscribe form

By submitting this form, I agree to the JetBrains Privacy Policy Notification icon

By submitting this form, I agree that JetBrains s.r.o. ("JetBrains") may use my name, email address, and location data to send me newsletters, including commercial communications, and to process my personal data for this purpose. I agree that JetBrains may process said data using third-party services for this purpose in accordance with the JetBrains Privacy Policy. I understand that I can revoke this consent at any time in my profile. In addition, an unsubscribe link is included in each email.

Submit

Thanks, we've got you!