Watermark

Add a watermark to your videos — use the default RVE badge, your own logo, or disable it entirely

The watermark prop controls whether a watermark is rendered on your videos. It supports three modes: the default RVE badge, a custom image, or no watermark at all. The watermark is composited as the topmost layer, so it always appears above all other content.

Quick Start

import { ReactVideoEditor } from '@reactvideoeditor/react-video-editor/react-video-editor';

// Default watermark (RVE badge)
<ReactVideoEditor projectId="my-project" />

// Custom watermark
<ReactVideoEditor
  projectId="my-project"
  watermark={{ src: '/your-logo.png' }}
/>

// No watermark
<ReactVideoEditor projectId="my-project" watermark={false} />

Configuration

The watermark prop accepts three value shapes:

Default Watermark

Pass true (or omit the prop) to render the built-in RVE logo and text badge in the bottom-right corner. The badge scales automatically to look consistent across aspect ratios (16:9, 1:1, 9:16, etc.).

<ReactVideoEditor projectId="my-project" watermark={true} />

Custom Watermark

Pass an object with a src to use your own image. Optional fields let you control placement, size, and opacity.

<ReactVideoEditor
  projectId="my-project"
  watermark={{
    src: '/your-logo.png',
    position: 'bottom-right',
    opacity: 0.5,
    scale: 1,
    padding: 20,
  }}
/>

Field	Type	Default	Description
`src`*	`string`	—	Path or URL to the watermark image
`position`	`WatermarkPosition`	`'bottom-right'`	Corner placement — `'top-left'`, `'top-right'`, `'bottom-left'`, or `'bottom-right'`
`opacity`	`number`	`0.5`	Opacity from `0` (invisible) to `1` (fully opaque)
`scale`	`number`	`1`	Scale multiplier for the watermark size
`padding`	`number`	`20`	Pixel padding from the edge of the video

No Watermark

Pass false for a clean export with no watermark overlay.

<ReactVideoEditor projectId="my-project" watermark={false} />

Conditional Watermarks

A common pattern is gating watermark removal behind a paid plan. Use reactive state to toggle the watermark based on the user's subscription:

import { ReactVideoEditor } from '@reactvideoeditor/react-video-editor/react-video-editor';

function VideoEditor({ user }) {
  return (
    <ReactVideoEditor
      projectId="my-project"
      watermark={user.plan === 'free'
        ? { src: '/your-logo.png' }
        : false
      }
    />
  );
}

Freemium Example

Combine the watermark with feature overrides to build a full freemium experience — watermark on free exports, upgrade prompts on premium features:

import { ReactVideoEditor } from '@reactvideoeditor/react-video-editor/react-video-editor';
import { ActionId } from '@reactvideoeditor/react-video-editor/types';

function VideoEditor({ user }) {
  const isFree = user.plan === 'free';

  return (
    <ReactVideoEditor
      projectId="my-project"
      watermark={isFree ? { src: '/your-logo.png' } : false}
      featureOverrides={isFree ? {
        [ActionId.GENERATE_CAPTIONS]: {
          badge: 'PRO',
          onUpgrade: () => showUpgradeModal(),
        },
      } : undefined}
    />
  );
}

Type Reference

type WatermarkPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';

type WatermarkConfig =
  | boolean
  | {
      src: string;
      position?: WatermarkPosition;
      opacity?: number;
      scale?: number;
      padding?: number;
    };

Watermark

On this page