Catalog
The UI Kit publishes presenters, not Custom Elements. Pick a functional group below, then mount the presenter against any compatible Headless object, store, controller or binding. Each card links to the entry’s own page. The groups describe UI responsibilities; they do not change npm import paths. Presenters with no current Score or Audio Element consumer are independently usable.
Transport and navigation
Playback, seeking, visible ranges and selection through playlists or indexed rows.
@webmusic/ui/transportTransportAccessible play/pause, seek and elapsed-time controls backed by caller-owned state.Used by 2 elements@webmusic/ui/timelineTimelineA domain-neutral ruler with regions, loop, selection, playhead and optional seeking.Used by 1 element@webmusic/ui/minimapMinimapA DPR-aware overview canvas with a draggable and keyboard-accessible range brush.Mount with your own binding@webmusic/ui/playlistPlaylistPlaylist transport, track selection and per-entry loading or error state.Used by 1 element@webmusic/ui/track-listTrack listAn accessible index of named, keyboard-operable rows with one current item.Mount with your own binding
Parameters and modulation
Parameter editing, macro controls, envelopes, modulation and equalizer curves.
@webmusic/ui/parameterParameter rackAn accessible rotary-control rack with stable per-item input and node accessors.Used by 1 element@webmusic/ui/macroMacro controlsA macro control or compound macro rack with read-only destination values.Used by 1 element@webmusic/ui/envelopeEnvelopeAn accessible ADSR editor with pointer handles and equivalent range inputs.Used by 1 element@webmusic/ui/lfoLFOOscillator run, shape, rate and depth controls with a live phase waveform.Used by 1 element@webmusic/ui/eqEQAn equalizer response curve whose draggable bands commit through a structural binding.Used by 1 element
Mixing and capture
Channel mixing, realtime metering and record/play/export workflows.
@webmusic/ui/mixerMixerMaster and channel faders with optional mute, solo and transport commands.Used by 2 elements@webmusic/ui/meterMeterA self-driven level or spectrum meter that pulls per-frame data from its binding.Used by 2 elements@webmusic/ui/recorderRecorderRecord, playback and export controls with live input level and take status.Used by 2 elements
Note input
Piano, grid and chord surfaces with reusable musical input interaction.
Views and analysis
Pitch and harmony readouts, analytical reports and interactive signal inspection tools.
@webmusic/ui/level-analyzerLevel analyzerLive dBFS RMS and sample-peak history with hold, threshold, and freeze controls.Used by 1 element@webmusic/ui/spectrum-analyzerSpectrum analyzerLog-frequency spectrum with keyboard and pointer probing, freeze, and peak hold.Used by 1 element@webmusic/ui/oscilloscopeOscilloscopeTrigger-aligned waveform window with timebase, freeze and time-amplitude probe controls.Used by 1 element@webmusic/ui/transient-analyzerTransient analyzerRecent attack-strength and hit history with sensitivity, freeze and clear actions.Used by 1 element@webmusic/ui/analysisAnalysisOne-shot cards, timelines, summaries and a reusable analysis playhead controller.Used by 2 elements@webmusic/ui/pitchPitch surfacesKeyboard, staff and fretboard read-outs that press, spell and slide with their input.Used by 1 element@webmusic/ui/harmonyHarmony read-outsA conveyor, a nameplate, a ranked strip and a wheel that show an analysis happening rather than listing what it concluded.Used by 2 elements
Layout and feedback
Shared panels, rendering hosts, workbench shells and loading or failure feedback.
@webmusic/ui/panelSection panelA compound section-and-slot skeleton for composing specialized presenters.Used by 1 element@webmusic/ui/stageStageGeneric DOM and canvas stages with DPR, resize, animation and surface-slider lifecycles.Used by 4 elements@webmusic/ui/statusStatusA shared ready, loading, empty or error surface with appropriate live-region behavior.Used by 4 elements@webmusic/ui/workbenchAnalysis workbenchThe shell an analysis view sits in: a tablist, a stage, a rail of docks, a status bar, and one reading of the clock per frame handed to everything mounted inside it.Used by 2 elements
How Score and Audio Elements compose these presenters
These relationships show which presenter to reuse when replacing part of a Score or Audio Element. Declaration-only Elements have no visible UI, so the presenter column is not applicable to them.
Owns clocks, audio graphs, analysis sessions, view state and resource lifecycle. No DOM.
Owns tokens, accessible primitives, presenters and reusable DOM bindings. No domain resources.
The concrete Element class maps its own public API and directly composes the two layers.
22elements catalogued
21already composed
0partially composed
0need headless extraction
1behavior-only
21on published UI
ComposedThe Element class routes reusable domain state or algorithms through public Core/Headless APIs, while retaining only instance-specific orchestration.PartialA model, presenter or callback boundary exists, but the Element class still owns important state, resources or domain glue.Needs headless extractionThe element still couples its domain state or resource lifecycle to the visible UI and needs a reusable Headless owner.Behavior onlyThe element intentionally exposes behavior and lifecycle without a visible presenter.
Score · Play 6
| Web Component | Headless / model | UI Kit composition | Headless status | Published UI |
|---|---|---|---|---|
<score-player> | ScorePlayer / RackTransportController | @webmusic/ui transport · seek · preset/rack shell | Composed | Yes |
<score-rack-control> | Rack | @webmusic/ui mixer · master/member faders · labels | Composed | Yes |
<score-rack-part> | Rack member (score + Sound) | Declaration only; renders nothing — documented on the desk it belongs to | Behavior only | Not applicable |
<score-recorder> | ScoreRecorderSession + recordedNotesToScore | @webmusic/ui recorder · record/play/export · status | Composed | Yes |
<score-note-input> | note-input-model · piano/grid/chord/QWERTY pitch mapping | @webmusic/ui note surface · presenter-owned pointer/chord/QWERTY interaction | Composed | Yes |
<score-synth-panel> | LfoController + EqController + SynthPanelAudioGraph + parameter descriptors | @webmusic/ui section panel · parameter rack · macro rack · envelope · EQ · LFO | Composed | Yes |
Score · Analyze 2
| Web Component | Headless / model | UI Kit composition | Headless status | Published UI |
|---|---|---|---|---|
<score-live-chord-analysis> | LiveChordTracker + sounding chord spelling | @webmusic/ui harmony · current-chord interpretation | Composed | Yes |
<score-chord-analysis> | AnalysisSession + chord segmentation + key-relative probe | @webmusic/ui harmony · selectable harmonic lane | Composed | Yes |
Score · View 3
| Web Component | Headless / model | UI Kit composition | Headless status | Published UI |
|---|---|---|---|---|
<score-view> | createScoreView + createScoreMap + createPianoRollLayout + player binding | @webmusic/ui stage · timeline · five score surfaces | Composed | Yes |
<score-pitch-view> | ActiveNoteTracker + pitch projections + player binding | @webmusic/ui pitch · keyboard/staff/fretboard | Composed | Yes |
<score-sheet-view> | OSMD renderer binding + MusicXML serializer | @webmusic/ui stage · status; optional OSMD engraving surface | Composed | Yes |
Audio · Play 4
| Web Component | Headless / model | UI Kit composition | Headless status | Published UI |
|---|---|---|---|---|
<audio-player> | AudioPlayer + selected clip/queue/mix backend | @webmusic/ui transport · seek · time · status | Composed | Yes |
<audio-playlist> | AudioPlaylist | @webmusic/ui playlist · queue selection · per-entry state | Composed | Yes |
<audio-mixer> | AudioMixer | @webmusic/ui mixer · master/member strips · mute/solo | Composed | Yes |
<audio-recorder> | AudioRecorder | @webmusic/ui recorder · record · live meter · status | Composed | Yes |
Audio · Analyze 5
| Web Component | Headless / model | UI Kit composition | Headless status | Published UI |
|---|---|---|---|---|
<audio-level-analyzer> | createRealtimeAnalyzer + borrowed player analyser | @webmusic/ui level-analyzer · sampled dynamics · threshold · freeze | Composed | Yes |
<audio-meter> | AudioMeterController + owned/borrowed analyser | @webmusic/ui meter · quick level/peak/spectrum monitor | Composed | Yes |
<audio-oscilloscope> | createRealtimeAnalyzer + borrowed player analyser | @webmusic/ui oscilloscope · trigger · timebase · freeze · probe | Composed | Yes |
<audio-spectrum-analyzer> | createRealtimeAnalyzer + borrowed player analyser | @webmusic/ui spectrum-analyzer · log FFT · frequency probe · peak hold | Composed | Yes |
<audio-transient-analyzer> | createTransientDetector + borrowed player analyser | @webmusic/ui transient-analyzer · attack strength · threshold · freeze | Composed | Yes |
Audio · View 2
| Web Component | Headless / model | UI Kit composition | Headless status | Published UI |
|---|---|---|---|---|
<audio-view> | AudioTimeline + renderer binding | @webmusic/ui stage · SurfaceSlider · status; waveform/spectrogram/meter surface | Composed | Yes |
<audio-live-view> | LiveViewController + LiveScrollBuffer over a borrowed analyser | @webmusic/ui CanvasStage · RAF/DPR/status; live render adapter | Composed | Yes |