Feature Overrides

Lock actions behind upgrade walls, show badges, and track usage with the featureOverrides prop

The featureOverrides prop lets you control access to specific editor actions. Use it to lock features behind an upgrade prompt, show badge labels like "PRO", or hook into actions for credit tracking.

By default, all actions are available. Only actions you explicitly list in featureOverrides are affected.

Quick Example

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

<ReactVideoEditor
  projectId="my-project"
  featureOverrides={{
    [ActionId.GENERATE_CAPTIONS]: {
      badge: 'PRO',
      onUpgrade: () => showUpgradeModal(),
    },
    [ActionId.DETACH_AUDIO]: {
      badge: 'PRO',
      onUpgrade: () => showUpgradeModal(),
    },
  }}
/>

This locks both AI actions behind a "PRO" badge. Clicking either calls your onUpgrade callback instead of running the action.

How It Works

Each entry in featureOverrides is keyed by an ActionId and accepts three optional fields:

Field	Type	Description
`badge`	`string`	Text shown as a chip next to the action (e.g. "PRO", "3 credits")
`onUpgrade`	`() => void`	If present, the action is locked. Clicking it calls this instead of running the action.
`onTrigger`	`() => void`	If present (without `onUpgrade`), fires before the action runs. Use for credit deduction or analytics.

Locked vs Tracked vs Free

// Locked — button shows badge, click calls onUpgrade
{
  badge: 'PRO',
  onUpgrade: () => showUpgradeModal()
}

// Tracked — action works normally, onTrigger fires first
{
  badge: '3 credits',
  onTrigger: () => deductCredit()
}

// Badge only — action works normally, just shows a label
{
  badge: 'AI'
}

// Not listed — completely free, no badge

Available Actions

ActionId	Value	Applies to	Description
`ActionId.GENERATE_CAPTIONS`	`'generate-captions'`	Video, audio	AI caption generation. The gate applies to the video AI panel, the timeline context menu, and the Generate Captions card in the sound AI panel.
`ActionId.DETACH_AUDIO`	`'detach-audio'`	Video	Moves the audio of a video to a new audio item
`ActionId.TOGGLE_MUTE`	`'toggle-mute'`	Video, audio	Mutes or unmutes the item
`ActionId.FREEZE_FRAME`	`'freeze-frame'`	Video	Holds the video frame at the playhead for 3 seconds. If the playhead is outside the clip, the editor uses the nearest frame of the clip.

Overrides do not hide actions

featureOverrides can lock, track, or label an action. It cannot hide an action or other editor controls.

Credits Example

Use reactive state to switch between locked and tracked based on the user's balance:

const { credits } = useCredits();

<ReactVideoEditor
  featureOverrides={{
    [ActionId.GENERATE_CAPTIONS]: credits <= 0
      ? {
          badge: 'No credits',
          onUpgrade: () => openBillingPage(),
        }
      : {
          badge: `${credits} credits`,
          onTrigger: () => deductCredit(),
        },
  }}
/>

Where Badges Appear

Badges render in three places automatically:

AI panels — next to the action heading (e.g. "Detach Audio" / "Auto Captions" for videos, "Generate Captions" for audio)
Context menu — next to the action label when right-clicking a timeline item
Buttons — locked actions remain clickable but route to your onUpgrade callback