vite-plugin-knip-ui

Visualize Knip dead code analysis results in your Vite dev server. check out the docs for more information

Features

• Run Knip analysis directly from the browser with one click
• Tree-structured sidebar to view issues grouped by category
• All issue types - files, exports, dependencies, binaries, and more
• Click to open any file in your editor instantly
• Export reports as JSON or CSV
• Real-time status with WebSocket connection indicator

Installation

pnpm add -D vite-plugin-knip-ui

Usage

Add the plugin to your vite.config.ts:

import { defineConfig } from 'vite'
import knipUi from 'vite-plugin-knip-ui'

export default defineConfig({
  plugins: [knipUi()],
})

Start your dev server and navigate to /__knip-ui to view the analysis panel.

Options

knipUi({
  base: '/__knip-ui', // Custom base path for the UI
})

Requirements

• Vite 5.x, 6.x, or 7.x
• Knip installed in your project

CI/CD Integration

Run Knip in your CI pipeline to prevent dead code from reaching production:

- name: Check for dead code (Knip)
  run: pnpm lint:knip

Available scripts:

• pnpm lint:knip - Fails if any dead code is found (strict)
• pnpm lint:knip:ci - Reports issues without failing (gradual)

See the CI/CD Integration Guide for detailed setup instructions.

Development

# Install dependencies
pnpm install

# Build the plugin
pnpm build

# Run the playground
cd playground && pnpm dev

Credits

This project is built with:

• Knip - Dead code analysis for TypeScript/JavaScript
• birpc - Extracting RPC utilities by @antfu
• Vite - Next generation frontend tooling
• Vue DevTools UI - UI components

Contributing

See CONTRIBUTING.md for development guidelines.

License

MIT © Nishanth S