tsconfig.json without the cheat-sheet on a second screen
Every TypeScript project starts with a tsconfig.json, and every developer has at some point copied one from a random Stack Overflow answer, only to get a build error two days later. There are around 150 compiler options, and the docs read like a tax form.
This builder lets you start from a preset that mirrors the official template for your stack: Next.js, Vite (React), a publishable npm library, or a Node API. Every option appears as a Switch or dropdown with a plain-English hint that explains what it actually does, not just what its name says.
The live preview pane on the right shows the resulting JSON, ready to copy or download. Toggle one switch, see the JSON change in the same second. No guessing, no "did I save?", no second tab open to the TypeScript handbook.
How to use it
- Pick a preset that matches your project. Next.js for a typical Next 14+ app, Vite (React) for a modern Vite app, npm library if you publish a package, Node API for a plain backend service. Pick Custom if you want a blank canvas.
- Look through the Required basics section: target, module, moduleResolution and strict. These four decide 80% of what your tsconfig does. The hint under each one says when to pick what.
- If strict is on, the Strict mode section opens up with seven sub-options. Each catches a different class of bug. The hint explains what kind of mistakes each one flags.
- In Modules and imports turn on esModuleInterop (almost always wanted), resolveJsonModule if you import `.json` files, and forceConsistentCasingInFileNames for cross-platform teams.
- In Output set outDir (where compiled JS goes) and toggle declaration if you ship type files, sourceMap for browser debugging, incremental to make rebuilds faster.
- In JSX pick react-jsx for React 17+, preserve when a bundler handles JSX (Next, Vite). Leave it on `(none)` for a backend.
- In Path aliases set baseUrl (usually `.`) and add aliases like `@/*` → `./src/*`. Click Add alias to map another short name. Remove kills a row.
- On the right the tsconfig.json preview updates as you edit. Click Copy to put it on the clipboard or Download file to save it as a real `tsconfig.json`.
When this is useful
Six real situations where a one-click tsconfig wins:
- Starting a new project. You want a config that "just works" without spending an hour reading the TypeScript docs. Pick a preset, copy the output, you are done in 60 seconds.
- Migrating a project to strict mode. Your codebase is on `strict: false` and you want to ratchet up the safety one flag at a time. Toggle them on one by one, see the JSON, paste it back into your repo.
- Publishing your first npm package. You need `declaration: true`, `isolatedModules`, an `outDir`, no DOM in the lib array. The npm library preset does it for you, no guessing whether you missed something.
- Adding path aliases. You want `@/components/Button` instead of `../../../components/Button`. The builder shows the right shape of the paths object, instead of you trying to remember if it is an array or an object.
- Comparing presets. You are not sure if your stack should be on NodeNext or Bundler module resolution. Click between presets and see how the JSON differs.
- Onboarding a new developer. Each option has a hint, so a junior can read what noUncheckedIndexedAccess actually does instead of staring at the docs.