Visual Mode
- 480 installs
- 55.5k repo stars
- Updated August 4, 2026
- remotion-dev/remotion
Implement or debug Remotion Studio Visual Mode identity for Sequences—overrideId, nodePath, stacks, and hot reload.
About
visual-mode is an agent skill for indie video-tool builders and Remotion Studio contributors who need Visual Mode to keep Sequences editable after hot reload without remounting the wrong node. It clarifies how overrideId preserves identity when source locations shift, while stack strings can change on reload and may be shared across sequences. nodePath is treated as the durable key paired with index for UI expanded state, with mapping flows from nodePath to overrideId so components do not remount unexpectedly. The skill also warns that unsymbolicated and symbolicated stacks can diverge under fast refresh, so identity logic must not assume one-to-one stack stability. Use it when you are implementing or debugging visual editing of Sequences in Studio rather than writing compositions alone. It spans build-heavy work and ship-time debugging when editor state drifts after saves or refresh.
- 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
Visual Mode by the numbers
- 480 all-time installs (skills.sh)
- +61 installs in the week ending Aug 4, 2026 (Skillselion tracking)
- Ranked #630 of 2,245 Frontend Development skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/remotion-dev/remotion --skill visual-modeAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 480 |
|---|---|
| repo stars | ★ 55.5k |
| Security audit | 1 / 1 scanners passed |
| Last updated | August 4, 2026 |
| Repository | remotion-dev/remotion ↗ |
What it does
Implement or debug Remotion Studio Visual Mode identity for Sequences—overrideId, nodePath, stacks, and hot reload.
Files
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
Related skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4kFAQ
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.