Boost your productivity with WebStorm

Featuring an intelligent editor with support for JavaScript, Node.js and many modern frameworks, advanced debugging, and all the tools you need for productive web development — all seamlessly integrated in a single development environment that works across all platforms — WebStorm simply helps you code better.

Intelligent coding assistance

WebStorm brings you smart coding assistance for JavaScript, Node.js, ECMAScript 6, TypeScript, CoffeeScript, and Dart. Enjoy code completion, powerful navigation features, on-the-fly error detection and refactorings for all of these languages.

Rely on the IDE to write and navigate around HTML, CSS and preprocessors like Less, Sass and Stylus.

On top of all that, benefit from advanced support for popular frameworks: AngularJS, React, Meteor, and more.

Code completion

WebStorm analyzes your project to provide the best code completion results for all methods, functions, modules, variables, and classes defined in your application. The same is also available for all language-specific built-in objects.

JavaScript code completion

In HTML code, have all tags auto-completed and use the full power of Emmet abbreviations to raise your productivity.

When working with CSS, enjoy code completion for properties and their values. In Less and Sass, get assistance for mixins.

SCSS code completion

WebStorm takes code completion for AngularJS apps to the next level as well. Get coding suggestions for default and custom directives, controller and app names, and code insights for data bindings.

AngularJS code completion

With WebStorm's powerful navigation features, get around your code efficiently and save time when working with large projects.

For any method, function or variable in your code, jump to its definition with a simple ⌘-ClickCtrl+Click, or search for its usages.

Go to definition

Search through the whole project for a symbol, file or class name, by using the Search everywhere dialog (⇧⇧Shift+Shift).

Search everywhere

Structure view can help you navigate through a currently opened file with ease.

Structure view for JavaScript file

Code quality analysis

WebStorm has hundreds of built-in inspections covering all the supported languages. All errors and warnings are reported right in the editor as you type, with many quick-fix options available.

JavaScript highlighted warning

Any line of code with a possible issue is marked in the right-hand editor gutter, so you can easily spot errors and warnings in a long file.

You can also run code quality analysis for the whole project and automatically apply selected quick-fixes.

Additional integrated code quality tools are also available, such as JSHint, ESLint, JSCS, JSLint, and Google Closure Linter, to report errors and warnings in the editor.

Code style

Use a consistent code style, by having WebStorm automatically apply the configured code style as you write code, or by reformatting whole files at once.

Configure your code style for any language, including indents, spaces, aligning rules, and so forth. Save the code style scheme in the project settings and, if you want, share it with your teammates via VCS.

Code style preferences

In addition, WebStorm automatically applies the code style specified in the .editorconfig project file.

Multiple carets and selections

WebStorm, too, has everyone's favorite multiple carets and selections. Edit several locations in your file at the same time, and even have code completion and live templates working for that. Select the locations to edit with ^ClickAlt+Click. Or, select the occurrences of the current word and edit them all at the same time.

Select the occurrences

Debugging, tracing and testing

WebStorm provides powerful built-in tools for debugging and tracing your client-side JavaScript code and Node.js applications. A full-featured debugger is perfectly integrated into the IDE, with zero configuration required.

Making JavaScript tracing simple as can be, spy-js gives you new insights into how your code works.

To make unit testing easier than ever, WebStorm integrates with the Karma test runner and Mocha, providing a simple UI and the ability to debug tests and quickly navigate through test results.

Debugging client-side JavaScript and Node.js

WebStorm provides an advanced debugger for your client-side code for Google Chrome. It's built right into the IDE, so you don't have to switch between the editor and browser for debugging.

The debugger has multiple views including Frames, Global and Local variables, and Watchers. Variable values are displayed inline, right next to their usages in the editor. You can easily evaluate JavaScript expressions in the runtime. The breakpoints support the suspend mode and conditions.

JavaScript debugger

Easily debug ECMAScript 6, TypeScript or CoffeeScript code, relying on WebStorm debugger's support for source maps.

The full-featured built-in debugger for Node.js works right out of the box as well. Use it debug apps running locally or on a remote machine.

Node.js debugger

Unit testing

Perform unit testing with ease, as WebStorm integrates with popular JavaScript testing frameworks.

Select Karma test runner for testing your client-side JavaScript code or Mocha for testing Node.js. Run and debug tests right inside the IDE, view results in a nice and visual format, and navigate to the test code. Code coverage reports are also available for Karma test runner.

Mocha test runner integration

WebStorm also supports JSTestDriver, Cucumber.js for behavior-driven development, and Nodeunit.

Tracing and profiling

spy-js is a built-in tool that helps you trace your code and efficiently identify any possible bottlenecks. It works both for client-side JavaScript and Node.js, and even supports compiled-to-JavaScript languages.

spy-js: JavaScript profiling tool

With spy-js, you can see the full list of events that triggered code execution, then dig into the stack trace for an event and explore the highlighted trace in the source code. These data are also used to power code completion results.

spy-js can also help you visualize the application structure. Use the spy-js diagram to see how project files are connected with function calls based on the runtime data.

WebStorm can help you capture and explore V8 CPU profiles and heap snapshots for Node.js applications. Easily identify any possible hot spots or memory leaks in your app as profiling data are presented in the most accessible way.

V8 CPU and memory profiling

Seamless tool integration

WebStorm integrates with popular command line tools for web development, providing you with a productive, streamlined development experience.

Always feel at a home with a single UI for: running tasks with Grunt and Gulp; integration with npm and Bower, JSHint, ESLint and JSCS code quality tools; Cordova integration that allows you to create new mobile apps and run them; and many other scenarios.

Grunt and Gulp

Enjoy the same UI for running Grunt and Gulp tasks. No need to use a command line to start your tasks.

All the tasks defined in your project gruntfile.js or gulpfile.js are now listed in the tool window, and you can run any task with a simple double click.

Gulp integration

You can also create a Run/Debug configuration for tasks, and then run or debug them with the familiar Run... or Debug... actions.

npm and Bower

Managing Node.js modules is easy with WebStorm. Right-click on package.json file to run the npm install command. Access the full list of installed local dependencies via Preferences, where you can install new npm modules and update existing modules.

With Bower integration, you can manage your project client-side dependencies in a similar fashion.

Code quality tools

In addition to hundreds of WebStorm's own inspections, in you can use linters like JSHint, ESLint or JSLint. As you type, WebStorm will run these against you code and highlight any issues on the fly, right in the editor.

Integration with code quality tools

To ensure compliance with the project code style (like indentation, spaces after keywords and so on), simply enable JSCS, a code style checker for JavaScript.

IDE features

WebStorm is built on top of the open-source IntelliJ Platform, which we at JetBrains have been developing and perfecting for over 15 years.

As such, WebStorm is tightly integrated with the leading version control systems. It offers the Local History feature, has a vibrant plugin ecosystem, is completely configurable, and has much, much more to offer.

VCS

WebStorm provides a unified UI for working with many popular Version Control Systems, ensuring a consistent user experience across git, SVN, Mercurial, and Perforce.

VCS integration: log view

Any uncommitted changes are highlighted in the editor's left gutter and in the Project view. You can easily roll-back any change in just two clicks.

A built-in visual merge tool resolves all conflicts in a quick and intuitive manner.

When working with GitHub, check-out your projects and make pull requests right in the IDE.

Local history

Whether you're using VCS or not, Local history can be a real code saver. WebStorm tracks any changes made in your source files, protecting you from any accidental losses or modifications, even if made by other applications. At any time you can inspect the history of either a particular file or directory and rollback to any of its previous versions.

Local history

Customization

The IDE is extremely customizable. Adjust it to perfectly suit your coding style, from shortcuts and visual themes to tool windows and editor layout.

WebStorm has light and dark appearances that you can choose from. The color schemes can be configured in Preferences per language, or you can find and use one of the popular themes available on the Internet.

Dark and light color schemes

Dozens of plugins are available in the IDE Plugin Repository for when you decide to enrich WebStorm with support for new frameworks, integrated tools, and additional productivity features.

Built-in terminal

To run a command or a command-line tool, don't leave the IDE'use WebStorm's built-in local Terminal, which you can set to the shell of your choice.