Introduction

What is Waveform Renderer?

Waveform Renderer is a specialized library focused exclusively on waveform visualization. Unlike full-featured audio libraries, it keeps things lean and efficient while embracing modern web standards.

Key characteristics:

• Pure rendering focus – No audio playback, only visualization
• Canvas-based – Hardware-accelerated rendering with smooth animations
• TypeScript-first – Built from the ground up with type safety
• Zero dependencies – Lightweight and fast to load

---

Key Benefits

⚡ Performance First

• Intelligent caching to avoid unnecessary re-renders
• Optimized algorithms for large audio datasets
• Smart canvas management with pixel ratio handling
• Frame-rate–friendly animations for smooth playback

💻 Developer Experience

• Full TypeScript support with complete type definitions
• Intuitive, easy-to-learn API
• Clear documentation with practical examples
• 200+ unit tests ensuring reliability

🎨 Highly Customizable

• Full control over visual appearance
• Advanced customization via render hooks
• Support for custom renderers to fit unique needs
• Responsive design with automatic resizing

---

When to Use Waveform Renderer

Choose Waveform Renderer if you need:

• Audio visualization in music players or audio editors
• Waveform displays for podcasts and voice recordings
• Interactive audio UIs with seek functionality
• Custom visualizations tailored to your design system
• Performance-critical solutions where speed is essential

---

Architecture Overview

The library is built on a modular architecture:

• Renderer – Core component managing the canvas and interactions
• RenderingEngine – Handles drawing and performance optimizations
• Hooks system – Provides customization points for developers

---

✅ Verification

After installation, you can quickly verify that Waveform Renderer is working with a minimal example:

import { WaveformRenderer } from "waveform-renderer";

// Create a canvas element
const canvas = document.createElement("canvas");
canvas.width = 600;
canvas.height = 200;
document.body.appendChild(canvas);

// Example mock peak data
const mockPeaks = new Array(200).fill(0).map((_, i) => Math.sin(i / 10));

// Initialize the renderer
const renderer = new WaveformRenderer(canvas, mockPeaks, {
  color: "#3b82f6",
});

// You should now see a simple waveform on the canvas 🎉

If the waveform appears, your setup is complete.

---

🚀 Next Steps

Now that you’ve confirmed your installation works, continue with:

• Getting Started → Learn the basics of setup and your first visualization in the quickstart guide.
• Installation Options → Explore advanced installation details including TypeScript configuration and CDN usage.
• API Reference → Dive into the full API documentation to explore configuration, events, and customization.