mrdoob/stats.js

★ 9,116JavaScriptAudience · developerComplexity · 1/5Setup · easy

Mindmap

mindmap
  root((repo))
    What it does
      FPS monitor
      Frame timing
      Memory usage
    Features
      Custom panels
      Bookmarklet mode
      Live real-time display
    Usage
      npm install
      Animation loops
      Any web page
    Audience
      Game developers
      Graphics coders

mindmap root((repo)) What it does FPS monitor Frame timing Memory usage Features Custom panels Bookmarklet mode Live real-time display Usage npm install Animation loops Any web page Audience Game developers Graphics coders

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a real-time FPS and frame-time monitor to a browser-based game or animation to spot slowdowns during development.

USE CASE 2

Inject the stats panel into any third-party website using the bookmarklet to check its rendering performance without touching its source code.

USE CASE 3

Track a custom value alongside FPS and memory by adding your own panel to the stats widget.

Tech stack

JavaScript

Getting it running

Difficulty · easy Time to first run · 5min

License not described in the explanation.

In plain English

stats.js is a small JavaScript library that adds a live performance monitor to any web page or browser-based application. It appears as a compact info box in the corner of the screen, updating in real time while your code runs. Developers typically use it during development to spot slowdowns before shipping. The monitor can display several types of information at once. FPS shows how many frames are drawn per second, which is important for animations and games: higher is better. MS shows how many milliseconds each frame takes to render: lower is better. MB shows how much memory the browser has allocated, though you need to launch Chrome with a special flag to get accurate memory numbers. You can also add your own custom panels to track any value you care about. Adding it to a project is straightforward. You install it via npm, create a Stats object, tell it which panel to show first, and attach its small display element to the page. You then wrap the code you want to measure between two calls, begin and end, inside your animation loop. The library handles the rest, updating the display automatically on each frame. There is also a bookmarklet option, which lets you paste a short snippet into your browser's bookmark bar and inject the monitor into any page you are visiting, without touching that page's source code. This is useful for quickly checking the performance of third-party sites or demos. The library is intentionally minimal: one file, no dependencies, no configuration required beyond picking a panel. It was created by the author of the Three.js 3D library and is widely used in browser-based graphics and animation projects.

Copy-paste prompts

Prompt 1

Show me how to add stats.js to a Three.js animation loop to monitor FPS and frame time in real time.

Prompt 2

Help me create a custom stats.js panel that displays the count of active particles in my canvas animation.

Prompt 3

Walk me through using the stats.js bookmarklet to inject the FPS monitor into a website I do not own.

Prompt 4

Help me add stats.js to a plain JavaScript requestAnimationFrame loop and position the panel in the top-right corner of the page.

Open on GitHub → Explain another repo

← mrdoob on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.