Skip to content

TSConfig Builder

Build a tsconfig.json from five presets with target, module, strict flags, path aliases and project references, with an explanation of each option.

TSConfig Builder

Preset

Compilation

lib

Strictness

Modules & output

Paths

No path aliases. Set baseUrl above and click Add.

Project references

For monorepos with multiple tsconfigs. Enable composite to use.

Files

tsconfig.json
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "lib": [
      "ES2022"
    ],
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

tsconfig.json updated, 25 lines

Updated . Provided as is. Check the output before you rely on it in production.

How to use TSConfig Builder

  1. 1

    Pick a preset

    Choose a starting preset that matches your project: node-app for backend services, react-app for Vite-based React, library for npm packages, monorepo-root for project references, or deno for the strictest flags.

  2. 2

    Tune compilation targets

    Adjust target, module, moduleResolution, and lib to match your runtime. Bundler resolution pairs with Vite/esbuild; NodeNext targets native Node ESM.

  3. 3

    Set strictness flags

    Toggle strict (the master switch) and individual flags such as noUncheckedIndexedAccess and exactOptionalPropertyTypes. Hover any option for an inline explanation panel.

  4. 4

    Add path aliases and references

    Define path mappings like @/* to src/* (set baseUrl first) and add project references for monorepos. Each row updates the live preview on the right.

  5. 5

    Copy the JSON

    Inspect the live tsconfig.json on the right, then click Copy to drop it into your project. The output is comment-free, valid JSON, ready to commit.

Questions and answers

What is TSConfig Builder?
tsconfig.json tells the TypeScript compiler which files to build and how, from target and module resolution to strictness. This builder starts from five presets (Node app, React app, library, monorepo root, Deno), adds path aliases and project references, explains each option on hover and shows the JSON live.
Which presets are included?
Five: node-app (NodeNext ESM), react-app (Bundler + react-jsx), library (declarations + maps), monorepo-root (composite + references), and deno (strictest flags including noUncheckedIndexedAccess).
Does it explain each compiler option?
Yes. Hover any option label and an explanation panel appears beside the JSON preview, covering what the flag does and when to enable it.
Does it send my data to a server?
No. The builder runs entirely in your browser. Nothing you configure leaves your device, and the generated tsconfig.json never touches any backend.
Can I extend the output later?
Absolutely. The output is a normal tsconfig.json. After copying it, you can layer extends, add plugin sections, or merge it with an existing config in any editor.
For AI agents: how to call this tool

Machine-readable contract, endpoints and examples. Humans can ignore this section.

Best Path For Builders

Browser workflow

Runs instantly in the browser with private local processing and copy/export-ready output.

Browser Workflow

This tool is optimized for instant in-browser execution with local data handling. Run it here and copy/export the output directly.

/tsconfig-builder/

For automation planning, fetch the canonical contract at /api/tool/tsconfig-builder.json.