# FFT Visualizer

> A high-performance, WebGL audio spectrum analyzer and FFT visualizer for the web — a framework-agnostic TypeScript core with Vue 3 and React components. Visualize a mic, tab/system audio, a WebSocket stream, or your own data, all on the GPU.

## Documentation Sets

- [FFT Visualizer — complete documentation](https://www.fftvisualizer.com/llms-full.txt): The full guide, Core API, and Vue/React wrapper docs in a single file.

## Docs

- [Introduction](https://www.fftvisualizer.com/raw/guide/introduction.md): What FFT Visualizer is, and why it renders differently from other audio visualizers.
- [How it works](https://www.fftvisualizer.com/raw/guide/how-it-works.md): The signal pipeline from raw audio to rendered bars — and where the FFT actually runs.
- [Data modes](https://www.fftvisualizer.com/raw/guide/data-modes.md): The three ways to get audio data into the visualizer — local, WebSocket, and external.
- [Options](https://www.fftvisualizer.com/raw/guide/options.md): The canonical option reference — every visualizer option, its type, default, and meaning.
- [Gradients](https://www.fftvisualizer.com/raw/guide/gradients.md): Color the bars with a built-in preset or your own CSS-color stops.
- [WebSocket protocol](https://www.fftvisualizer.com/raw/guide/websocket-protocol.md): The remote-FFT wire protocol the visualizer speaks in websocket mode, and the reference servers.
- [AI tools](https://www.fftvisualizer.com/raw/guide/ai-tools.md): Point Claude Code, Cursor or any MCP client at these docs so it answers from them instead of from memory.
- [Installation](https://www.fftvisualizer.com/raw/core/installation.md): Install @fft-visualizer/core and render a spectrum onto a canvas — no framework required.
- [API reference](https://www.fftvisualizer.com/raw/core/api.md): The FFTVisualizer class — constructor, getters, methods, events, and helpers.
- [Audio engines](https://www.fftvisualizer.com/raw/core/audio-engines.md): Standalone FFT pipelines — local capture, client-side FFT of a PCM stream, PCM decoding, and the raw WASM processor.
- [Installation](https://www.fftvisualizer.com/raw/vue/installation.md): Install the package and render your first spectrum in under a minute.
- [Props, events & methods](https://www.fftvisualizer.com/raw/vue/props.md): The Vue component API — props, emitted events, exposed methods, and slots.
- [Composables](https://www.fftvisualizer.com/raw/vue/composables.md): Standalone Vue composables that wrap the core audio engines as refs.
- [Nuxt](https://www.fftvisualizer.com/raw/vue/nuxt.md): Use the Vue component in a Nuxt app — client-only rendering, the stylesheet, and avoiding layout shift.
- [Installation](https://www.fftvisualizer.com/raw/react/installation.md): Install the package and render your first spectrum in under a minute.
- [Props, callbacks & ref](https://www.fftvisualizer.com/raw/react/props.md): The React component API — props, callback props, and the imperative handle.

## Landing

- [WebGL Audio Spectrum Analyzer for the Web](https://www.fftvisualizer.com/raw/index.md): A high-performance, WebGL audio spectrum analyzer and FFT visualizer for the web — a framework-agnostic TypeScript core with Vue 3 and React components. Visualize a mic, tab/system audio, a WebSocket stream, or your own data, all on the GPU.