Component Preview
Interactive demonstration of the ChordPalette component
🎛️ Interactive Controls
Component Overview
Pre-defined chord library for quick chord selection
This interactive demo allows you to explore all the features and capabilities of the ChordPalette component. Use the controls above to modify the component's behavior and see the results in real-time.
API Reference
The ChordPalette component provides a comprehensive API for integration into your applications.
Properties: Configure the component with various properties to customize its behavior.
Methods: Programmatically control the component using built-in methods.
Events: Listen to component events to respond to user interactions and state changes.
Component Events
The ChordPalette component emits various events that you can listen to:
• Initialization: Fired when the component is ready for use
• Chord Selection: Fired when a chord is selected
• Playback Events: Fired when chords are played or stopped
View the Event Log tab to see real-time events as they occur.
Usage Examples
Here are some common ways to use the ChordPalette component in your projects:
Basic Usage:<chord-palette></chord-palette>
With Properties:<chord-palette instrument="guitar"></chord-palette>
Event Listeners:chordPalette.addEventListener('chord-selected', handleChordSelection);