TSConfig Builder

TSConfig Builder

Visually compose tsconfig.json with target, module, strict mode, paths, and project references.

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"
  ]
}

What This Tool Does

TSConfig Builder is built for deterministic developer and agent workflows.

Visually compose tsconfig.json with target, module, strictness, paths, project references. Live JSON preview, copy to clipboard, with explanations of each compiler option.

Use How to Use for execution steps and FAQ for constraints, policies, and edge cases.

Last updated:

This tool is provided as-is for convenience. Output should be verified before use in any production or critical context.

Agent Invocation

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.

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.

Frequently Asked Questions

What is TSConfig Builder?
A visual editor for tsconfig.json that surfaces every common compiler option with grouped sections, presets for typical project shapes, path aliases, and project references for monorepos.
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.