> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velt.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Setup

<Steps>
  <Step title="Add the Velt Recorder Tool component">
    * Add the `Velt Recorder Tool` component wherever you want the recorder button to appear.
    * Set the `type` attribute of the `Velt Recorder Tool` component to one of the following:
      * `all`
      * `audio`
      * `video`
      * `screen`

    <Tabs>
      <Tab title="React / Next.js">
        ```js theme={null}
        <div className="toolbar">
          <VeltRecorderTool type='all' />
        </div>
        ```
      </Tab>

      <Tab title="HTML/ Other frameworks">
        ```html theme={null}
        <div className="toolbar">
          <velt-recorder-tool type='all'></velt-recorder-tool>
        </div>
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Add the Velt Recorder Control Panel component">
    * Add the `Velt Recorder Control Panel` component wherever you want the control panel to appear.
    * When a user clicks on the `Velt Recorder Tool` button, the `Velt Recorder Control Panel` component will show the recording preview with options to save, pause, or delete the recording.
    * Set the `mode` attribute on the `VeltRecorderControlPanel` component to either `floating` (default) or `thread`.

    To  learn more about `floating` or `thread` mode [read here](/async-collaboration/recorder/customize-behavior#mode).

    <Tabs>
      <Tab title="React / Next.js">
        ```js theme={null}
        <div className="toolbar">
          <VeltRecorderTool type='all' />
          <VeltRecorderControlPanel mode="thread" />
        </div>
        ```
      </Tab>

      <Tab title="HTML/ Other frameworks">
        ```html theme={null}
        <div className="toolbar">
          <velt-recorder-tool type='all'></velt-recorder-tool>
          <velt-recorder-control-panel mode="thread"></velt-recorder-control-panel>
        </div>
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Render recorded data in Velt Recorder Player">
    * After a user has finished recording, you will receive the recorded data in an event callback.
    * Add the `Velt Recorder Player` component with the `recorderId` from the event callback.
    * It displays the recorded data with controls such as pause, play, edit and delete.

    <Tabs>
      <Tab title="React / Next.js">
        ```js theme={null}
        const recorderAddEvent = useRecorderAddHandler();
        const [recorderId, setRecorderId] = useState(null);
        useEffect(() => {
          setRecorderId(recorderAddEvent.id);
        }, [recorderAddEvent]);

        <div className="video-player">
          {recorderId && <VeltRecorderPlayer recorderId={recorderId} />}
        </div>
        ```
      </Tab>

      <Tab title="HTML/ Other frameworks">
        ```js theme={null}
        const recorderElement = Velt.getRecorderElement();
        recorderElement.onRecordedData().subscribe((recorderAddEvent) => {
          setRecorderId(recorderAddEvent.id);
        });
        ```

        ```html theme={null}
        <div className="video-player">
          <velt-recorder-player recorderId="RECORDER_ID"></velt-recorder-player>
        </div>
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Enable Recording Editor (optional)">
    * Recording Editor is currently in beta and is not enabled by default.
    * It is only available for video and screen recordings.
    * It has the following default keyboard shortcuts:
      * `s`: Split the video at the selected frame.
      * `d`, `delete`, or `backspace`: Delete the selected video section.
      * `space`: Toggle video play/pause.

    <Tabs>
      <Tab title="React / Next.js">
        ```js theme={null}
        const recorderElement = client.getRecorderElement();
        recorderElement.enableVideoEditor();
        ```
      </Tab>

      <Tab title="HTML/ Other frameworks">
        ```js theme={null}
        const recorderElement = Velt.getRecorderElement();
        recorderElement.enableVideoEditor();
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Embed Velt Video Editor (optional)">
    * Embed the `Velt Video Editor` standalone component directly into your application.
    * It can be used to view and edit video recordings.
    * You can initialize the editor with a video from a URL, a Blob, or by using a `recorderId`.

    <Tabs>
      <Tab title="React / Next.js">
        ```jsx theme={null}
        <VeltVideoEditor
        	blob={blob}
            url="videourl.mp4"
            darkMode={true}
            variant="xyz"
            recorderId="zK3iEAfvs1Htu3QYPy5S"
        />
        ```
      </Tab>

      <Tab title="Other Frameworks">
        ```html theme={null}
        <velt-video-editor
            blob="blob"
            url="videourl.mp4"
            recorder-id="zK3iEAfvs1Htu3QYPy5S"
            dark-mode="true"
            variant="xyz"
        ></velt-video-editor>
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

<RequestExample>
  ```js React / Next.js theme={null}
  import { VeltRecorderTool, VeltRecorderControlPanel, VeltRecorderPlayer } from '@veltdev/react'

  function TaskInputBox() {
      return (
        <div className="toolbar">
          <VeltRecorderTool type='all' />
          <VeltRecorderControlPanel mode="floating" />
        </div>
        <div className="video-player">
          <VeltRecorderPlayer recorderId={RECORDER_ID} />
        </div>
      )
  }
  ```

  ```html HTML theme={null}
  <div>
        <div class="toolbar"> 
          <velt-recorder-tool type='all'></velt-recorder-tool>
          <velt-recorder-control-panel mode="floating"></velt-recorder-control-panel>
        </div>
        <div class="video-player">
          <velt-recorder-player recorderId="RECORDER_ID"></velt-recorder-player>
        </div>
  </div>
  ```
</RequestExample>