Compare tsconfig.json Files Online
Paste two tsconfig.json files. See compiler option changes, path mapping differences, and include/exclude modifications.
🔒 100% private — runs entirely in your browseror try sample data
Paste two tsconfig.json files. See compiler option changes, path mapping differences, and include/exclude modifications.
🔒 100% private — runs entirely in your browseror try sample data
tsconfig Diff compares two tsconfig.json files and shows you exactly which compiler options changed, what path mappings were added or removed, and how include/exclude patterns differ. Whether you are upgrading TypeScript versions, standardizing configurations across a monorepo, or reviewing a teammate's strictness changes, this tool gives you a clear, color-coded view of every modification.
TypeScript compiler options have a cascading effect on your entire codebase. Changing target from ES2020 to ES2022 enables new syntax features. Switching module from commonjs to ESNext changes how imports and exports are emitted. Adding noUncheckedIndexedAccess introduces hundreds of new type errors on array and object access. Understanding exactly what changed in a tsconfig is essential before these modifications hit your codebase.
Paste your tsconfig.json files (before and after). The tool performs deep JSON comparison, walking through nested compilerOptions, paths mappings, and array values in include/exclude/lib. Everything runs client-side — your configuration data never leaves your browser.
// Before: TypeScript 4.x setup
"compilerOptions": { "target": "ES2020", "module": "commonjs", "lib": ["ES2020", "DOM"]
} // After: TypeScript 5.x setup
"compilerOptions": { "target": "ES2022", "module": "ESNext", "moduleResolution": "bundler", "lib": ["ES2022", "DOM"]
} // Diff highlights: target bump, module system change,
// new moduleResolution strategy, and lib update.The moduleResolution: "bundler" option (TypeScript 5.0+) is designed for projects using bundlers like webpack, Vite, or esbuild. It enables modern resolution features without requiring full ESM compliance.
// Before: basic strict mode
"compilerOptions": { "strict": true
} // After: additional strictness flags
"compilerOptions": { "strict": true, "noUncheckedIndexedAccess": true, "exactOptionalPropertyTypes": true, "noPropertyAccessFromIndexSignature": true
} // These flags go beyond what "strict" enables
// and catch additional categories of type errors.The strict flag enables a set of type-checking options, but flags like noUncheckedIndexedAccess and exactOptionalPropertyTypes are not included in strict and must be enabled separately.
// Before: two path aliases
"paths": { "@components/*": ["src/components/*"], "@utils/*": ["src/utils/*"]
} // After: expanded aliases for new directories
"paths": { "@components/*": ["src/components/*"], "@utils/*": ["src/utils/*"], "@hooks/*": ["src/hooks/*"], "@types/*": ["src/types/*"], "@api/*": ["src/api/*"]
} // Diff shows three new path aliases added.Path aliases in tsconfig must be kept in sync with your bundler's alias configuration (webpack resolve.alias, Vite resolve.alias, etc.) or the build will fail even if TypeScript compiles successfully.
Setting "strict": true enables multiple individual flags (noImplicitAny, strictNullChecks, strictFunctionTypes, etc.). If one config uses "strict": true and another lists individual flags, the diff shows structural differences even when the effective behavior is identical. Compare the resolved configuration (via tsc --showConfig) for a semantic comparison.
Many tsconfig files use "extends": "./tsconfig.base.json" to inherit options from a base config. This tool compares the JSON as written, not the resolved/effective configuration. Two tsconfigs that extend different bases may look similar but behave very differently. Run tsc --showConfig to see the fully resolved options.
Each TypeScript version introduces new compiler options. A tsconfig that works on TypeScript 4.9 may gain new options when updated for TypeScript 5.x (like verbatimModuleSyntax or moduleResolution: "bundler"). The diff shows these as additions, but the option may have existed as a default in newer versions. Check the TypeScript release notes for context.
Paste your tsconfig.json files into the two panels and click Compare. The tool highlights added, removed, and modified compiler options, path mappings, and include/exclude patterns with color-coded JSON diffs.
Yes. Paste the tsconfig from your current TypeScript setup alongside the updated config for the new version. The diff reveals new compiler options, deprecated settings, changed target/module values, and updated lib arrays.
The tool compares the JSON structure as written, including extends and references fields. It does not resolve inherited options from base configs. For a comparison of resolved effective configurations, run tsc --showConfig in each project and compare those outputs.
Strictness flags like strict, noImplicitAny, strictNullChecks, and noUncheckedIndexedAccess are highlighted as modified when their values change. Note that enabling strict implicitly sets multiple individual flags that may not appear in the tsconfig file itself.
Yes. This tool runs entirely in your browser using client-side JavaScript. Your tsconfig.json files, including any path mappings and project references, are never sent to any server.
Yes. In monorepos, each package often has its own tsconfig that extends a shared base. Compare individual package tsconfigs against each other or against the base config to find inconsistencies in compiler options, path aliases, and include/exclude patterns across packages.