Installation

Choose the package that matches your project's needs. All packages are published to npm and can be installed with your preferred package manager.

Choose Your Package

React Installation

For React applications, install the React package which includes pre-built components and hooks:

npm install @vidtreo/recorder-react @vidtreo/recorder

yarn add @vidtreo/recorder-react @vidtreo/recorder

pnpm add @vidtreo/recorder-react @vidtreo/recorder

bun add @vidtreo/recorder-react @vidtreo/recorder

Web Component Installation

For framework-agnostic usage, install the Web Component package:

npm install @vidtreo/recorder-wc

yarn add @vidtreo/recorder-wc

pnpm add @vidtreo/recorder-wc

bun add @vidtreo/recorder-wc

CDN Usage

You can also load the Web Component directly from a CDN without any build step:

<script type="module" src="https://cdn.jsdelivr.net/npm/@vidtreo/recorder-wc@latest/dist/vidtreo-recorder.js"></script>

Or with a specific version:

<script type="module" src="https://cdn.jsdelivr.net/npm/@vidtreo/recorder-wc@1.0.5/dist/vidtreo-recorder.js"></script>

Core SDK Installation

For complete control over the recording experience, install the core SDK:

npm install @vidtreo/recorder

yarn add @vidtreo/recorder

pnpm add @vidtreo/recorder

bun add @vidtreo/recorder

TypeScript Support

All VIDTREO packages include TypeScript definitions out of the box. No additional @types packages are required.

import type {
  VidtreoRecorderConfig,
  RecordingState,
  SourceType
} from '@vidtreo/recorder';

Environment Setup

Vite Projects

Add your API key to .env:

VITE_VIDTREO_API_KEY=your-api-key

Next.js Projects

For server-side rendering, use the non-prefixed variable:

VIDTREO_API_KEY=your-api-key

Verify Installation

After installation, verify everything works by importing the package:

// React
import { VidtreoRecorder } from '@vidtreo/recorder-react';

// Web Component
import '@vidtreo/recorder-wc';

// Core SDK
import { VidtreoRecorder } from '@vidtreo/recorder';

Next Steps

• Quick Start — Record your first video
• Authentication — Set up your API key
• React Integration — Detailed React guide