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	Description
`ActionId.GENERATE_CAPTIONS`	AI caption generation from video/audio
`ActionId.DETACH_AUDIO`	Extract audio track from a video
`ActionId.TOGGLE_MUTE`	Mute/unmute a video or audio item

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 panel — next to the action heading (e.g. "Detach Audio" / "Auto Captions")
Context menu — next to the action label when right-clicking a timeline item
Buttons — locked actions remain clickable but route to your onUpgrade callback