Introduction

AudioUI is a React component library designed for building user interfaces in audio and MIDI applications. It provides a set of components optimized for the performance and interaction patterns required by music software, digital audio workstations (DAWs), audio plugins with web UIs, and other audio-centric applications.

Design Philosophy

AudioUI is built around core principles that address the unique challenges of audio software development:

Performance First

Audio applications have strict performance requirements. Components are optimized for minimal re-renders and low-latency interactions to ensure the UI remains responsive, even under heavy load.

Hybrid Architecture

The library provides both opinionated components for rapid development and non-opinionated primitives for deep customization:

• Opinionated Components: Ready-to-use components like Knob, Slider, Button, CycleButton, and Keys with carefully designed APIs, multiple visual variants, and sensible defaults. These components are based on thorough observation of existing audio apps and plugins, built with the intent of covering 90% of the needs of most audio app and plugin developers. They are themable using a ThemeManager, can be fine-tuned using styles and props, and provide several variants per component to match different visual styles.
• Non-Opinionated Components: Generic control components, SVG primitives, and base building blocks that enable full customization. Ideal for creating unique visual designs that match your brand or existing plugin aesthetics. The customization page contains multiple examples of totally customized components built with these primitives, and its source code is available for reference.

Universal Access

AudioUI is designed from the ground up to be fully accessible with ARIA support and keyboard navigation, and mobile-ready with responsive, touch-optimized interactions.

Developer Experience

The library is written entirely in TypeScript for type safety and provides a flexible theming system through a ThemeManager. The theme system currently allows you to define a primary color and a roundness attribute, with more theme options planned for the 1.0 release (including glowness, reflectiveness, and more). For an overview of theming on vector components, see Theming Features in the Vector introduction. The architecture separates framework-agnostic core logic from React-specific implementations, enabling potential support for other frameworks in the future.

Project Status

Developer Preview — AudioUI is currently in active development. The core components and APIs are functional and ready for use, but the library is still evolving.

Current Status:

• Core component APIs (Knob, Slider, Button, CycleButton, Keys) are stable and production-ready
• Comprehensive audio parameters model with support for Continuous, Discrete, and Boolean controls
• Generic film strip and bitmap image components for each type of audio parameter
• Comprehensive interaction system for each type of parameter (drag, wheel, keyboard)
• Layout system with adaptive sizing
• Theming and customization system with SVG primitives and base components
• Built-in support for dark and light mode
• Ready for mobile devices (responsive, touch ready)

In Progress:

• Additional visual variants for CycleButton and Button (Knob and Slider already have multiple variants available)
• Size system improvements
• Documentation expansion

Planned for 1.0:

• Additional components: XY Pad, Pitch/Mod Wheels and Levers, and an Icon library dedicated to audio and MIDI apps and plugins
• Enhanced theme system with glowness, reflectiveness, and more visual attributes

As a Developer Preview release, breaking changes may occur as we refine the API and architecture. We recommend pinning to specific versions for production use.

Core Components

AudioUI provides a range of components essential for building audio applications:

Built-in Controls

• Knob: A versatile rotary knob for parameter control with multiple visual variants (abstract, simplest, plainCap, iconCap)
• Slider: A linear slider for horizontal or vertical adjustments with multiple visual variants (abstract, trackless, trackfull, stripless)
• Button: A customizable button with styles suited for audio interfaces, supporting both toggle and momentary modes. Additional variants coming in future releases.
• CycleButton: A discrete control for cycling through a set of options with multiple visual variants. Additional variants coming in future releases.

Device Components

• Keys: A responsive and interactive piano keyboard component

Raster Components

• FilmStrip Controls: Bitmap sprite sheet-based controls for industry-standard control representation
• Image-Based Controls: Image-based knobs and switches for custom visual designs

Primitives

• Control Primitives: Low-level control components for building custom controls
• SVG Primitives: SVG view primitives for composing custom radial and linear controls

Architecture

AudioUI is organized as a monorepo with a clear separation between framework-agnostic core logic and framework-specific implementations:

• @cutoff/audio-ui-core: Framework-agnostic package containing all business logic, models, controllers, utilities, and styles. Can be used by any framework implementation or in non-framework contexts.

• @cutoff/audio-ui-react: The React component library implementation, published to npm. Provides React components, hooks, and React-specific adapters that wrap the framework-agnostic core.

This architecture enables potential implementations for other frameworks (Solid, Vue, etc.) that would share the same core logic.

Resources

• Playground: Try AudioUI components live, explore examples, and see customization patterns at playground.cutoff.dev. The playground source code is available and contains multiple examples, including a dedicated customization page with totally customized components built with AudioUI primitives.
• Community: Join our Discord server for discussions, general questions, and support. Discussions are preferred in Discord channels (general, support, etc.).
• Support: Create support issues in the GitHub repository Issues
• Wishlist: A dedicated wishlist channel is available in the Cutoff Discord, allowing you to create feature requests and vote for the most wanted features
• Repository: GitHub

Next Steps

Ready to get started? Check out the Installation guide to set up AudioUI in your project, or jump to the Quick Start Guide for a hands-on introduction.