vite-plugin-fps-monitor

A lightweight Vite plugin that displays real-time FPS monitoring in development mode. Perfect for tracking performance during development of Vue, React, or any other web application.

Features

• 🚀 Real-time FPS monitoring
• 🎨 Color-coded display (Green: 55+ FPS, Yellow: 30-54 FPS, Red: <30 FPS)
• 📍 Configurable positioning
• 🎯 Development-only (no production impact)
• 🛠️ Customizable styling
• 📦 Zero dependencies
• 🔧 TypeScript support

Installation

npm install vite-plugin-fps-monitor --save-dev
# or
yarn add vite-plugin-fps-monitor --dev
# or
pnpm add vite-plugin-fps-monitor --save-dev

Usage

Add the plugin to your vite.config.ts:

import { defineConfig } from "vite";
import { fpsMonitor } from "vite-plugin-fps-monitor";

export default defineConfig({
  plugins: [
    // ... other plugins
    fpsMonitor(),
  ],
});

Configuration

import { fpsMonitor } from "vite-plugin-fps-monitor";

export default defineConfig({
  plugins: [
    fpsMonitor({
      position: "top-right", // 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
      offset: 10, // Distance from edge in pixels
      enabled: true, // Enable/disable the monitor
      style: {
        // Custom CSS styles
        fontSize: "14px",
        backgroundColor: "rgba(0, 0, 0, 0.9)",
      },
    }),
  ],
});

Options

| Option | Type | Default | Description | | ---------- | -------------------------------------------------------------- | ------------- | --------------------------------- | | position | 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' | 'top-right' | Position of the FPS monitor | | offset | number | 10 | Distance from the edge in pixels | | enabled | boolean | true | Enable/disable the FPS monitor | | style | Partial<CSSStyleDeclaration> | {} | Custom CSS styles for the monitor |

Examples

Basic Usage

fpsMonitor();

Custom Position

fpsMonitor({
  position: "bottom-left",
  offset: 20,
});

Custom Styling

fpsMonitor({
  style: {
    fontSize: "16px",
    backgroundColor: "rgba(255, 0, 0, 0.8)",
    color: "white",
    borderRadius: "8px",
  },
});

Conditional Enable

fpsMonitor({
  enabled: process.env.NODE_ENV === "development",
});

How it Works

The plugin injects a lightweight FPS monitoring script into your HTML during development. It uses requestAnimationFrame to measure frame rates and displays them in a non-intrusive overlay.

Framework Compatibility

This plugin works with any Vite-based project:

• ✅ Vue.js
• ✅ React
• ✅ Svelte
• ✅ Vanilla JavaScript/TypeScript
• ✅ Any other Vite-supported framework

Development vs Production

The FPS monitor only appears in development mode (when Vite dev server is running). It has zero impact on your production build.

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.