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 `Cmd+,` (macOS) or `Ctrl+,` (Linux/Windows)
412. Search for `Base Keymap`
423. Select `JetBrains`
43
44This maps familiar shortcuts like `Shift Shift` for Search Everywhere, `Cmd+O` for Go to Class, and `Cmd+Shift+A` for Find Action.
45
46In editors, the JetBrains keymap also makes `Alt+Left` / `Alt+Right` and `Shift+Alt+Left` / `Shift+Alt+Right` move and select by subword, so identifiers like `camelCase` and `snake_case` behave like WebStorm's CamelHumps navigation.
47
48If you want to copy that behavior into another base keymap, see the copy-paste `keymap.json` examples in [Key Bindings](../key-bindings.md#word-and-subword-navigation).
49
50## Set Up Editor Preferences
51
52You 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.
53
54Settings WebStorm users typically configure first:
55
56| Zed Setting | What it does |
57| ----------------------- | ------------------------------------------------------------------------------- |
58| `format_on_save` | Auto-format when saving. Set to `"on"` to enable. |
59| `soft_wrap` | Wrap long lines. Options: `"none"`, `"editor_width"`, `"preferred_line_length"` |
60| `preferred_line_length` | Column width for wrapping and rulers. Default is 80. |
61| `inlay_hints` | Show parameter names and type hints inline, like WebStorm's hints. |
62| `relative_line_numbers` | Useful if you're coming from IdeaVim. |
63
64Zed 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.
65
66> **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.
67
68## Open or Create a Project
69
70After setup, press `Cmd+Shift+O` (with JetBrains keymap) 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.
71
72To 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.
73
74You can also launch Zed from the terminal inside any folder with:
75`zed .`
76
77Once inside a project:
78
79- Use `Cmd+Shift+O` or `Cmd+E` to jump between files quickly (like WebStorm's "Recent Files")
80- Use `Cmd+Shift+A` or `Shift Shift` to open the Command Palette (like WebStorm's "Search Everywhere")
81- Use `Cmd+O` to search for symbols (like WebStorm's "Go to Symbol")
82
83Open buffers appear as tabs across the top. The Project Panel shows your file tree and Git status. Toggle it with `Cmd+1` (just like WebStorm's Project tool window).
84
85## Differences in Keybindings
86
87If you chose the JetBrains keymap during onboarding, most of your shortcuts should already feel familiar. Here's a quick reference for how Zed compares to WebStorm.
88
89### Common Shared Keybindings
90
91| Action | Shortcut |
92| ----------------------------- | -------------------------- |
93| Search Everywhere | `Shift Shift` |
94| Find Action / Command Palette | `Cmd + Shift + A` |
95| Go to File | `Cmd + Shift + O` |
96| Go to Symbol | `Cmd + O` |
97| Recent Files | `Cmd + E` |
98| Go to Definition | `Cmd + B` |
99| Find Usages | `Alt + F7` |
100| Rename Symbol | `Shift + F6` |
101| Reformat Code | `Cmd + Alt + L` |
102| Toggle Project Panel | `Cmd + 1` |
103| Toggle Terminal | `Alt + F12` |
104| Duplicate Line | `Cmd + D` |
105| Delete Line | `Cmd + Backspace` |
106| Move Line Up/Down | `Shift + Alt + Up/Down` |
107| Expand/Shrink Selection | `Alt + Up/Down` |
108| Move by subword | `Alt + Left/Right` |
109| Select by subword | `Shift + Alt + Left/Right` |
110| Comment Line | `Cmd + /` |
111| Go Back / Forward | `Cmd + [` / `Cmd + ]` |
112| Toggle Breakpoint | `Ctrl + F8` |
113
114### Different Keybindings (WebStorm → Zed)
115
116| Action | WebStorm | Zed (JetBrains keymap) |
117| ---------------------- | ----------- | ------------------------ |
118| File Structure | `Cmd + F12` | `Cmd + F12` (outline) |
119| Navigate to Next Error | `F2` | `F2` |
120| Run | `Ctrl + R` | `Ctrl + Alt + R` (tasks) |
121| Debug | `Ctrl + D` | `Alt + Shift + F9` |
122| Stop | `Cmd + F2` | `Ctrl + F2` |
123
124### Unique to Zed
125
126| Action | Shortcut | Notes |
127| ----------------- | -------------------------- | ------------------------------ |
128| Toggle Right Dock | `Cmd + R` | Assistant panel, notifications |
129| Split Panes | `Cmd + K`, then arrow keys | Create splits in any direction |
130
131### How to Customize Keybindings
132
133- Open the Command Palette (`Cmd+Shift+A` or `Shift Shift`)
134- Run `Zed: Open Keymap Editor`
135
136This opens a list of all available bindings. You can override individual shortcuts or remove conflicts.
137
138Zed also supports key sequences (multi-key shortcuts).
139
140## Differences in User Interfaces
141
142### No Indexing
143
144If 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.
145
146Zed 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.
147
148WebStorm'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.
149
150**How to adapt:**
151
152- Search symbols across the project with `Cmd+O` (powered by the TypeScript language server)
153- Find files by name with `Cmd+Shift+O`
154- Use `Cmd+Shift+F` for text search—it stays fast even in large monorepos
155- Run `tsc --noEmit` or `eslint .` from the terminal when you need deeper project-wide analysis
156
157### LSP vs. Native Language Intelligence
158
159WebStorm 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.
160
161Zed uses the Language Server Protocol (LSP) for code intelligence. For JavaScript and TypeScript, Zed supports:
162
163- **vtsls** (default) — Fast TypeScript language server with excellent performance
164- **typescript-language-server** — The standard TypeScript LSP implementation
165- **ESLint** — Linting integration
166- **Prettier** — Code formatting (built-in)
167
168The 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.
169
170Where you might notice differences:
171
172- Framework-specific intelligence (Angular templates, Vue SFCs) may be less integrated
173- Some complex refactorings (extract component with proper imports) may be less sophisticated
174- Auto-import suggestions depend on what the language server knows about your project
175
176**How to adapt:**
177
178- Use `Alt+Enter` for available code actions—the list will vary by language server
179- Ensure your `tsconfig.json` is properly configured so the language server understands your project structure
180- Use Prettier for consistent formatting (it's enabled by default for JS/TS)
181- For code inspection similar to WebStorm's "Inspect Code," check the Diagnostics panel (`Cmd+6`)—ESLint and TypeScript together catch many of the same issues
182
183### No Project Model
184
185WebStorm 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.
186
187Zed takes a different approach: a project is just a folder. There's no setup wizard, no framework detection dialog, no project structure to configure.
188
189What this means in practice:
190
191- 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.
192- npm scripts live in the terminal. Run `npm run dev`, `pnpm build`, or `yarn test` directly—there's no dedicated npm panel.
193- No framework detection. Zed treats React, Angular, Vue, and vanilla JS/TS the same way.
194
195**How to adapt:**
196
197- Create a `.zed/settings.json` in your project root for project-specific settings
198- Define common commands in `tasks.json` (open via Command Palette: `zed: open tasks`):
199
200```json
201[
202 {
203 "label": "dev",
204 "command": "npm run dev"
205 },
206 {
207 "label": "build",
208 "command": "npm run build"
209 },
210 {
211 "label": "test",
212 "command": "npm test"
213 },
214 {
215 "label": "test current file",
216 "command": "npm test -- $ZED_FILE"
217 }
218]
219```
220
221- Use `Ctrl+Alt+R` to run tasks quickly
222- Lean on your terminal (`Alt+F12`) for anything tasks don't cover
223
224### No Framework Integration
225
226WebStorm'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.
227
228Zed 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.
229
230**How to adapt:**
231
232- Use grep and file search liberally. `Cmd+Shift+F` with a regex can find component definitions, route configurations, or API endpoints.
233- Rely on your language server's "find references" (`Alt+F7`) for navigation—it works, just without framework context
234- Consider using framework-specific CLI tools (`ng`, `next`, `vite`) from Zed's terminal
235- For React, JSX/TSX syntax and TypeScript types still provide good intelligence
236
237> **Tip:** For projects with complex configurations, keep your framework's documentation handy. Zed's speed comes with less hand-holding for framework-specific features.
238
239### Tool Windows vs. Docks
240
241WebStorm organizes auxiliary views into numbered tool windows (Project = 1, npm = Alt+F11, Terminal = Alt+F12, etc.). Zed uses a similar concept called "docks":
242
243| WebStorm Tool Window | Zed Equivalent | Shortcut (JetBrains keymap) |
244| -------------------- | -------------- | --------------------------- |
245| Project (1) | Project Panel | `Cmd + 1` |
246| Git (9 or Cmd+0) | Git Panel | `Cmd + 0` |
247| Terminal (Alt+F12) | Terminal Panel | `Alt + F12` |
248| Structure (7) | Outline Panel | `Cmd + 7` |
249| Problems (6) | Diagnostics | `Cmd + 6` |
250| Debug (5) | Debug Panel | `Cmd + 5` |
251
252Zed has three dock positions: left, bottom, and right. Panels can be moved between docks by dragging or through settings.
253
254Note that there's no dedicated npm tool window in Zed. Use the terminal or define tasks for your common npm scripts.
255
256### Debugging
257
258Both WebStorm and Zed offer integrated debugging for JavaScript and TypeScript:
259
260- Zed uses `vscode-js-debug` (the same debug adapter that VS Code uses)
261- Set breakpoints with `Ctrl+F8`
262- Start debugging with `Alt+Shift+F9` or press `F4` and select a debug target
263- Step through code with `F7` (step into), `F8` (step over), `Shift+F8` (step out)
264- Continue execution with `F9`
265
266Zed can debug:
267
268- Node.js applications and scripts
269- Chrome/browser JavaScript
270- Jest, Mocha, Vitest, and other test frameworks
271- Next.js (both server and client-side)
272
273For more control, create a `.zed/debug.json` file:
274
275```json
276[
277 {
278 "label": "Debug Current File",
279 "adapter": "JavaScript",
280 "program": "$ZED_FILE",
281 "request": "launch"
282 },
283 {
284 "label": "Debug Node Server",
285 "adapter": "JavaScript",
286 "request": "launch",
287 "program": "${workspaceFolder}/src/server.js"
288 },
289 {
290 "label": "Attach to Chrome",
291 "adapter": "JavaScript",
292 "request": "attach",
293 "port": 9222
294 }
295]
296```
297
298Zed also recognizes `.vscode/launch.json` configurations, so existing VS Code debug setups often work out of the box.
299
300### Running Tests
301
302WebStorm has a dedicated test runner with a visual interface showing pass/fail status for each test. Zed provides test running through:
303
304- **Gutter icons** — Click the play button next to test functions or describe blocks
305- **Tasks** — Define test commands in `tasks.json`
306- **Terminal** — Run `npm test`, `jest`, `vitest`, etc. directly
307
308Zed supports auto-detection for common test frameworks:
309
310- Jest
311- Mocha
312- Vitest
313- Jasmine
314- Bun test
315- Node.js test runner
316
317The test output appears in the terminal panel. For Jest, use `--verbose` for detailed output or `--watch` for continuous testing during development.
318
319### Extensions vs. Plugins
320
321WebStorm has a plugin catalog covering additional language support, themes, and tool integrations.
322
323Zed's extension catalog is smaller and more focused:
324
325- Language support and syntax highlighting
326- Themes
327- Slash commands for AI
328- Context servers
329
330Several features that require plugins in WebStorm are built into Zed:
331
332- Real-time collaboration with voice chat
333- AI coding assistance
334- Built-in terminal
335- Task runner
336- LSP-based code intelligence
337- Prettier formatting
338- ESLint integration
339
340### What's Not in Zed
341
342To set expectations clearly, here's what WebStorm offers that Zed doesn't have:
343
344- **npm tool window** — Use the terminal or tasks instead
345- **HTTP Client** — Use tools like Postman, Insomnia, or curl
346- **Database tools** — Use DataGrip, DBeaver, or TablePlus
347- **Framework-specific tooling** (Angular schematics, React refactorings) — Use CLI tools
348- **Visual package.json editor** — Edit the file directly
349- **Built-in REST client** — Use external tools or extensions
350- **Profiler integration** — Use Chrome DevTools or Node.js profiling tools
351
352## Collaboration in Zed vs. WebStorm
353
354WebStorm offers Code With Me as a separate feature for collaboration. Zed has collaboration built into the core experience.
355
356- Open the Collab Panel in the left dock
357- Create a channel and [invite your collaborators](https://zed.dev/docs/collaboration#inviting-a-collaborator) to join
358- [Share your screen or your codebase](https://zed.dev/docs/collaboration#share-a-project) directly
359
360Once 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.
361
362## Using AI in Zed
363
364If you're used to AI assistants in WebStorm (like GitHub Copilot, JetBrains AI Assistant, or Junie), Zed offers similar capabilities with more flexibility.
365
366### Configuring GitHub Copilot
367
3681. Open Settings with `Cmd+,` (macOS) or `Ctrl+,` (Linux/Windows)
3692. Navigate to **AI → Edit Predictions**
3703. Click **Configure** next to "Configure Providers"
3714. Under **GitHub Copilot**, click **Sign in to GitHub**
372
373Once signed in, just start typing. Zed will offer suggestions inline for you to accept.
374
375### Additional AI Options
376
377To use other AI models in Zed, you have several options:
378
379- 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).
380- Bring your own [API keys](https://zed.dev/docs/ai/llm-providers.html), no authentication needed
381- Use [external agents like Claude Agent](https://zed.dev/docs/ai/external-agents.html)
382
383## Advanced Config and Productivity Tweaks
384
385Zed exposes advanced settings for power users who want to fine-tune their environment.
386
387Here are a few useful tweaks for JavaScript/TypeScript developers:
388
389**Format on Save:**
390
391```json
392"format_on_save": "on"
393```
394
395**Configure Prettier as the default formatter** (requires manual JSON editing):
396
397```json
398{
399 "formatter": {
400 "external": {
401 "command": "prettier",
402 "arguments": ["--stdin-filepath", "{buffer_path}"]
403 }
404 }
405}
406```
407
408**Enable ESLint code actions** (requires manual JSON editing):
409
410```json
411{
412 "lsp": {
413 "eslint": {
414 "settings": {
415 "codeActionOnSave": {
416 "rules": ["import/order"]
417 }
418 }
419 }
420 }
421}
422```
423
424**Configure TypeScript strict mode hints:**
425
426In your `tsconfig.json`, enable strict mode for better type checking:
427
428```json
429{
430 "compilerOptions": {
431 "strict": true,
432 "noUncheckedIndexedAccess": true
433 }
434}
435```
436
437**Enable direnv support (useful for projects using direnv for environment variables):**
438
439```json
440"load_direnv": "shell_hook"
441```
442
443## Next Steps
444
445Now that you're set up, here are some resources to help you get the most out of Zed:
446
447- [All Settings](../reference/all-settings.md) — Customize settings, themes, and editor behavior
448- [Key Bindings](../key-bindings.md) — Learn how to customize and extend your keymap
449- [Tasks](../tasks.md) — Set up build and run commands for your projects
450- [AI Features](../ai/overview.md) — Explore Zed's AI capabilities beyond code completion
451- [Collaboration](../collaboration/overview.md) — Share your projects and code together in real time
452- [JavaScript in Zed](../languages/javascript.md) — JavaScript-specific setup and configuration
453- [TypeScript in Zed](../languages/typescript.md) — TypeScript-specific setup and configuration