# Live Edit in HTML, CSS, and JavaScript
> **TL;DR**
> Required plugins:
>
>
>
> `JavaScript and TypeScript` - the plugin is bundled with IntelliJ IDEA and enabled by default.
>
>
>
> `JavaScript Debugger`, `Live Edit` - install the plugins on the Settings | Plugins page, tab Marketplace. The plugins are available only in IntelliJ IDEA with the Ultimate subscription.
> **Note:**
> * Live Edit is available only during a debugging session. For more information, refer to [Debug JavaScript in Chrome](debugging-javascript-in-chrome.html).
>
> * Debugging of JavaScript code is only supported in [Google Chrome](http://www.google.com/chrome/) and in other [Chromium-based browsers](https://www.chromium.org/).
With the Live Edit functionality, the changes you make to your HTML, CSS, or JavaScript code are immediately shown in the browser without reloading the page.
Live Edit works for other file types that contain or generate HTML, CSS, or JavaScript. You can also use Live Edit when [debugging a Node.js application](running-and-debugging-node-js.html). For more information, refer to [Live Edit in Node.js application](live-editing-in-node-js-applications.html).
By default, Live Edit is enabled only for HTML and CSS files.
## Before you start
Procedure:
1. Make sure the JavaScript and TypeScript bundled plugin is enabled in the settings. Press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Plugins`. Click the Installed tab. In the search field, type JavaScript and TypeScript. For more information about plugins, refer to [Managing plugins](managing-plugins.html).
2. Install the JavaScript Debugger and Live Edit plugins on the Settings | Plugins page, tab Marketplace, as described in [Installing plugins from
JetBrains Marketplace](managing-plugins.html#install_plugin_from_repo). The plugins are available only in IntelliJ IDEA with the Ultimate subscription.
3. Configure the built-in debugger as described in [Configuring JavaScript debugger](configuring-javascript-debugger.html).
To have the changes you make to your HTML, CSS, or JavaScript code immediately shown in the browser without reloading the page, activate the Live Edit functionality.
## Activate and configure Live Edit in JavaScript
Procedure:
1. In the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Build, Execution, Deployment | Debugger | Live Edit`.
2. On the Live Edit page that opens, select the Update application in Chrome on changes in checkbox.
3. By default, IntelliJ IDEA shows on-the-fly preview only for HTML and CSS code. To enable Live Edit in JavaScript, select the JavaScript, HTML and CSS option.
4. Specify the time-delay between changing the code in the editor and showing this change in the browser: accept the default value `300 ms` or specify a custom value using the spin box next to the corresponding field.
5. To enable reloading of JavaScript files that are executed by Node.js, select the Update Node.js application on change checkbox. Use the spin box to specify the elapsed time for upload, the default value is 300.
6. To enable Live Edit in code that can be compiled into JavaScript, HTML, or CSS, for example, in TypeScript, Pug, or SCSS, select the Track changes in files compiled to JavaScript, HTML or CSS checkbox.
All the changes made in such files are automatically saved to trigger compilation and then appear in the browser.
Note that a changed file is [saved shortly after the update](saving-and-reverting-changes.html), contrary to regular autosave triggered by closing a file, a project, or IntelliJ IDEA, or by other events.
7. Select the Restart if hotswap fails checkbox to allow IntelliJ IDEA to reload the page automatically if the changes couldn't be applied without that.
8. To configure highlighting, go to `Advanced Settings` and select the Highlight current element in browser on caret change checkbox in the Debugger area. Otherwise, during a debugging session, you will have to hold `Shift` (Windows), `Shift` (macOS), `Shift` (IntelliJ IDEA Classic (macOS)), `Shift` (macOS System Shortcuts), `Shift` (XWin), `Shift` (GNOME), `Shift` (KDE), `Shift` (Emacs), `Shift` (Sublime Text), `Shift` (Sublime Text (macOS)), `Shift` (NetBeans), `Shift` (Visual Studio), `Shift` (Visual Studio (macOS)), `Shift` (Eclipse), `Shift` (Eclipse (macOS)) and hover over the element in the editor to highlight it in the browser.
## Use Live Edit
Procedure:
1. [Start a debugging session](debugging-javascript-in-chrome.html#debugging_js_on_built_in_server_procedure).
2. Update your HTML, CSS, or JavaScript code as necessary. The changes are reflected in the browser immediately without reloading the page.
## See also
### Procedures
[Debug JavaScript in Chrome](debugging-javascript-in-chrome.html) [View actual HTML DOM](viewing-actual-html-dom.html) [HTML](editing-html-files.html)