DSSSP: React Audio Equalizer and Filter Visualization

Description:

DSSSP is a React componentfor editable audio filter graphs. You can inspect filter responses in an SVG graph and change filter values through graph controls.

Use it in a React application for a parametric EQ, crossover editor, or DAW-style filter view. The graph primitives read filter data from the application, while the app can keep its form controls and editing state alongside that data.

Preview

Features

Draws a logarithmic frequency-response graph with a dB gain grid.
Adds drag-and-drop and mouse wheel control for filter gain, frequency, and Q values.
Renders individual biquad responses and the summed CompositeCurve.
Supports peaking, low and high shelf, low and high pass, band-pass, notch, and gain filters.
Animates transitions between filter curves through animate, easing, and duration props.
Includes a package font entry and theme controls for the graph.

How to use it

Install

Install DSSSP with npm.

npm install dsssp

Render a filter graph

Pass a typed GraphFilter array to the curve components inside FrequencyResponseGraph. Import the package font entry once with the graph setup. Keep this array in application state when form controls edit frequency, gain, or Q. Render each object through FilterCurve and pass the full array to CompositeCurve.

import {
  CompositeCurve,
  FilterCurve,
  FrequencyResponseGraph,
  type GraphFilter,
} from "dsssp";
import "dsssp/font";
const filters: GraphFilter[] = [
  { freq: 400, gain: 6, q: 1, type: "PEAK" },
  { freq: 600, gain: -8, q: 3, type: "PEAK" },
  { freq: 1200, gain: 2, q: 0.7, type: "HIGHSHELF2" },
];
export function EqualizerGraph() {
  return (
    <FrequencyResponseGraph width={800} height={480}>
      <FilterCurve filter={filters[0]} color="#FF9966" />
      <FilterCurve filter={filters[1]} color="#6699FF" />
      <FilterCurve filter={filters[2]} color="#66FF66" />
      <CompositeCurve filters={filters} />
    </FrequencyResponseGraph>
  );
}

Build a reusable filter editor

Each graph primitive receives filter data. An editor can place form controls beside the SVG, update one GraphFilter object, and render the updated array through FilterCurve and CompositeCurve.

Use FilterPoint when the graph needs a draggable control point, FilterGradient for a filled area under a response, and PointerTracker for a cursor-following readout. FrequencyResponseCurve renders a precomputed magnitude array when the curve data comes from another DSP calculation.

Available components

Component	Role
`FrequencyResponseGraph`	SVG container and shared graph context for scale, theme, and dimensions.
`FilterCurve`	Response curve for one filter.
`CompositeCurve`	Summed response of the filter array.
`FilterPoint`	Draggable point for a filter’s frequency, gain, and Q.
`FilterGradient`	Gradient fill below a response curve.
`FilterIcon`	Filter-type icon glyph.
`FrequencyResponseCurve`	Curve renderer for a precomputed magnitude array.
`PointerTracker`	Cursor-following crosshair readout.

Filter data and API reference

The quick-start data model uses four fields for each filter. The graph accepts width and height; FilterCurve uses filter and color; CompositeCurve uses filters.

Field	Role
`freq`	Filter frequency value.
`gain`	Filter gain value.
`q`	Filter Q value.
`type`	Filter type identifier such as `PEAK` or `HIGHSHELF2`.

ReactScript