> ## Documentation Index > Fetch the complete documentation index at: https://velt.dev/docs/llms.txt > Use this file to discover all available pages before exploring further. # Recorder & Transcription > Customize Velt recorder, playback, video, and transcription surfaces with supported options. Async audio/video/screen recording: a record tool, a control panel (while recording), a player (playback), plus subtitles & a transcript panel. **The deepest wireframe surface in the SDK** (a very large slot tree). All four layers apply, but the wireframe variables are **flat-config** ([what this means](https://velt.dev/docs/ui-customization/template-variables.md#which-name-form-to-use)): read them as `{componentConfig.}`. ## Components **Full examples:** the per-component recorder pages have complete tabbed code examples and screenshots: [Recorder tool](https://velt.dev/docs/ui-customization/features/async/recorder/recorder-tool.md), [Control panel](https://velt.dev/docs/ui-customization/features/async/recorder/control-panel.md), [Recorder player](https://velt.dev/docs/ui-customization/features/async/recorder/recorder-player.md), [Expanded player](https://velt.dev/docs/ui-customization/features/async/recorder/recorder-player-expanded.md), [Preview steps dialog](https://velt.dev/docs/ui-customization/features/async/recorder/recording-preview-steps-dialog.md), [Media source settings](https://velt.dev/docs/ui-customization/features/async/recorder/media-source-settings.md), [Subtitles](https://velt.dev/docs/ui-customization/features/async/recorder/subtitles.md), [Transcription](https://velt.dev/docs/ui-customization/features/async/recorder/transcription.md), and [Recorder wireframe variables](https://velt.dev/docs/ui-customization/features/async/recorder/wireframe-variables.md). | | Primitive | Wireframe | | - | - | - | | Record button | `VeltRecorderTool` | `VeltRecorderAllToolWireframe`, `VeltRecorderAllToolMenuWireframe`, `VeltRecorderAudio/Video/ScreenToolWireframe` | | Control panel (recording) | `VeltRecorderControlPanel` | `VeltRecorderControlPanelWireframe` | | Player (playback) | `VeltRecorderPlayer` | `VeltRecorderPlayerWireframe`, `VeltRecorderPlayerExpandedWireframe` | | Preview / settings dialogs | None | `VeltRecordingPreviewStepsDialogWireframe`, `VeltMediaSourceSettingsWireframe` | | Subtitles / transcript | `VeltSubtitles`, `VeltTranscription` | `VeltSubtitlesWireframe`, `VeltTranscriptionWireframe` | > **There is no `VeltRecorderAudioTool` / `…VideoTool` / `…ScreenTool` primitive.** You pick the recording type with `VeltRecorderTool`'s **`type` prop** (`'audio' | 'video' | 'screen' | 'all'`); the per-type tools exist only as wireframe slots. ## Config props Do this first. | Component | Props | | - | - | | Record tool (`VeltRecorderTool`) | `type` (audio/video/screen/all), `buttonLabel`, `recordingCountdown`, `darkMode`, `shadowDom`, `variant`, `maxLength`, `pictureInPicture` | | Control panel (`VeltRecorderControlPanel`) | `mode` (`'floating' \| 'thread'`), `recordingTranscription` (enable transcript capture), `videoEditor` / `autoOpenVideoEditor` / `retakeOnVideoEditor`, `settingsEmbedded`, `playVideoInFullScreen`, `panelId` | | Player (`VeltRecorderPlayer`) | `recorderId`, `summary` (show AI summary), `videoEditor`, `playbackOnPreviewClick`, `shadowDom` | | Subtitles / Transcription | `mode` (`'floating' \| 'embed'`; transcription also `'summaryMode'`), `visible`, `transcription`, `timeToRead`, `variant` | ## CSS: stateful classes (Override with `!important`; [why](https://velt.dev/docs/ui-customization/styling.md#override-classes).) | Class | Applied when | | - | - | | `velt-recorder-all-tool-container--active` / `--disabled` | Tool menu open / recording in progress; also `[attr.dark]` | | `recorder-panel`, `[class.audio/.video/.screen]` | Control panel, by recording type | | `velt-recorder-saving`, `…floating--container-collapsed` | Loading; collapsed floating panel | | `velt-video-player--controls`, `--toggle-button`, `--progress-bar`, `--time`, `.flip` | Expanded player (BEM); hover reveals `--controls-container` | | `velt-transcription-content-item--selected` | Active transcript segment | | `velt-transcription-button--disabled`, `velt-transcription-summary-mode` | Transcription states | | `velt-subtitles-button--disabled` | Subtitles button disabled | ## Wireframes: slot trees + tokens The trees are large (overview only); the major groups: * **`VeltRecorderControlPanelWireframe`** → `.FloatingMode` / `.ThreadMode`, each with `.Video` / `.Screen` / `.Waveform` / `.Loading` / `.Paused` and an **ActionBar** (`.Clear`, `.Stop`, `.Time`, `.Toggle`→`.Play`/`.Pause`, `.TypeIcon` \[prop `type`], `.Waveform`, `.Pip`). * **`VeltRecorderPlayerWireframe`** → `.AudioContainer` / `.VideoContainer`, each with toggle/time/seek/subtitles/transcription/copy-link/delete/avatar/name; video adds `.Timeline`→`.SeekBar`, `.FullScreenButton`, `.EditButton`. * **`VeltRecorderPlayerExpandedWireframe`** → `.Controls` (`.ToggleButton`, `.ProgressBar`, `.Time`/`.CurrentTime`/`.TotalTime`, `.VolumeButton`, `.SettingsButton`, `.SubtitleButton`→`.Icon`/`.Tooltip`, `.TranscriptionButton`, `.DeleteButton`) + `.Panel` / `.Subtitles` / `.Transcription` / `.MinimizeButton` / `.CopyLink`. * **`VeltRecordingPreviewStepsDialogWireframe`** → `.Video` / `.Audio`, each with `.MicButton`→`.On`/`.Off`, `.CameraButton`, `.StartRecording`, `.Timer`→`.Countdown`/`.Cancel`, `.Settings`, `.Waveform`. * **`VeltMediaSourceSettingsWireframe`** → `.Audio` / `.Video` → `.ToggleIcon`, `.SelectedLabel`, `.Options`→`.Item`→`.Icon`/`.Label`. * **`VeltTranscriptionWireframe`** → `.EmbedMode`(→`.Panel`) / `.FloatingMode`(→`.Button`/`.Tooltip`/`.Panel`); panel → `.CloseButton`, `.CopyLink`, `.Summary`→`.ExpandToggle`(`.On`/`.Off`)/`.Text`, `.Content`→`.Item`→`.Time`/`.Text`. * **`VeltSubtitlesWireframe`** → `.EmbedMode`(→`.Text`) / `.FloatingMode`(→`.Button`/`.Tooltip`/`.Panel`/`.CloseButton`/`.Text`). Only a couple of slots take input props: both are `type: 'audio'|'video'|'screen'` (the ActionBar `TypeIcon` and the preview-dialog `BottomPanel.Icon`). **Key tokens** (flat: use `{componentConfig.}`; shorthand collides for `disabled`/`darkMode`/`variant`/`screenSharingSupported`/`user`/`annotation` → use the full path; 🔑 = state flag you'll typically use in `velt-if` / `velt-class`): `recordingInProgress` 🔑, `mode` (`'floating'|'thread'`), `loading` 🔑, `isRecording` 🔑 (pause/play gate), `recordingType` (`'audio'|'video'|'screen'`), `recordingTranscriptionEnabled` 🔑, `isPlaying` 🔑, `transcriptionVisible` 🔑, `subtitlesVisible` 🔑, `highlightedTextIndex`, `vttFileTextArray`. Player callbacks you can bind to custom buttons: `copyLink`, `deleteRecorderAnnotation`, `onSeekToVideo`/`onSeekToAudio`, `onSubtitlesButtonClick`, `onTranscriptionButtonClick`. ## Headless hooks | Hook | Returns | | - | - | | `useRecordings(query?)` | Recordings list | | `useRecorderUtils()` | Imperative recorder element | | `useRecorderEventCallback(action)` | Events: `'recordingStarted' \| 'recordingStopped' \| 'recordingDone' \| …` | | `useGetRecording()` / `useDeleteRecording()` | Via the comment element | **Transcription/subtitles have no headless hooks**: they're surfaced through the recorder player config + the Transcription/Subtitles wireframe slots. ## Limitations * Tool variants (audio/video/screen/all) have **no standalone primitive**: use `VeltRecorderTool type` + wireframe slots. * **Transcription & subtitles are not independently embeddable** as public `` elements: their real customization surface is the **recorder player's Transcription/Subtitles slots**, and they have **no hooks**. * Recorder wireframe variables are **flat** (`{componentConfig.}`), and several names collide → use the full path. * The player's top level uses internal rendering; the wireframe slot decomposition starts one level in. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.