Templates

The Templates panel shows full video templates. A template is a set of tracks and items. When a user applies a template, the template replaces the tracks of the project. All template items are normal items, so users can edit them.

Built-in templates

The SDK has 16 built-in templates in 4 categories:

Category	Templates
Charts	Rings, Bar Race, Iso Bars, Peak
Explainers	Route Map Vertical, Timeline, World Dots, Orbit, Select, Iso Steps
Logo stings	Bloom, Tumble, Linework, Pour
Showcase	Lineup, Slider

Most templates are 16:9. Route Map Vertical and Iso Steps are 9:16.

The Templates panel

The panel shows one category tab for each category, plus an All tab. If there is only one category, the panel does not show the category tabs.
The All tab shows the templates under category headings, in this order: Charts, Explainers, Logo stings, Showcase. Other categories come after these. A template with no category shows under Other.
If two or more template adaptors give templates, the panel also shows one source tab for each adaptor.
Each card shows a preview. If the template has a thumbnail, the card shows the image. If not, the card shows one frame of the template. This frame is previewFrame, or the middle frame if previewFrame is not set.

Apply a template

Click a template card.
In the Apply Template dialog, click Apply Template.

When the user applies a template, the editor does these steps:

If the template has an aspectRatio, the editor changes the canvas to that aspect ratio.
The template tracks replace all tracks of the project.
The playhead goes to frame 0.
The editor clears the selection, so no item panel opens.
The timeline zooms so that the full template fits.

The change is one undo step. One Undo removes the template and restores the previous project.

Custom templates

To show your own templates, pass a TemplateAdaptor in adaptors.templates:

import { ReactVideoEditor } from '@reactvideoeditor/react-video-editor/react-video-editor';
import type { TemplateAdaptor, TemplateOverlay } from '@reactvideoeditor/react-video-editor/types';

const myTemplates: TemplateOverlay[] = [/* ... */];

const myTemplateAdaptor: TemplateAdaptor = {
  name: 'my-templates',
  displayName: 'My Templates',
  requiresAuth: false,
  async getTemplates(params = {}) {
    const { page = 1, perPage } = params;
    // If perPage is not set, return all templates.
    const size = perPage ?? myTemplates.length;
    const start = (page - 1) * size;
    const items = myTemplates.slice(start, start + size);
    return {
      items,
      totalCount: myTemplates.length,
      hasMore: start + size < myTemplates.length,
    };
  },
};

<ReactVideoEditor
  projectId="my-project"
  adaptors={{ templates: [myTemplateAdaptor] }}
/>

A custom adaptor replaces the built-in templates

If you set adaptors.templates, the editor uses only your adaptors. The built-in template adaptor is not exported, so you cannot add it to your array. A custom array removes the 16 built-in templates.

TemplateAdaptor

Field	Type	Description
`name`	`string`	A unique ID for the adaptor.
`displayName`	`string`	The name on the source tab.
`description`	`string`	Optional.
`requiresAuth`	`boolean`	Set to `false` if the adaptor needs no credentials.
`authFields`	`Array<{ key, label, type, required, placeholder? }>`	Optional. The credential fields.
`getTemplates(params?, config?)`	`Promise<{ items: TemplateOverlay[]; totalCount?: number; hasMore?: boolean }>`	Returns the templates. `params` can hold `searchQuery`, `page`, and `perPage`.

The panel calls getTemplates() one time, when it opens. It does not send page or perPage, and it does not load more pages. Your adaptor must return all templates when perPage is not set.

TemplateOverlay

Field	Type	Description
`id`	`string`	A unique ID.
`name`	`string`	The name on the card.
`description`	`string`	The text in the card tooltip.
`createdAt`, `updatedAt`	`string`	Dates.
`createdBy`	`{ name: string; avatar: string }`	The author.
`category`	`string`	The category tab and heading.
`tags`	`string[]`	Search tags.
`thumbnail`	`string`	Optional. An image URL for the card.
`previewFrame`	`number`	Optional. The frame that the card shows when there is no thumbnail. Pick a frame where the full template shows. Default: the middle frame.
`duration`	`number`	The length of the template, in frames.
`aspectRatio`	`AspectRatio`	Optional. The editor changes to this aspect ratio when the user applies the template.
`tracks`	`Track[]`	The tracks and items of the template. See Tracks and items.

Disable the panel

To remove the Templates panel from the sidebar, add 'template' to disabledPanels:

<ReactVideoEditor projectId="my-project" disabledPanels={['template']} />

Text templates

The Text panel has its own text templates in three sections: Titles, Social, and Labels. A text template adds one text item. To supply your own text templates, pass a TextAdaptor in adaptors.text.

Caption templates

The captions panel has caption style templates. The picker has the tabs Popular, Subtle, Bold, Playful, Elegant, and Creative. See Setup Captions.

Templates

On this page