Visual Mode
Implement or debug Remotion Studio Visual Mode identity for Sequences—overrideId, nodePath, stacks, and hot reload.
Install
npx skills add https://github.com/remotion-dev/remotion --skill visual-modeWhat is this skill?
- Documents overrideId as stable sequence identity across file, line, and column changes
- Explains stack vs nodePath vs symbolicated stack behavior under hot reload and fast refresh
- Recommends nodePath + index for expanded-state tracking as the end goal
- Notes reuse of overrideId when the same stack is already bound to another sequence
- Calls out async nodePath fetch and deduplicating fetches per stack
Adoption & trust: 104 installs on skills.sh; 49.4k GitHub stars; 1/1 security scanners passed (skills.sh audits).
Recommended Skills
Frontend Designanthropics/skills
Vercel React Best Practicesvercel-labs/agent-skills
Remotion Best Practicesremotion-dev/skills
Vercel Composition Patternsvercel-labs/agent-skills
Develop Userscriptsxixu-me/skills
Next Best Practicesvercel-labs/next-skills
Journey fit
Primary fit
Visual Mode is Studio UI engineering on the build shelf where frontend state and editor behavior are implemented. Frontend is primary because the skill covers React Studio editing, symbolicated stacks, and sequence mount identity—not render farm ops.
Common Questions / FAQ
Is Visual Mode safe to install?
skills.sh reports 1 of 1 security scanners passed. Review the Security Audits panel on this page before installing in production.
SKILL.md
READMESKILL.md - Visual Mode
Visual Mode is a feature in Remotion Studio that allows one to visually edit Sequences. I've made the following observations: ## Fields - overrideId -> does keep the identity the same of a sequence, even if the file / line / column changes - Sequence `stack` -> changes on hot reload. shared by multiple sequences which have different overrideIds - Sequence file, line, column (symbolicated stack) -> does not change, but needs to be calculated asyn - `nodePath` -> same identity, even if line, stack and overrideId changes. async nodePath + index is ideal way to keep track of the expanded state. that’s the end goal. Once nodePath is mapped to `overrideId`, it doesn’t change otherwise component would remount and overrideId works change. If the same `stack` is found already used by another sequence, we re-use the `overrideId`. `nodePath` to symbolicated stack could theoretically change on every file change. but multiple sequences can share the same stack and then they all have the same nodePath. We should only fetch the nodepath for every stack once different unsymbolicated stacks could lead to the same symbolicated stack, because of fast refresh unsymbolicated to symbolicated stack does never change because if it does, it is a different stack due to fast refresh