My Favorite Frontend Setup Libraries (Project Foundation Edition)

Avatar photoByAdil

Hey folks!

I’m @nyaomaru, a frontend engineer who somehow always catches a cold when the seasons change 😿

This time, I’ll introduce three libraries that power the everyday foundation of my development setup:

  • mise — Tool version management & task runner
  • TypeDoc — API documentation generator
  • tsd — Type testing

Alright, let’s dive in together!

 

mise: Unified version and task management for your tools

https://github.com/jdx/mise

First off, the README looks great — clean logo, nice demos.
The docs are also well done:

👉 https://mise.jdx.dev/getting-started.html

Installation steps vary by OS, so just follow your platform’s guide.

By the way, it’s pronounced “meez”, as in “mise-en-place”:

mise (pronounced “meez”) or “mise-en-place”
https://mise.jdx.dev/about.html

🎁 What it can do

Setting up project environments becomes super easy:

  • Pin and auto-switch versions of Node, pnpm, Bun, Deno, Python, etc.
  • Compatible with .tool-versions (easy migration from nvm-style workflows)
  • Built-in task runner (even replaces make)

Personally, I’d call it a mix of nvm + makefile + α — everything nicely bundled in one tool. Love it.

🔎 How to use it

Minimal setup (mise.toml): 

[tools]
node = "22.6.0"
pnpm = "9"
bun = "1"

[env]
NODE_ENV = "development"

[tasks.setup]
description = "Install dependencies via pnpm"
run = "pnpm install"

[tasks.dev]
description = "Boot application via pnpm"
run = "pnpm dev"

[tasks.lint]
description = "Run lint via pnpm"
run = "pnpm lint"

Just place this file at the project root — that’s it!

🎯 Why I recommend it

ecause it makes environment setup effortless:

  • Sync Node and pnpm versions across the whole team instantly
  • Centralize tasks → same commands work locally and in CI
  • Save 2–3 seconds of context-switching every time you start work

Perfect for team-based projects.

The only mildly annoying part is that initial “Do you trust this repo?” prompt 😅

Just hit “Yes,” and from then on it’s smooth sailing.
Honestly, I can’t live without it now!

 

TypeDoc: Generate “truthful” API docs straight from your types

Check out the official site first:

https://typedoc.org/

That stylish auto-generated UI? Yep, all powered by TypeDoc.
So thankful this is open source 🙏

https://github.com/TypeStrong/typedoc

Easy to install and use!

🎁 What it can do

Like swagger-docs, it automatically generates documentation from your code,

  • Generated from actual exports → less chance of doc drift
  • Monorepo-friendly: combine multiple packages into one unified site

Since it’s built from code itself, refactoring stays painless — no more stale wiki pages rotting in peace.

🔎 How to use it

pnpm add -D typedoc

Minimal config (typedoc.json): 

{
  "entryPoints": ["src/index.ts"],
  "out": "docs/api",
  "tsconfig": "tsconfig.json",
  "excludePrivate": true,
  "excludeInternal": true
}

Add it to your scripts for CI integration: 

{
  "scripts": {
    "docs": "typedoc"
  }
}

Comments are reflected automatically, too: 

// is-lit/define.ts

/**
 * Wraps a user function as a typed predicate.
 *
 * Note: The correctness of the predicate is the caller's responsibility.
 * Its result is coerced to a boolean using `!!` for consistent guard behavior.
 *
 * @param fn Function that returns truthy when the value matches the target shape.
 * @returns Predicate narrowing to the intended type when it returns true.
 */
export function define<T>(fn: (value: unknown) => value is T): Predicate<T>;
export function define<T>(fn: (value: unknown) => boolean): Predicate<T>;
export function define<T>(
  fn: ((value: unknown) => value is T) | ((value: unknown) => boolean)
): Predicate<T> {
  return (value: unknown): value is T => !!fn(value);
}

✨ When you generate docs with typedoc, this JSDoc comment automatically appears as part of the API documentation,
showing both the overload signatures and description in a clean, “truth-from-types” way.

🎯 Why I recommend it

Because it’s automatic and low-maintenance:

  • Super easy to set up — works out of the box if your types are clean
  • Publish on GitHub Pages → instantly shareable public docs
  • Configurable via typedoc.json, package.json, or tsconfig.json

Perfect for sharing specs and APIs across teams.

Note: it requires Node.js, so pairing it with mise lets you run it as mise run docs — easy peasy.

 

tsd: Test your types with .test-d.ts

https://github.com/tsdjs/tsd

This one’s a type-level testing tool.
It’s especially useful for libraries or OSS — maybe overkill for regular apps,
but really fun to try!

🎁 What it can do

Run type tests instead of runtime ones:

  • Execute .test-d.ts files
  • Use expectType, expectError, expectAssignable, etc.
  • Guarantees type behavior at compile time

It also doubles as usage documentation — your tests show how types are intended to be used.

🔎 How to use it

pnpm add -D tsd

Add config to your package.json: 

"tsd": {
  "directory": "tests-d",
  "compilerOptions": {
    "baseUrl": "."
  }
}

Create a tests-d directory with a tsconfig.json inside: 

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "strict": true,
    "noEmit": true,
    "baseUrl": "..",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["./**/*.ts"],
  "exclude": ["../node_modules", "../dist"]
}

Example test: 

import { expectType } from 'tsd';
import { define } from '../../src/core/define';
import type { Predicate } from '../../src/types';

// =============================================
// describe: define (types)
// =============================================
// it: returns a Predicate<T> regardless of input predicate flavor
expectType<Predicate<string>>(define<string>(() => true));
expectType<Predicate<number>>(define<number>((x) => typeof x === 'number'));

This example comes from my own library: is-kit

It’s a lightweight, dependency-free way to build safe isXXX type guards 🚀

🎯 Why I recommend it

Because testing types is surprisingly fun:

  • Ensures type-level safety that often gets overlooked
  • Verifies that your intended usage matches your design

 

Wrap-up

So that’s my shortlist of must-have project setup libraries for modern frontend development:

  • mise
  • typedoc
  • tsd

How about you? What are your favorite tools?

Honestly, I didn’t write this just to say,

“Look how cool these are 😎”

It’s more like,

“I genuinely want to hear your recommendations!” 🙏

So please drop your favorite libraries, articles, books, or even unrelated obsessions in the comments — I’d love to check them out!

 

Bonus

I also made a tiny utility for building type-safe isXXX guards — give it a look if you’re curious!

https://github.com/nyaomaru/is-kit

Similar Posts