Skip to main content
Back to Tools
Web Tools

TSConfig Generator

Visual tsconfig.json builder with presets for Node.js, React, Next.js, Astro, and library projects. Configure compiler options, paths, and includes. Runs entirely in your browser — your data never leaves your machine.

tsconfig typescript compiler configuration json

Published May 29, 2026

All interactive tools run entirely in your browser. Your data never leaves your device.

How It Works

Select a preset or start from scratch. Choose your target ECMAScript version, module format, and module resolution strategy. Toggle compiler flags on, off, or leave them unset (to inherit defaults). Use the lib picker to select standard library types, and add path aliases with the paths editor. The include and exclude arrays let you control which files TypeScript processes. The output panel updates in real time and is ready to paste into any project.

You can also import an existing tsconfig.json — paste it into the import panel and the tool will parse it back into the visual editor for further editing.

Features

  • 6 presets: Node.js (ESM), React (Vite), Next.js, Library (Dual CJS+ESM), Astro, Strict Everything
  • All major compilerOptions: target, module, moduleResolution, lib, jsx, outDir, rootDir, baseUrl, and 20 boolean flags
  • lib multi-select: click to toggle individual lib entries (ESNext, DOM, DOM.Iterable, WebWorker, etc.)
  • Tri-state flag toggles: cycle each boolean flag between unset (—), true, and false
  • Paths editor: add and remove TypeScript path aliases with alias → target pairs
  • include / exclude arrays: manage glob patterns for TypeScript file inclusion
  • extends field: reference a base config package (e.g. @tsconfig/strictest/tsconfig.json)
  • Validation warnings: missing target, incompatible option combinations, paths without baseUrl, allowImportingTsExtensions without noEmit
  • Import parser: paste an existing tsconfig.json to load it into the visual editor
  • Copy output: one-click copy of the generated JSON
  • Private: runs entirely in the browser — no data transmitted

Use Cases

  • Bootstrapping a new TypeScript project with a well-reasoned baseline config
  • Switching between project archetypes (Node ESM, Vite, Astro) without memorizing every option
  • Understanding what each compiler option does through immediate visual feedback
  • Configuring path aliases for cleaner imports (@/components/* → ./src/components/*)
  • Tightening an existing config by enabling strict extras (noUnusedLocals, exactOptionalPropertyTypes, etc.)
  • Generating a tsconfig.json for a library that needs declaration files and composite builds