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