Setup Images

RVE ships with a built-in Pexels image 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/images/search?q=...   →  Your server  →  api.pexels.com

The adaptor is included in the default image 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

Step 2: Create the search proxy route

Create app/api/images/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/v1/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 image adaptors already include Pexels. When you pass no images key in your adaptors prop, RVE uses it automatically. The images panel will show up in the editor sidebar with search and pagination.

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

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

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

The built-in createPexelsImageAdaptor 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 image adapters. The editor searches all of them in parallel and merges the results.

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

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