Editing and shortcuts

This page shows how users edit items on the canvas and on the timeline. It also lists all keyboard shortcuts of the editor.

Canvas editing

• Select — Click an item on the canvas.
• Move — Drag the item.
• Resize — Drag a handle on a side or a corner of the selected item.
• Rotate — Drag in the area just outside a corner of the selected item. The cursor changes to a curved arrow in this area. Hold Shift to snap the angle to 15° steps.
• Cancel — Press Escape during a move, a resize, or a rotation. The item goes back to its start position.

When a user resizes a rotated item, the opposite side or corner stays in the same place on screen.

On mobile, the corner rotate areas do not show. The item toolbar has a Rotate button in their place. Drag the button to turn the item.

If an item has keyframes, a move, a resize, or a rotation writes a keyframe at the playhead for each property that has keyframes.

Alignment guides

While a user moves or resizes an item, the editor shows alignment guides. The item snaps to the canvas centre, the canvas edges, and the edges and centres of other items. The showAlignmentGuides prop controls this feature. The default is true.

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

Item toolbar

A toolbar shows near the selected item on the canvas. It has these buttons, in this order:

Arrange menu

The Arrange menu changes the layer order of the item. The item keeps its timing.

• Bring to front — moves the item in front of all items that show at the same time.
• Bring forward — moves the item one layer forward.
• Send backward — moves the item one layer back.
• Send to back — moves the item behind all items that show at the same time.

The track order is the layer order, so the editor moves the item to a different track. If no track has space, the editor adds a new track. If a move changes nothing on the canvas, its menu entry is disabled. Audio and zoom items do not show as layers, so the Arrange actions do not apply to them.

The Arrange menu does not show on mobile (screens narrower than 768 px).

Timeline editing

Item menu

Right-click an item on the timeline to open its menu. The menu has Duplicate, Split at playhead, Delete, and the actions for the item type. For video items, the actions include these:

• Freeze Frame — holds the video frame at the playhead for 3 seconds. The editor pushes the rest of the clip and the later items on the same track to the right. If the playhead is not on the clip, the editor uses the nearest frame of the clip.
• Mute / Unmute
• Generate Captions
• Detach Audio

You can lock or label these actions with the featureOverrides prop. See Feature Overrides.

Split

Press S to split at the playhead:

• If one item is selected, the editor splits that item.
• If no item is selected, the editor splits all items under the playhead.

Snapping

The Snapping switch in the Settings panel turns timeline snapping on and off. Snapping is on by default.

Timeline height

The timeline opens with no more than 4 track rows. If the project has more tracks, the rows scroll in the timeline. Users can drag the top edge of the timeline to make it taller. The maximum number of rows depends on the track density:

Users set the track density in the Settings panel. The editor does not save the timeline height. The height resets when the editor opens.

Keyboard shortcuts

The shortcuts do not work while the focus is in a text field.

Users can see a list of shortcuts in Settings → Keyboard shortcuts.

Related

• Keyframes
• ReactVideoEditor props
• Feature Overrides