Page tree

Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.

This tutorial describes configuration and workflow with Live Edit feature in WebStorm.

Table of Contents

What is Live Edit?

Live Edit gives you an opportunity to see all the changes you make in your HTML and CSS files instantly in a browser without refreshing the page. Just install the extension for Google Chrome and, as you edit HTML, CSS or JavaScript in WebStorm, Live Edit will push your changes to the browser without reloading the page and highlight the elements you are working on. Completion lookup is also live.


Watch on YouTube

Live Edit also supports SASS, LESS, CoffeeScript, TypeScript, etc. (a configured file watcher is needed). CSS and JavaScript (including any other language that can be transpiled to CSS or JavaScript) will be hot-swapped without a page refresh. Hot-swapped JavaScript will be effective only if it used in cycle or event-driven.


From now on, any changes you perform will be instantly shown in Google Chrome browser without a page reload. For example, you can edit text, manipulate colors to find one that suits you best, etc. Any CSS/JavaScript used by the file you are debugging will be instantly updated as well.



First of all, check that all actions listed under Installing Google Chrome extension and Starting JavaScript debug session sections of this tutorial have been performed.