Skip to content
CodeMorph
Esc
  • No results for ""

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, .ts and .tsx file, parsed with tree-sitter.
  • ES module imports and exports, including export * from barrels and re-export chains.
  • CommonJS require() calls and module.exports, destructured or not.
  • Dynamic import() calls, recorded and marked as dynamic.
  • Path aliases from tsconfig.json or jsconfig.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:

KindExample
Local file./lib/db resolving to src/lib/db.js
Node built-infs, node:path
Packageexpress, listed in package.json
Asset./styles.css, ./data.json
UnresolvedA 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:

  1. Files that import each other in a cycle are grouped into one strongly connected component. A cycle is never split across batches.
  2. Components are put in topological order using Tarjan's algorithm, so every file comes after everything it imports.
  3. 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.

Scan & Plan building a dependency graph

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.

Batches converting leaf modules first

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.