tsconfig.json Generator
Generate a tsconfig.json for your TypeScript project. Choose a framework preset or configure target, module, strict mode, and output options manually.
{
"compilerOptions": {
"target": "ES2020",
"module": "CommonJS",
"moduleResolution": "Node",
"lib": [
"ESNext"
],
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"src"
],
"exclude": [
"node_modules",
"dist"
]
}When a tsconfig.json generator is the right tool
Use this page to draft a tsconfig.json from a small set of compiler options and optional framework presets. The preview updates as you type. It does not compile your project. For editor defaults or a Prettier config, see the tools linked below.
Use cases
Starting a vanilla or Node project
Leave Vanilla TypeScript, or choose Node.js for NodeNext resolution and declaration output. Adjust outDir, rootDir, include, and exclude (comma-separated) as needed.
Using a React or Next.js overlay
Those presets switch module settings and DOM libs, but they do not set jsx. Add that (and, for Next.js, any plugins you need) by hand after you download the file.
How the file is built
target, module, and moduleResolution are always written. outDir, rootDir, lib, include, and exclude are written when non-empty. Most flags are emitted only when true. A preset click resets the whole form to the vanilla defaults plus that overlay.
{
"compilerOptions": {
"target": "ES2020",
"module": "CommonJS",
"moduleResolution": "Node",
"lib": [
"ESNext"
],
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"src"
],
"exclude": [
"node_modules",
"dist"
]
}What this tool does not do
It does not typecheck, offer every compiler option, or ship official Next.js or Deno templates. Generation stays in your browser. You can refine the file next to .prettierrc Generator or .editorconfig Generator.
How to use tsconfig.json Generator
- Choose a framework preset, or keep Vanilla TypeScript.
- Adjust compiler, path, strictness, and output options. Watch the JSON update.
- Copy or Download
tsconfig.json, then add any missing keys such asjsx.
Frequently asked questions
How does tsconfig.json Generator work?
The JSON on the right updates as you change options. Vanilla TypeScript starts at target ES2020, module CommonJS, moduleResolution Node, lib ESNext, outDir ./dist, rootDir ./src, and several flags including strict, esModuleInterop, and skipLibCheck. Copy or Download saves a file named tsconfig.json. This is a starter file, not a compiler run and not an official framework template.
What do the framework presets change?
Each preset replaces the form with the vanilla defaults plus an overlay. React (Vite / CRA) and Next.js set module ESNext, moduleResolution Bundler, and lib to DOM, DOM.Iterable, and ESNext. Next.js also sets target ES2017 and include to next-env.d.ts, **/*.ts, **/*.tsx, and .next/types/**/*.ts. Node.js sets target ES2022, module and moduleResolution NodeNext, lib ESNext, declaration, and sourceMap. Deno sets target and module ESNext with lib ESNext and DOM. None of the presets set a jsx option, and the Next.js preset does not add the official next plugin.
How are strict flags and other booleans written?
When strict is on, noImplicitAny and strictNullChecks are disabled in the form and are not emitted separately (strict already implies them). Other flags such as noUnusedLocals still emit when checked, even if strict is on. Most booleans appear in the JSON only when they are true; turning declaration off omits the key. include and exclude are comma-separated lists. The paths checkbox adds only "@/*": ["./src/*"]. There is no control to edit lib entries except by choosing a preset.
Is anything uploaded?
No. The file is built in your browser. TypeScript is not invoked to typecheck the result.
Related tools and guides
References
- Compiler options are documented in the TypeScript tsconfig reference. Review the generated file against that list before you rely on it.