tsconfig.json Generator
Start from a preset for Node, the browser, React, Next.js or a library, then fine-tune target, module, strict mode, paths and output settings. The tsconfig.json updates live so you can copy or download it straight into your project.
How to generate a tsconfig.json
- Pick the environment that matches your project, like Node.js or React.
- Adjust target, module, strict mode, output folders and path aliases as needed.
- Copy the result or download it as tsconfig.json into your project root.
Examples
React app
{ "environment": "react", "strict": true }{
"compilerOptions": {
"target": "ES2020",
"module": "esnext",
"moduleResolution": "bundler",
"jsx": "react-jsx",
"strict": true,
...
}
}Node.js library with declarations
{ "environment": "library", "declaration": true }{
"compilerOptions": {
"target": "ES2020",
"module": "esnext",
"declaration": true,
"sourceMap": true,
"outDir": "dist",
...
}
}Frequently asked questions
What is a tsconfig.json file?
It is the configuration file the TypeScript compiler reads to know how to type-check and build your project. It sets the language target, module system, strictness and which files to include.
Which environment preset should I choose?
Pick Node.js for backend or CLI code, Browser for plain web apps, React or Next.js for those frameworks, and Library when you publish a package and need declaration files. Each preset sets matching target, module, lib and JSX defaults that you can still override.
Should I enable strict mode?
Yes for almost every new project. Strict mode turns on the full set of strict type checks, which catches far more bugs at compile time. You can toggle it off here if you are migrating a large JavaScript codebase gradually.
How do path aliases work?
Path aliases like @/* let you import from short paths instead of long relative ones. When you add paths the generator also sets baseUrl to '.', which TypeScript needs to resolve them. Your bundler or runtime must understand the same aliases.
Where do I put the generated file?
Save it as tsconfig.json in the root of your project, next to package.json. TypeScript and most editors pick it up automatically from there.
Is my configuration sent to a server?
No. The presets are built into the page and the tsconfig.json is generated entirely in your browser, so nothing you type leaves your device.
Related tools
ESLint Config Generator
Generate an ESLint config for JavaScript or TypeScript with React, Vue or Node. Pick a style, set semi, quotes and indent, then copy or download.
JSON to TypeScript
Generate TypeScript interfaces from a JSON sample. Infers nested objects, arrays and union types, then copy or download the .ts file. Runs in your browser.
Gitignore Generator
Build a .gitignore from Node, Python, Java, Go, Rust, macOS, Windows and more. Pick your stacks, copy or download the file. Runs in your browser.
JSON Formatter
Format, validate and minify JSON online. Pretty-print with custom indentation, sort keys and catch syntax errors. Runs in your browser.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
Aspect Ratio Calculator
Calculate aspect ratios fast. Enter a ratio like 16:9 and one dimension to get the other, or enter width and height to simplify the ratio.