1---
2title: How to Migrate from WebStorm to Zed
3description: "Guide for migrating from WebStorm to Zed, including settings and keybindings."
4---
5
6# How to Migrate from WebStorm to Zed
7
8This guide covers how to set up Zed if you're coming from WebStorm, including keybindings, settings, and the differences you should expect as a JavaScript/TypeScript developer.
9
10## Install Zed
11
12Zed is available on macOS, Windows, and Linux.
13
14For macOS, you can download it from zed.dev/download, or install via Homebrew:
15
16```sh
17brew install --cask zed
18```
19
20For Windows, download the installer from zed.dev/download, or install via winget:
21
22```sh
23winget install Zed.Zed
24```
25
26For most Linux users, the easiest way to install Zed is through our installation script:
27
28```sh
29curl -f https://zed.dev/install.sh | sh
30```
31
32After installation, you can launch Zed from your Applications folder (macOS), Start menu (Windows), or directly from the terminal using:
33`zed .`
34This opens the current directory in Zed.
35
36## Set Up the JetBrains Keymap
37
38If you're coming from WebStorm, the fastest way to feel at home is to use the JetBrains keymap. During onboarding, you can select it as your base keymap. If you missed that step, you can change it anytime:
39
401. Open Settings with {#kb zed::OpenSettings}
412. Search for `Base Keymap`
423. Select `JetBrains`
43
44This maps familiar shortcuts like {#kb:jetbrains project_symbols::Toggle} for Go to Class and {#kb:jetbrains command_palette::Toggle} for Find Action.
45
46## Set Up Editor Preferences
47
48You can configure most settings in the Settings Editor ({#kb zed::OpenSettings}). For advanced settings, run `zed: open settings file` from the Command Palette to edit your settings file directly.
49
50Settings WebStorm users typically configure first:
51
52| Zed Setting | What it does |
53| ----------------------- | ------------------------------------------------------------------------------- |
54| `format_on_save` | Auto-format when saving. Set to `"on"` to enable. |
55| `soft_wrap` | Wrap long lines. Options: `"none"`, `"editor_width"`, `"preferred_line_length"` |
56| `preferred_line_length` | Column width for wrapping and rulers. Default is 80. |
57| `inlay_hints` | Show parameter names and type hints inline, like WebStorm's hints. |
58| `relative_line_numbers` | Useful if you're coming from IdeaVim. |
59
60Zed also supports per-project settings. Create a `.zed/settings.json` file in your project root to override global settings for that project, similar to how you might use `.idea` folders in WebStorm.
61
62> **Tip:** If you're joining an existing project, check `format_on_save` before making your first commit. Otherwise you might accidentally reformat an entire file when you only meant to change one line.
63
64## Open or Create a Project
65
66After setup, use {#kb:jetbrains file_finder::Toggle} to open a folder. This becomes your workspace in Zed. Unlike WebStorm, there's no project configuration wizard, no framework selection dialog, and no project structure setup required.
67
68To start a new project, create a directory using your terminal or file manager, then open it in Zed. The editor will treat that folder as the root of your project. For new projects, you'd typically run `npm init`, `pnpm create`, or your framework's CLI tool first, then open the resulting folder in Zed.
69
70You can also launch Zed from the terminal inside any folder with:
71`zed .`
72
73Once inside a project:
74
75- Use {#kb:jetbrains file_finder::Toggle} to jump between files quickly (like WebStorm's "Recent Files")
76- Use {#kb:jetbrains command_palette::Toggle} to open the Command Palette (like WebStorm's "Search Everywhere")
77- Use {#kb:jetbrains project_symbols::Toggle} to search for symbols (like WebStorm's "Go to Symbol")
78
79Open buffers appear as tabs across the top. The Project Panel shows your file tree and Git status. Toggle it with {#kb:jetbrains project_panel::ToggleFocus} (just like WebStorm's Project tool window).
80
81## Differences in Keybindings
82
83If you chose the JetBrains keymap during onboarding, most of your shortcuts should already feel familiar. Here's a quick reference of common actions and their keybindings with the JetBrains keymap active.
84
85### Common Keybindings
86
87| Action | Zed Keybinding |
88| ---------------------- | ----------------------------------------------- |
89| Command Palette | {#kb:jetbrains command_palette::Toggle} |
90| Go to File | {#kb:jetbrains file_finder::Toggle} |
91| Go to Symbol | {#kb:jetbrains project_symbols::Toggle} |
92| File Outline | {#kb:jetbrains outline::Toggle} |
93| Go to Definition | {#kb:jetbrains editor::GoToDefinition} |
94| Find Usages | {#kb:jetbrains editor::FindAllReferences} |
95| Rename Symbol | {#kb:jetbrains editor::Rename} |
96| Reformat Code | {#kb:jetbrains editor::Format} |
97| Toggle Project Panel | {#kb:jetbrains project_panel::ToggleFocus} |
98| Toggle Terminal | {#kb:jetbrains terminal_panel::Toggle} |
99| Duplicate Line | {#kb:jetbrains editor::DuplicateSelection} |
100| Delete Line | {#kb:jetbrains editor::DeleteLine} |
101| Move Line Up | {#kb:jetbrains editor::MoveLineUp} |
102| Move Line Down | {#kb:jetbrains editor::MoveLineDown} |
103| Expand Selection | {#kb:jetbrains editor::SelectLargerSyntaxNode} |
104| Shrink Selection | {#kb:jetbrains editor::SelectSmallerSyntaxNode} |
105| Comment Line | {#kb:jetbrains editor::ToggleComments} |
106| Go Back | {#kb:jetbrains pane::GoBack} |
107| Go Forward | {#kb:jetbrains pane::GoForward} |
108| Toggle Breakpoint | {#kb:jetbrains editor::ToggleBreakpoint} |
109| Navigate to Next Error | {#kb:jetbrains editor::GoToDiagnostic} |
110
111### Unique to Zed
112
113| Action | Keybinding | Notes |
114| ----------------- | -------------------------------- | ------------------------------------------------------------- |
115| Toggle Right Dock | {#kb workspace::ToggleRightDock} | Assistant panel, notifications |
116| Split Pane Right | {#kb pane::SplitRight} | Use other arrow keys to create splits in different directions |
117
118### How to Customize Keybindings
119
120- Open the Command Palette ({#kb:jetbrains command_palette::Toggle})
121- Run `zed: open keymap`
122
123This opens a list of all available bindings. You can override individual shortcuts or remove conflicts.
124
125Zed also supports key sequences (multi-key shortcuts).
126
127## Differences in User Interfaces
128
129### No Indexing
130
131If you've used WebStorm on large projects, you know the wait. Opening a project with many dependencies can mean watching "Indexing..." for anywhere from 30 seconds to several minutes. WebStorm indexes your entire codebase and `node_modules` to power its code intelligence, and re-indexes when dependencies change.
132
133Zed doesn't index. You open a folder and start coding immediately—no progress bars, no "Indexing paused" banners. File search and navigation stay fast regardless of project size or how many `node_modules` dependencies you have.
134
135WebStorm's index enables features like finding all usages across your entire codebase, tracking import hierarchies, and flagging unused exports project-wide. Zed relies on language servers for this analysis, which may not cover as much ground.
136
137**How to adapt:**
138
139- Search symbols across the project with {#kb:jetbrains project_symbols::Toggle} (powered by the TypeScript language server)
140- Find files by name with {#kb:jetbrains file_finder::Toggle}
141- Use {#kb pane::DeploySearch} for text search—it stays fast even in large monorepos
142- Run `tsc --noEmit` or `eslint .` from the terminal when you need deeper project-wide analysis
143
144### LSP vs. Native Language Intelligence
145
146WebStorm has its own JavaScript and TypeScript analysis engine built by JetBrains. This engine understands your code deeply: it resolves types, tracks data flow, knows about framework-specific patterns, and offers specialized refactorings.
147
148Zed uses the Language Server Protocol (LSP) for code intelligence. For JavaScript and TypeScript, Zed supports:
149
150- **vtsls** (default) — Fast TypeScript language server with excellent performance
151- **typescript-language-server** — The standard TypeScript LSP implementation
152- **ESLint** — Linting integration
153- **Prettier** — Code formatting (built-in)
154
155The TypeScript LSP experience is well-supported. You get accurate completions, type checking, go-to-definition, and find-references. The experience is comparable to VS Code, which uses the same underlying TypeScript services.
156
157Where you might notice differences:
158
159- Framework-specific intelligence (Angular templates, Vue SFCs) may be less integrated
160- Some complex refactorings (extract component with proper imports) may be less sophisticated
161- Auto-import suggestions depend on what the language server knows about your project
162
163**How to adapt:**
164
165- Use {#kb:jetbrains editor::ToggleCodeActions} for available code actions—the list will vary by language server
166- Ensure your `tsconfig.json` is properly configured so the language server understands your project structure
167- Use Prettier for consistent formatting (it's enabled by default for JS/TS)
168- For code inspection similar to WebStorm's "Inspect Code," check the Diagnostics panel ({#kb:jetbrains diagnostics::Deploy})—ESLint and TypeScript together catch many of the same issues
169
170### No Project Model
171
172WebStorm manages projects through `.idea` folders containing XML configuration files, framework detection, and run configurations. This model lets WebStorm remember your project settings, manage npm scripts through the UI, and persist run/debug setups.
173
174Zed takes a different approach: a project is just a folder. There's no setup wizard, no framework detection dialog, no project structure to configure.
175
176What this means in practice:
177
178- Run configurations aren't a thing. Define reusable commands in `tasks.json` instead. Note that your existing `.idea/` configurations won't carry over—you'll set up the ones you need fresh.
179- npm scripts live in the terminal. Run `npm run dev`, `pnpm build`, or `yarn test` directly—there's no dedicated npm panel.
180- No framework detection. Zed treats React, Angular, Vue, and vanilla JS/TS the same way.
181
182**How to adapt:**
183
184- Create a `.zed/settings.json` in your project root for project-specific settings
185- Define common commands in `tasks.json` (open via Command Palette: `zed: open tasks`):
186
187```json
188[
189 {
190 "label": "dev",
191 "command": "npm run dev"
192 },
193 {
194 "label": "build",
195 "command": "npm run build"
196 },
197 {
198 "label": "test",
199 "command": "npm test"
200 },
201 {
202 "label": "test current file",
203 "command": "npm test -- $ZED_FILE"
204 }
205]
206```
207
208- Use {#kb:jetbrains task::Spawn} to run tasks quickly
209- Lean on your terminal ({#kb:jetbrains terminal_panel::Toggle}) for anything tasks don't cover
210
211### No Framework Integration
212
213WebStorm's value for web development comes largely from its framework integration. React components get special treatment. Angular has dedicated tooling. Vue single-file components are fully understood. The npm tool window shows all your scripts.
214
215Zed has none of this built-in. The TypeScript language server sees your code as TypeScript—it doesn't understand that a function is a React component or that a file is an Angular service.
216
217**How to adapt:**
218
219- Use grep and file search liberally. {#kb pane::DeploySearch} with a regex can find component definitions, route configurations, or API endpoints.
220- Rely on your language server's "find references" ({#kb:jetbrains editor::FindAllReferences}) for navigation—it works, just without framework context
221- Consider using framework-specific CLI tools (`ng`, `next`, `vite`) from Zed's terminal
222- For React, JSX/TSX syntax and TypeScript types still provide good intelligence
223
224> **Tip:** For projects with complex configurations, keep your framework's documentation handy. Zed's speed comes with less hand-holding for framework-specific features.
225
226### Tool Windows vs. Docks
227
228WebStorm organizes auxiliary views into numbered tool windows. Zed uses a similar concept called "docks":
229
230| WebStorm Tool Window | Zed Equivalent | Zed Keybinding |
231| -------------------- | -------------- | ------------------------------------------ |
232| Project | Project Panel | {#kb:jetbrains project_panel::ToggleFocus} |
233| Git | Git Panel | {#kb:jetbrains git_panel::ToggleFocus} |
234| Terminal | Terminal Panel | {#kb:jetbrains terminal_panel::Toggle} |
235| Structure | Outline Panel | {#kb:jetbrains outline_panel::ToggleFocus} |
236| Problems | Diagnostics | {#kb:jetbrains diagnostics::Deploy} |
237| Debug | Debug Panel | {#kb:jetbrains debug_panel::ToggleFocus} |
238
239Zed has three dock positions: left, bottom, and right. Panels can be moved between docks by dragging or through settings.
240
241Note that there's no dedicated npm tool window in Zed. Use the terminal or define tasks for your common npm scripts.
242
243### Debugging
244
245Both WebStorm and Zed offer integrated debugging for JavaScript and TypeScript:
246
247- Zed uses `vscode-js-debug` (the same debug adapter that VS Code uses)
248- Set breakpoints with {#kb:jetbrains editor::ToggleBreakpoint}
249- Start debugging with {#kb:jetbrains debugger::Start}
250- Step through code with {#kb:jetbrains debugger::StepInto} (step into), {#kb:jetbrains debugger::StepOver} (step over), {#kb:jetbrains debugger::StepOut} (step out)
251- Continue execution with {#kb:jetbrains debugger::Continue}
252
253Zed can debug:
254
255- Node.js applications and scripts
256- Chrome/browser JavaScript
257- Jest, Mocha, Vitest, and other test frameworks
258- Next.js (both server and client-side)
259
260For more control, create a `.zed/debug.json` file:
261
262```json
263[
264 {
265 "label": "Debug Current File",
266 "adapter": "JavaScript",
267 "program": "$ZED_FILE",
268 "request": "launch"
269 },
270 {
271 "label": "Debug Node Server",
272 "adapter": "JavaScript",
273 "request": "launch",
274 "program": "${workspaceFolder}/src/server.js"
275 },
276 {
277 "label": "Attach to Chrome",
278 "adapter": "JavaScript",
279 "request": "attach",
280 "port": 9222
281 }
282]
283```
284
285Zed also recognizes `.vscode/launch.json` configurations, so existing VS Code debug setups often work out of the box.
286
287### Running Tests
288
289WebStorm has a dedicated test runner with a visual interface showing pass/fail status for each test. Zed provides test running through:
290
291- **Gutter icons** — Click the play button next to test functions or describe blocks
292- **Tasks** — Define test commands in `tasks.json`
293- **Terminal** — Run `npm test`, `jest`, `vitest`, etc. directly
294
295Zed supports auto-detection for common test frameworks:
296
297- Jest
298- Mocha
299- Vitest
300- Jasmine
301- Bun test
302- Node.js test runner
303
304The test output appears in the terminal panel. For Jest, use `--verbose` for detailed output or `--watch` for continuous testing during development.
305
306### Extensions vs. Plugins
307
308WebStorm has a plugin catalog covering additional language support, themes, and tool integrations.
309
310Zed's extension catalog is smaller and more focused:
311
312- Language support and syntax highlighting
313- Themes
314- Context servers
315
316Several features that require plugins in WebStorm are built into Zed:
317
318- Real-time collaboration with voice chat
319- AI coding assistance
320- Built-in terminal
321- Task runner
322- LSP-based code intelligence
323- Prettier formatting
324- ESLint integration
325
326### What's Not in Zed
327
328To set expectations clearly, here's what WebStorm offers that Zed doesn't have:
329
330- **npm tool window** — Use the terminal or tasks instead
331- **HTTP Client** — Use tools like Postman, Insomnia, or curl
332- **Database tools** — Use DataGrip, DBeaver, or TablePlus
333- **Framework-specific tooling** (Angular schematics, React refactorings) — Use CLI tools
334- **Visual package.json editor** — Edit the file directly
335- **Built-in REST client** — Use external tools or extensions
336- **Profiler integration** — Use Chrome DevTools or Node.js profiling tools
337
338## Collaboration in Zed vs. WebStorm
339
340WebStorm offers Code With Me as a separate feature for collaboration. Zed has collaboration built into the core experience.
341
342- Open the Collab Panel in the left dock
343- Create a channel and [invite your collaborators](https://zed.dev/docs/collaboration#inviting-a-collaborator) to join
344- [Share your screen or your codebase](https://zed.dev/docs/collaboration#share-a-project) directly
345
346Once connected, you'll see each other's cursors, selections, and edits in real time. Voice chat is included. There's no need for separate tools or third-party logins.
347
348## Using AI in Zed
349
350If you're used to AI assistants in WebStorm (like GitHub Copilot, JetBrains AI Assistant, or Junie), Zed offers similar capabilities with more flexibility.
351
352### Configuring GitHub Copilot
353
3541. Open Settings with {#kb zed::OpenSettings}
3552. Navigate to **AI → Edit Predictions**
3563. Click **Configure** next to "Configure Providers"
3574. Under **GitHub Copilot**, click **Sign in to GitHub**
358
359Once signed in, just start typing. Zed will offer suggestions inline for you to accept.
360
361### Additional AI Options
362
363To use other AI models in Zed, you have several options:
364
365- Use Zed's hosted models, with higher rate limits. Requires [authentication](https://zed.dev/docs/authentication) and subscription to [Zed Pro](https://zed.dev/docs/ai/subscription.html).
366- Bring your own [API keys](https://zed.dev/docs/ai/llm-providers.html), no authentication needed
367- Use [external agents like Claude Agent](https://zed.dev/docs/ai/external-agents.html)
368
369## Advanced Config and Productivity Tweaks
370
371Zed exposes advanced settings for power users who want to fine-tune their environment.
372
373Here are a few useful tweaks for JavaScript/TypeScript developers:
374
375**Format on Save:**
376
377```json
378"format_on_save": "on"
379```
380
381**Configure Prettier as the default formatter** (requires manual JSON editing):
382
383```json
384{
385 "formatter": {
386 "external": {
387 "command": "prettier",
388 "arguments": ["--stdin-filepath", "{buffer_path}"]
389 }
390 }
391}
392```
393
394**Enable ESLint code actions** (requires manual JSON editing):
395
396```json
397{
398 "lsp": {
399 "eslint": {
400 "settings": {
401 "codeActionOnSave": {
402 "rules": ["import/order"]
403 }
404 }
405 }
406 }
407}
408```
409
410**Configure TypeScript strict mode hints:**
411
412In your `tsconfig.json`, enable strict mode for better type checking:
413
414```json
415{
416 "compilerOptions": {
417 "strict": true,
418 "noUncheckedIndexedAccess": true
419 }
420}
421```
422
423**Enable direnv support (useful for projects using direnv for environment variables):**
424
425```json
426"load_direnv": "shell_hook"
427```
428
429## Next Steps
430
431Now that you're set up, here are some resources to help you get the most out of Zed:
432
433- [All Settings](../reference/all-settings.md) — Customize settings, themes, and editor behavior
434- [Key Bindings](../key-bindings.md) — Learn how to customize and extend your keymap
435- [Tasks](../tasks.md) — Set up build and run commands for your projects
436- [AI Features](../ai/overview.md) — Explore Zed's AI capabilities beyond code completion
437- [Collaboration](../collaboration/overview.md) — Share your projects and code together in real time
438- [JavaScript in Zed](../languages/javascript.md) — JavaScript-specific setup and configuration
439- [TypeScript in Zed](../languages/typescript.md) — TypeScript-specific setup and configuration