skills.rest
remotion-dev
remotion-devOFFICIAL
Explore all skills by this author →
Website𝕏@remotionGitHub

visual-mode

Guide implementation of Remotion Studio Visual Mode sequence editing and identity tracking.

57.9k|4.4k|Updated Jun 23, 2020
Search Tags:#hot-reload#Remotion#Studio#visual-mode#sequence-identity#overrideid#nodepath
One-click install
npx skills add https://github.com/remotion-dev/remotion --skill visual-mode
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-mode
Source: https://github.com/remotion-dev/remotion/tree/main/.agents/skills/visual-mode
Command: npx skills add https://github.com/remotion-dev/remotion --skill visual-mode

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers working on Remotion Studio's Visual Mode need a consistent mental model for how Sequences are identified across hot reloads, file changes, and fast refresh cycles. Without this guidance, components remount unexpectedly and expanded state is lost.

Core Features & Use Cases

  • Identity Tracking: Explains how overrideId, nodePath, symbolicated stacks, and unsymbolicated stacks relate to Sequence identity.
  • Hot Reload Behavior: Documents which fields change on hot reload versus which remain stable across file edits.
  • Stack Reuse Logic: Describes when sequences share stacks and how overrideId is reused to prevent remounts.
  • Studio API Parity: Reminds contributors to register new Studio API routes in the Browser Studio parity checklist.

Quick Start

Use the visual-mode skill when implementing or debugging visual editing of Sequences in Remotion Studio.

Frequently Asked Questions about visual-mode

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I keep Sequence identity stable across hot reloads in Remotion Studio?▼

Use `overrideId` to preserve identity across file, line, and column changes. Combine `nodePath` with index to track expanded state, since `nodePath` remains stable even when the stack and `overrideId` change.

What is the difference between symbolicated and unsymbolicated stacks in Visual Mode?▼

Unsymbolicated stacks change on hot reload and can map to the same symbolicated stack due to fast refresh. The symbolicated stack is calculated asynchronously and remains stable for a given source location.

When should I reuse an overrideId for a Sequence in Remotion?▼

Reuse an `overrideId` when the same unsymbolicated stack is already used by another sequence. This prevents component remounts and preserves visual editing state across renders.

Why does nodePath need to be fetched asynchronously for every stack?▼

`nodePath` is computed asynchronously and can theoretically change on every file edit. Fetching it once per unique stack avoids redundant work while keeping identity tracking accurate.

Do I need to register new Studio API routes in a checklist?▼

Yes. Add every new Studio API route to the Browser Studio parity checklist in issue #9807, even if the route is intentionally server-only, in the same change that introduces it.

Related Skills

Explore More Software Engineering Skills→
DaleSeoDaleSeo
4

bun-dev-server

Set up a Bun development server with HMR and React Fast Refresh.

Community
Intermediate
CraftOS-devCraftOS-dev
375

remotion-video-toolkit

Create and render videos programmatically with Remotion and React.

Community
Advanced
counterfactcounterfact
169

counterfact-runtime-architecture

Evolve Counterfact runtime internals while preserving module boundaries and hot reload semantics.

Official
Intermediate
zhangdszqzhangdszq
1

remotion-video

Compose React components to create videos with animations, captions, and 3D scenes.

Community
Advanced