Watermark and attribution

The watermark prop adds a watermark to the editor player and to browser exports. The watermark is off by default. If you turn it on, the watermark is the top layer, so it appears above all other content.

Licence rules

Your SDK plan determines if you can remove or replace the RVE watermark:

• Hobby: For non-commercial use only. You must show the default RVE watermark on all exports. The watermark is off by default, so set watermark={true}. Do not remove, replace, hide, or obscure it.
• Commercial: For commercial products and client work. You can remove the RVE watermark or replace it with your own watermark.
• Enterprise: Your agreement defines your attribution rules. Unless your agreement says otherwise, you can remove or replace the RVE watermark.

The SDK makes the watermark prop available for product configuration. This technical option does not change the terms of your licence. See the RVE SDK plans if you need commercial use or watermark-free exports.

Quick Start

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

// Default watermark (RVE badge). Hobby plans must use this.
<ReactVideoEditor projectId="my-project" watermark={true} />

// Custom watermark (Commercial and Enterprise plans)
<ReactVideoEditor
  projectId="my-project"
  watermark={{ src: '/your-logo.png' }}
/>

// No watermark (Commercial and Enterprise plans). This is the default.
<ReactVideoEditor projectId="my-project" />

Configuration

The watermark prop accepts three value shapes:

Default Watermark

Pass true to show the built-in RVE logo and text badge in the bottom-right corner. The badge has an opacity of 0.7 and a padding of 2.5% from the edge. The badge size changes with the aspect ratio, so it looks the same at 16:9, 1:1, 9:16, and other ratios.

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

Custom Watermark

Commercial and Enterprise customers can pass an object with a src to use their own image. Optional fields control the position, size, opacity, and padding.

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

No Watermark

Commercial and Enterprise customers can omit the prop or pass false. Then the editor and the exports show no watermark.

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

Cloud renders

The editor player and browser exports draw the watermark. The editor does not send the watermark value to a cloud renderer in inputProps. If you use a cloud renderer and need a watermark, add it in your render composition.

Conditional Watermarks

Commercial and Enterprise customers can use the watermark in their own product plans. For example, you can keep a watermark on free exports and remove it for paid users:

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

Commercial and Enterprise customers can combine the watermark with feature overrides. This example adds a watermark to free exports and adds upgrade prompts to 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 | string; // default '2.5%'
    };