R3F-Monitor

Changelog

An advanced, easy-to-use performance monitoring tool for @react-three/fiber applications.

Add the <PerfMonitor /> component anywhere in your R3F Canvas.

Display Modes

🗂 Tab Display (Default)

A modern, structured interface with separated tabs for better focus and deep inspection.

📊 Classic Display

A compact, always-visible performance panel inspired by traditional FPS monitors.

🧪 Example

Live example:
👉 https://codesandbox.io/p/sandbox/3sqpy4

🚀 Key Features

• Comprehensive Metrics: Monitor FPS, CPU/GPU render times, and JS Heap Memory.
• VRAM Estimation: Get an estimated breakdown of your GPU memory usage (Textures and Geometries).
• Deep Analysis: Inspect individual WebGL programs, toggle visibility, and track matrix updates.
• Overclock Mode: Bypass V-Sync limitations to benchmark true hardware rendering capabilities.
• Flexible UI: Choose between graphical visualizations, detailed lists, or a minimal condensed view.

📦 Installation

# npm
npm install r3f-monitor

# yarn
yarn add r3f-monitor

# pnpm
pnpm add r3f-monitor

⚙️ Options

logsPerSecond?: number          // Log refresh rate (default: 10)

antialias?: boolean             // Enable text antialiasing

overClock?: boolean             // Disable FPS refresh limit

deepAnalyze?: boolean           // Enable detailed WebGL program inspection

showGraph?: boolean             // Toggle performance graphs (default: true)

graphType?: "line" | "bar"      // Graph style (default: "bar")

minimal?: boolean               // Compact condensed view

matrixUpdate?: boolean          // Count matrixWorld updates per frame

chart?: {
  hz?: number                   // Graph refresh frequency (default: 60)
  length?: number               // Number of data points displayed (default: 120)
}

className?: string              // Custom CSS class

style?: React.CSSProperties     // Inline style override

position?:
  | "top-right"
  | "top-left"
  | "bottom-right"
  | "bottom-left"               // Default: "top-right"

displayType?: "tab" | "classic" // Default: "tab"

Usage

View Example

import { Canvas } from "@react-three/fiber";
import { PerfMonitor } from "r3f-monitor";

function App() {
  return (
    <Canvas>
      <PerfMonitor />
    </Canvas>
  );
}

Maintainers :

• @anhldh

Thanks

Special thanks to twitter @utsuboco. This library is a port/fork based on the original r3f-perf library.