Get Started With WebStorm

Follow these steps to get more from the IDE and start feeling right at home.


01

Learn the basics with an onboarding tour

Complete the playground project to get a walkthrough of some key features available in WebStorm: go to New Project | New Project and check the Generate a playground project with onboarding tips box.

Learn the basics with an onboarding tour

Complete the playground project to get a walkthrough of some key features available in WebStorm: go to New Project | New Project and check the Generate a playground project with onboarding tips box.


02

Open or create your first project

Now that you’ve learned the basics, you can go ahead and create your first project or open an existing one.

Open or create your first project

Now that you’ve learned the basics, you can go ahead and create your first project or open an existing one.


03

Read the migration guides

Need to replicate some settings from your previous code editor or IDE and customize WebStorm? Read our migration guides to get some help.

Read the migration guides

Need to replicate some settings from your previous code editor or IDE and customize WebStorm? Read our migration guides to get some help.

Read the guides

Getting started

Getting started

Want to get started with WebStorm, the JetBrains IDE for JavaScript and TypeScript, in just 5 minutes?

Watch the video to learn everything you need – from setting up your first project to navigating the IDE and using productivity features like Search Everywhere and built-in terminal support. Whether you’re starting a new project or working with existing code, WebStorm makes it easy.

⭐️ Our resources ⭐️
Website: https://www.jetbrains.com/webstorm/
Product news and tutorials: https://blog.jetbrains.com/webstorm/
WebStorm on X: https://x.com/WebStormIDE

0:00 - Intro
0:37 - Starting a Project
1:02 - Navigating the IDE
2:04 - The Toolbar
2:54 - Search Everywhere
3:08 - Bottom UI Elements
3:33 - Time to Code!
4:30 - Installing Plugins
4:53 - Conclusion
05:12
Getting Started with WebStorm: Installation and First Project Setup
25.10.2024
Ready to make #WebStorm your own? 🚀 

In this video, we’ll show you how to customize your IDE with themes, plugins, editor settings, and shortcuts! It's perfect for #JavaScript and #TypeScript developers looking to get the most out of their IDE.

⭐️ Our resources ⭐️
Website: https://www.jetbrains.com/webstorm/
Product news and tutorials: https://blog.jetbrains.com/webstorm/
WebStorm on X: https://x.com/WebStormIDE

0:00 - Intro
0:36 - Themes
1:24 - Plugins
2:22 - Hidden Options in the Editor
4:06 - Shortcuts
4:44 - Other Setting Options
5:38 - Conclusion
06:02
Customizing WebStorm: Best Themes, Plugins, and Settings
24.10.2024
Learn how to master #WebStorm in just 5 minutes!

Discover essential shortcuts and productivity tips. From quick navigation and efficient code editing to powerful refactoring tools and productivity boosters, this video has everything you need to code faster and smarter.

#JavaScript #TypeScript 

⭐️ Our resources ⭐️
Website: https://www.jetbrains.com/webstorm/
Product news and tutorials: https://blog.jetbrains.com/webstorm/
WebStorm on X: https://x.com/WebStormIDE

0:00 - Intro
0:18 - Navigation
0:25 - Search Everywhere
0:49 - Find in Files
1:01 - Recent Files
1:13 - Go to Definition
1:28 - Code Editing
1:36 - Show Context Actions
2:13 - Quick Documentation
2:23 - Line Actions
2:36 - Code Completion
2:53 - Postfix Completion & Live Templates
3:07 - Refactoring
3:40 - Productivity Boosters
3:52 - Tool Windows
4:02 - Git
4:18 - Zen Mode
4:32 - Final Tips
4:42 - Key Promoter X
4:57 - Conclusion
05:36
Mastering WebStorm Shortcuts and Productivity Tips
28.10.2024
Git doesn’t have to be scary 🧟 

Learn how WebStorm simplifies version control with features like cloning repos, managing branches, resolving conflicts, and even writing commit messages for you. Say goodbye to Git stress and hello to seamless workflows!

#javascript #typescript 

⭐️ Our resources ⭐️
Website: https://www.jetbrains.com/webstorm/
Product news and tutorials: https://blog.jetbrains.com/webstorm/
WebStorm on X: https://x.com/WebStormIDE

0:00 - Intro
0:20 - Cloning a Repository
0:37 - Initialize Git 
1:41 - Update Your Project
1:59 - Create Branch
2:32 - Commit
3:20 - Merge
3:39 - Diff
3:56 - Merge Conflict
4:38 - Git Blame
5:01 - Git Log Tool Window
06:04
Working with Git in WebStorm
07.01.2025
🎉 WebStorm 2024.3 is here! Watch this quick video to learn about three key enhancements in the latest release:
- Improved framework component navigation and renaming.
- Integrated SQL database tools. 
- Improved AI-based code completion.

📚 Want the full list of new features in WebStorm 2024.3? Check out our blog post: https://blog.jetbrains.com/webstorm/2024/11/webstorm-2024-3/

⭐️ Our Resources ⭐️
Download WebStorm 2024.3: https://www.jetbrains.com/webstorm/whatsnew/
Product news and tutorials: https://blog.jetbrains.com/webstorm/
WebStorm on X: https://x.com/WebStormIDE
02:01
WebStorm 2024.3 Explained: 3 New Features You Can't Afford to Miss!
12.11.2024
WebStorm 2024.2, our second major release of the year, is here! Watch this quick video to see the top 3 highlights: special path resolving, initial debugging support for Bun, and the ability to run TypeScript files directly within the IDE.

📚 Want to learn about all the features in WebStorm 2024.2? Check out this blog post: https://blog.jetbrains.com/webstorm/2024/08/webstorm-2024-2/

#JavaScript #TypeScript 

Timestamps:
0:00​ - Intro
0:28 - Special Path Resolving
0:58 - Initial Bun Debugging Support
1:37 - Ability to Run TypeScript Files Directly
2:01 - Conclusion

⭐️ Our Resources ⭐️
Download WebStorm 2024.2: https://www.jetbrains.com/webstorm/whatsnew/
Product news and tutorials: https://blog.jetbrains.com/webstorm/
WebStorm on X: https://x.com/WebStormIDE
02:20
WebStorm 2024.2 Explained: 3 New Features You Can't Afford to Miss!
12.08.2024
WebStorm 2024.1, our first major release of the year, has landed with a ton of improvements! If you only have a few minutes to explore the highlights, check out this video featuring a quick overview of the top 3 updates: sticky lines, quick documentation popup improvements, and full line code completion. More information about full line code completion can be found at https://jb.gg/087hop

📚 To learn about all the new features, take a look at this blog post: https://jb.gg/iflxd2

#javascript  #typescript 

Timestamps:
0:00​ - Intro
0:25 - Sticky Lines
0:49 - Quick Documentation Improvements
1:31 - Full Line Code Completion
2:10 - Conclusion

⭐️ Our resources ⭐️
Full Line Code Completion: https://www.youtube.com/watch?v=DLBiJ5kYUFg
Download WebStorm 2024.1:  https://www.jetbrains.com/webstorm/whatsnew/
Product news and tutorials: https://blog.jetbrains.com/webstorm/
WebStorm on Twitter: https://twitter.com/WebStormIDE
02:36
WebStorm 2024.1 Explained: 3 New Features You Can't Afford to Miss!
04.04.2024
Developers write code, run code, and when they hit problems, they debug code. Or do they? WebStorm’s debugger is powerful, but it’s also easy and friendly. We want to help more people use it instead of console logging.

In this livestream, Carson Gross from HTMX joins as Paul Everitt shows the debugger, how to use it, and some JavaScript debugging tips that you probably didn’t know about.

Prefer a written version? Check out this blog post by Paul: https://www.jetbrains.com/guide/javascript/articles/debugging-livestream/

#debugging #debug #debuggingtips #javascript #webstorm #jetbrains
01:10:28
Debug Like a Pro: JavaScript Edition
05.03.2024