# Piano roll > The custom element of @audio-ui/elements: its attributes, its parts and a live preview. `` is a note editor placed inside an ``, which provides its length, zoom, grid and position. Its entry point also registers the timeline and piano elements. Notes are set through the `value` property as `{ id, pitch, start, length, velocity?, chance?, muted? }[]`, and the selection through the `selection` property. Rows, notes and velocity bars are generated from them: ## Usage {/* usage:start: written by `bun scripts/element-usage.ts --write` */} The styles read the theme's CSS variables, which [Styling](/docs/elements#styling) sets. **JavaScript** *With CSS* ```html ``` *With Tailwind* ```html ``` **Vue** *With CSS* ```vue ``` *With Tailwind* ```vue ``` **Svelte** *With CSS* ```svelte console.log(event.detail.value)}> ``` *With Tailwind* ```svelte console.log(event.detail.value)}> ``` **React** In React, the same control is the [PianoRoll](/docs/react/piano-roll) primitive of `@audio-ui/react`, with the same parts as React components and its value as props. {/* usage:end */} ## API reference ```bash npm install @audio-ui/elements ``` ```ts import "@audio-ui/elements/piano-roll"; ``` | Export | Kind | What it is | | --- | --- | --- | | `PIANO_ROLL_TAGS` | const | The names the piano roll's elements are registered under, frozen: a page cannot rename them by accident. | | `PianoRollElement` | class | The root of a note editor, placed inside an ``, which provides its length, zoom, grid and position. | | `PianoRollElementEventMap` | interface | The events a piano roll fires, as `addEventListener` types them. | | `PianoRollEventDetail` | interface | What a roll's `input` and `change` events carry, besides the roll itself as their target. | | `PianoRollGridElement` | class | The note surface: a focusable timeline lane with `role="group"`, with the rows stacked vertically. | | `PianoRollKeysElement` | class | Lays out the `` it contains on the roll's rows, low end at the bottom, and lights the sounding pitches. | | `PianoRollMarqueeElement` | class | The selection rectangle during a marquee drag. | | `PianoRollNoteElement` | class | A note, positioned at its start in timeline units and on its pitch's row. | | `PianoRollNoteHandleElement` | class | Resizes its note from its `edge` (`start` or `end`): the end changes the length, the start trims from the front with the end fixed. | | `PianoRollNotesElement` | class | Generates an `` per note in reading order (by start, then highest pitch first), which is also the tab order, from its `