Setup Videos

RVE ships with a built-in Pexels video adaptor. It works through a proxy pattern. Your server holds the API key, the editor calls your local routes, never the Pexels API directly.

Why a proxy?

The editor runs in the browser. If you called the Pexels API directly from the client, your API key would be exposed in network requests for anyone to steal. By routing through your own server, the key stays secret and never leaves your backend.

How it works

Editor UI  →  /api/videos/search?q=...   →  Your server  →  api.pexels.com

The adaptor is included in the default video adaptors automatically. You just need to set up one server-side proxy route.

Step 1: Get a Pexels API key

PEXELS_API_KEY=your-api-key-here

If you've already set up PEXELS_API_KEY for image search, you can reuse the same key.

Step 2: Create the search proxy route

Create app/api/videos/search/route.ts:

import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  const apiKey = process.env.PEXELS_API_KEY;
  if (!apiKey) {
    return NextResponse.json({ error: 'API key not configured' }, { status: 500 });
  }

  const { searchParams } = new URL(request.url);
  const query = searchParams.get('q') || '';
  const page = searchParams.get('page') || '1';
  const perPage = searchParams.get('per_page') || '20';

  const response = await fetch(
    `https://api.pexels.com/videos/search?query=${encodeURIComponent(query)}&page=${page}&per_page=${perPage}`,
    {
      headers: { Authorization: apiKey },
    }
  );

  if (!response.ok) {
    return NextResponse.json(
      { error: `API error: ${response.status}` },
      { status: response.status }
    );
  }

  return NextResponse.json(await response.json());
}

Step 3: That's it

The default video adaptors already include Pexels. When you pass no video key in your adaptors prop, RVE uses it automatically. The videos panel will show up in the editor sidebar with search and pagination.

If you're already passing custom adaptors, the Pexels video adaptor is available as a named export:

import { createPexelsVideoAdaptor } from '@reactvideoeditor/react-video-editor/adaptors/pexels-video-adaptor';

<ReactVideoEditor
  adaptors={{
    video: [createPexelsVideoAdaptor('your-pexels-api-key')],
    // ...other adaptors
  }}
/>

The built-in createPexelsVideoAdaptor calls the Pexels API directly from the browser. This exposes your API key to end users. Only use this for local development or internal tools.

Multiple adapters

You can pass multiple video adapters. The editor searches all of them in parallel and merges the results.

<ReactVideoEditor
  adaptors={{
    video: [
      createMyPexelsAdapter(),
      createMyShutterstockAdapter(),
      createMyInternalCDNAdapter(),
    ],
  }}
/>

Users can filter results by source using the tabs that appear above the video grid.