---
title: "Installation"
description: "Install @fft-visualizer/core and render a spectrum onto a canvas — no framework required."
canonical_url: "https://www.fftvisualizer.com/core/installation"
---
# Installation

> Install @fft-visualizer/core and render a spectrum onto a canvas — no framework required.

`@fft-visualizer/core` is the framework-agnostic engine: a plain TypeScript class that renders
onto a `<canvas>` you provide. Use it directly in vanilla JS/TS, or as the foundation under a
framework wrapper like [`@fft-visualizer/vue`](https://www.fftvisualizer.com/vue/installation).

Prefer to poke at it first? The [live playground](https://demo.fftvisualizer.com/core/)
runs this exact package with every option exposed.

## Install

<code-group>

```bash [pnpm]
pnpm add @fft-visualizer/core
```

```bash [npm]
npm install @fft-visualizer/core
```

```bash [yarn]
yarn add @fft-visualizer/core
```

</code-group>

## Quick start

The fastest way to see something is **local mode** — capture the microphone and visualize it
entirely in the browser, no backend required. Give the class a `<canvas>` and an options
object:

```ts
import { FFTVisualizer } from '@fft-visualizer/core'

const canvas = document.querySelector('canvas')!
const viz = new FFTVisualizer(canvas, {
  mode: 'local',
  bands: 40,
  gradient: 'aurora'
})

// later, when you're done:
viz.destroy()
```

The visualizer sizes itself to the canvas's **parent element** and observes it for layout
changes, so give the container a height:

```html
<div style="width: 100%; height: 240px">
  <canvas></canvas>
</div>
```

Construction connects automatically (local mode prompts for microphone permission). See the
[API reference](https://www.fftvisualizer.com/core/api) for `connect()` / `disconnect()`, live option updates, events, and
teardown.

<note>

The Rust/WASM FFT processor is **lazy-loaded** — it's only fetched the first time you capture
audio locally (or use [`createWebSocketFft`](https://www.fftvisualizer.com/core/audio-engines)). Pure `websocket` /
`external` usage never downloads it.

</note>

## Data modes

`mode: 'local'` is one of three ways to feed the visualizer — see [Data modes](https://www.fftvisualizer.com/guide/data-modes)
for `websocket` (pre-computed FFT from a server) and `external` (your own magnitudes).


## Sitemap

See the full [sitemap](https://www.fftvisualizer.com/sitemap.md) for all pages.