Installation

Prefer to poke at it first? The live playground runs this exact package with every option exposed.

Install

pnpm add @fft-visualizer/react

npm install @fft-visualizer/react

yarn add @fft-visualizer/react

React 18 and 19 are both supported, and React is the only peer dependency.

Import the stylesheet once, anywhere in your app — it sizes the canvas and styles the stats overlay:

import '@fft-visualizer/react/style.css'

Quick start

The fastest way to see something is local mode — capture the microphone and visualize it entirely in the browser, no backend required:

import { FFTVisualizer } from '@fft-visualizer/react'
import '@fft-visualizer/react/style.css'

export function Viz() {
  // The component fills its container — give it a height
  return (
    <div style={{ width: '100%', height: 240 }}>
      <FFTVisualizer mode="local" bands={40} gradient="aurora" />
    </div>
  )
}

The browser prompts for microphone permission on mount. To capture tab or system audio instead of the mic, set audioSource="display".

Next.js & React Server Components

The component renders on the server (every browser API is touched inside useEffect), but it needs the browser to do anything — so it belongs in a client component:

'use client'

import { FFTVisualizer } from '@fft-visualizer/react'