This page will give you an overview of the essential features available in WebStorm, an integrated development environment for JavaScript and related technologies. To dive deeper, check out our Learn page and documentation.
Looking for a tool you can trust for even the trickiest parts of your JavaScript development? That’s what WebStorm is for. It is built on an open-source IntelliJ Platform developed by JetBrains and is packed with many refinements that make coding a more enjoyable and productive experience.
WebStorm comes with out-of-the-box support for JavaScript, TypeScript, React, React Native, Electron, Vue, Angular, Node.js, HTML, style sheets, and many other technologies. What is in it for you? You can get straight to coding, without thinking about installing or maintaining any plugins.
Want to add some other features on top of what is built in? Visit our plugin marketplace with over 2,500 options to choose from.
Whether you are a frontend developer or a full-stack developer who occasionally works on UIs, WebStorm will help you stay focused on the technology stack that matters most at the moment. You will get all the tools to develop high-quality applications with JavaScript.
Prefer using one tool for many languages? Try our other IDEs – they include WebStorm features, either out of the box or via free plugins.
WebStorm deeply understands your project structure and can assist you with every aspect of writing code. It will autocomplete your code, detect and suggest fixes for errors and redundancies, and help you refactor code safely.
Code faster with the relevant keywords and symbols shown as you type. All suggestions are context and type-aware and work across different languages – e.g. class names from CSS will be completed in your .js files. For JavaScript and TypeScript, they are sorted with the help of machine-learning algorithms.
You can use postfix completion, live templates, and Emmet to increase your coding speed even more.
WebStorm makes it easy to detect errors and typos in your code. It includes hundreds of inspections for all supported languages and a spelling and grammar checker. It also integrates with Stylelint, ESLint, and other linters. WebStorm will run them against your code as you type and highlight any issues right in the editor.
All errors and warnings are reported in the editor as you type, with many quick-fix options available.
Let WebStorm help you with what it is best at – refactoring code safely across the entire codebase. You can rename files, folders, and symbols as well as extract components, methods, or variables without worrying about breaking anything – WebStorm will tell you about any potential problems.
Want to look up the documentation for a symbol? There’s no need to leave your IDE! Just hover over that symbol or place the caret on it and press Ctrl+Q to see a wealth of relevant information. Additionally, WebStorm can show you parameter hints in calls of methods and functions.
You can preview static HTML files right in WebStorm. The changes you make to an HTML file or the linked CSS and JavaScript files will be saved, with the preview reloaded automatically so you can see the changes.
WebStorm is built with developers’ productivity in mind, so there is a lot more to help you code faster. Multiple carets, line editing actions, and automatic code reformatting – these are just a few things for you to try.
Minimize context switching with all of your essential developer tools available right in WebStorm.
Run and debug your client-side and Node.js applications right where you edit the code. Put breakpoints, step through the program, set watches, and more – all with the unified experience across different kinds of applications, from vanilla JavaScript to TypeScript and Vue projects.
Write, run, and debug your unit tests using Jest, Mocha, Karma, Protractor, and Cucumber.js. Review the test results in a tree view and navigate to the test source from there. For Jest, Karma, and Mocha you can also see a code coverage report right in WebStorm.
Worried about breaking something during a complex operation with Git or another VCS? You can compare branches, review and merge conflicts, and more using WebStorm’s UI to support your daily workflows. You can also manage projects hosted on GitHub directly from the IDE.
What if you forget to commit a change to version control or accidentally delete a bunch of files? WebStorm has a solution: a built-in Local History. It tracks all changes made to your project files and lets you roll them back, even if you are not using version control for your project yet.
Test your web services using the HTTP client integrated in WebStorm. You can create, edit, and run HTTP requests right in the editor.
Prefer using the command line for some tasks? You can use an embedded terminal to work with a shell of your choice without leaving the IDE.
Task runners, npm, and many other tools are also supported. You can also use Projector to run your IDE on a server and code remotely from a laptop or tablet.
Save time getting around in your codebase, project files, and IDE settings.
Don’t know where to start? The Search Everywhere popup will help you find almost anything in WebStorm. Use it to look for IDE actions, files, classes, or symbols, and see all the matches in one place.
WebStorm can quickly take you to a symbol declaration and show you its usages across the entire project. It also makes it easy to view the definition of a symbol without jumping to its declaration, and much more.
Look through all project files or jump only between your recent files or modified parts of code – WebStorm will remember what you worked with and get you back there quickly. Use tabs for navigation, or turn them off and rely on shortcuts instead.
With WebStorm, you can find and replace text strings both within specific files and entire projects. You can narrow the search down to a selected code fragment in a file or using various project scopes and filters.
Facilitate efficient teamwork with collaborative development features, advanced version control integration, and many other features – all reinforced by the unified development experience across the team.
WebStorm includes Code With Me, our service for remote collaborative development and pair programming. You can use it to code together with others in real time and talk to your teammates right from the IDE.
Create and merge GitHub pull requests as well as review code – all without leaving the IDE. Integrate with JetBrains Space to view and clone repositories from there, and do code reviews.
Apply a consistent code style across the team and share your code style settings using the IDE-specific configuration, Prettier, or EditorConfig. You can share some other project settings, like your run configurations, with others, too.
Connect WebStorm to your issue tracker and work on tasks assigned to you directly from the IDE. Track the amount of time you spend on a task working in the editor to understand how long it takes to complete it.
Set up everything the way you like it with UI themes, customizable shortcuts, and plugins.
WebStorm comes with a few predefined themes, but there are a variety of custom options to choose from. You can also toggle the visibility of many UI elements and change their position, or even switch to Zen mode to focus on your code.
To help you stay productive, WebStorm has shortcuts for almost every action. You can use predefined keyboard layouts or create your own. You can also install keymaps for other editors, including Vim, VS Code, and Sublime Text.
Extend the core functionality of your IDE and add more customization options on top of what is already available. Visit our plugin marketplace to get started.
Want to work with database tools and SQL inside WebStorm? Although there is no out-of-the-box support for them, there are several ways to add it.
WebStorm has many accessibility features to accommodate your needs. You can configure colors for different UI elements, resize tool windows and text size in the editor, adjust colors for red-green color vision deficiency, customize shortcuts, and more. Screen readers are also supported.
Need to modify a file quickly? Use LightEdit mode without creating or loading the entire project. The file will show up in a text-like editor, with some basic features like syntax highlighting or autosave available for use. Then switch back to your entire project when ready, in a couple of clicks.