tsconfig.json Builder
Visually build a tsconfig.json file — choose presets for Node, React, and Next.js, configure every option with explanations, and get live JSON output
Base Config ▶
Inherit from a base config package.
Glob patterns for files to compile.
Glob patterns to skip (comma-separated).
Modules & Output ▶
JS language version for output.
Module system for output.
How modules get resolved. Use "bundler" with Vite/Webpack, "nodenext" for Node ESM.
Output directory for compiled files.
Root directory of source files.
Generate .js.map files for debugging.
Generate .d.ts type declaration files.
JSX & Libraries ▶
JSX transform mode. react-jsx is the modern default (React 17+).
Built-in type libraries to include. If empty, TypeScript uses the target default.
Strict & Type Checking ▶
Module Interop ▶
Path Mapping ▶
Base directory for non-relative module names.
Path aliases. Format: @alias/* → ./path/*, one per line.
Advanced ▶
Configure options on the left… About this tool
tsconfig.json Builder is a visual editor for TypeScript configuration files.
Choose a preset for your framework (Node.js, React, Next.js, or a generic library), then
fine-tune every compiler option with inline explanations. The live JSON preview updates
as you change settings, and you can copy or download the final tsconfig.json.
Examples:
-
Select the Next.js preset → get a standard config with
jsx: "preserve", bundler module resolution, path alias@/*, and DOM libs — ready for your project. -
Toggle strict off and enable individual strict checks like
noImplicitAnyandstrictNullChecksone at a time — the JSON reflects exactly what you chose.
FAQ
What are the differences between moduleResolution options? ›
<code>node10</code> is the legacy Node.js resolution (no package.json exports). <code>node16</code>/<code>nodenext</code> supports ESM with package.json <code>"exports"</code> and <code>.mts</code>/<code>.cts</code> extensions. <code>bundler</code> is designed for tools like Vite, Webpack, and esbuild that bundle code — it does not require file extensions in imports.
When should I choose jsx: preserve vs react-jsx? ›
<code>preserve</code> leaves JSX untouched so a downstream tool (like Next.js or Babel) handles the transform. <code>react-jsx</code> makes TypeScript emit <code>_jsx()</code> calls directly, which works with React 17+ automatic runtime — no <code>import React</code> needed.
Why does strict enable multiple sub-options? ›
<code>strict</code> is a master switch that enables all strict-type-checking flags at once: <code>noImplicitAny</code>, <code>strictNullChecks</code>, <code>strictFunctionTypes</code>, and five others. Uncheck individual sub-options to disable only those checks while keeping the rest.
What does esModuleInterop actually do? ›
It allows default imports from CommonJS modules (e.g. <code>import express from "express"</code> instead of <code>import * as express from "express"</code>) and emits helper code for compatibility. Pair it with <code>allowSyntheticDefaultImports</code> for type-checking support.