Your first migration
Open a project, plan the migration, convert it batch by batch, review every diff and verify the result.
This walkthrough takes a JavaScript project from opened to verified TypeScript. Before you start, set your Anthropic key with CodeMorph: Set API Key (see Settings and API keys), and make sure your project is committed to git.
1. Open a project
On the Welcome page, click Open Folder and choose the root of your project, the folder that contains package.json. You can also use File → Open Folder.
Trust the workspace
CodeMorph's engine reads and parses your files, so it only runs in trusted workspaces. If the editor shows Restricted Mode, click it in the title bar and choose Trust.
If you open a multi-root workspace, CodeMorph scans the first folder in it.
2. Open Morph
Press Ctrl L. The Morph panel opens in the secondary sidebar on the right, with three tabs: Migrate, Verify and Ask, and an input at the bottom where you can give Morph instructions.
You can also click the 0/0 typed item in the status bar to open the panel.
3. Start the scan
Click Start Migration in the panel, or press Ctrl Shift M from anywhere. The panel shows Scanning project… while CodeMorph builds the dependency graph and computes batches. On most projects this takes a few seconds.
What the scan reads
- Every
.js,.jsx,.mjs,.cjs,.tsand.tsxfile, parsed with tree-sitter. - ES module imports and exports, including
export * frombarrels and re-export chains. - CommonJS
require()calls andmodule.exports, destructured or not. - Dynamic
import()calls, recorded and marked as dynamic. - Path aliases from
tsconfig.jsonorjsconfig.json, index files and extension probing.
It skips anything your .gitignore files exclude, so node_modules and build output never enter the graph.
How imports are classified
Every import becomes an edge in the graph, classified as one of:
| Kind | Example |
|---|---|
| Local file | ./lib/db resolving to src/lib/db.js |
| Node built-in | fs, node:path |
| Package | express, listed in package.json |
| Asset | ./styles.css, ./data.json |
| Unresolved | A missing file, or a package not in package.json |
Unresolved imports don't stop the scan. They show you where the graph has gaps.
4. Read the plan
When the scan finishes, the panel shows:
Plan ready. 38 files in 4 batches. Leaf modules first, so types flow upward through your imports.
Under it you'll see the totals (JavaScript files, batches, import edges) and one row per batch, named by the folders it covers, with its file count. Here's how the plan is built:
- Files that import each other in a cycle are grouped into one strongly connected component. A cycle is never split across batches.
- Components are put in topological order using Tarjan's algorithm, so every file comes after everything it imports.
- Components are packed into batches of about ten files. Batch size only affects pacing; the order underneath is what matters.
Batch 1 is your leaves: utilities and helpers that import nothing local. The last batch usually holds your entry point.
5. Start the migration
Click Start migration. Each batch shows its progress as files complete, and a progress bar tracks the whole run. The CODEMORPH output panel logs every file with its tsc result and the number of repairs it took.
You can also steer it in plain words from the input at the bottom of the panel, for example:
Migrate the api folder, strict mode, keep tests green
Use @ to add context and / for commands. The model picker next to them chooses the Claude model.
6. Review each file
As files convert, they appear as side-by-side diffs. Morph summarizes each one, for example which types it inferred and from how many call sites. Click Accept to keep the file or Reject to restore the original. The file list marks every file accepted, review or queued, and accepting one takes you to the next. See Review and accept diffs.
7. Verify
Open the Verify tab or press Ctrl Shift V. CodeMorph runs the typecheck, your test suite and your build across the whole project. When all three pass, you'll see Migration verified with your typed-file count. See Verify.
Check the explorer and status bar
The file explorer marks each source file with a dot:
- Grey: JavaScript that hasn't been migrated.
- Orange: converting now.
- Green: TypeScript.
The status bar shows typed / total, for example 38/38 typed, and opens Morph when clicked.
Tip
Ask Morph about anything it changed. Open the Ask tab and try "Why is price a number and not a string?". It answers with the call sites behind the decision.
Something unclear or out of date? Tell us.