$npx -y skills add remotion-dev/remotion --skill visual-modeGuidance for working on Remotion Studio Visual Mode, sequence identity, node paths, symbolicated stacks, override IDs, and hot reload behavior. Use when implementing or debugging visual editing of Sequences.
| 1 | Visual Mode is a feature in Remotion Studio that allows one to visually edit Sequences. |
| 2 | |
| 3 | I've made the following observations: |
| 4 | |
| 5 | ## Fields |
| 6 | |
| 7 | - overrideId -> does keep the identity the same of a sequence, even if the file / line / column changes |
| 8 | - Sequence `stack` -> changes on hot reload. shared by multiple sequences which have different overrideIds |
| 9 | - Sequence file, line, column (symbolicated stack) -> does not change, but needs to be calculated asyn |
| 10 | - `nodePath` -> same identity, even if line, stack and overrideId changes. async |
| 11 | |
| 12 | nodePath + index is ideal way to keep track of the expanded state. that’s the end goal. |
| 13 | |
| 14 | Once nodePath is mapped to `overrideId`, it doesn’t change otherwise component would remount and overrideId works change. |
| 15 | |
| 16 | If the same `stack` is found already used by another sequence, we re-use the `overrideId`. |
| 17 | |
| 18 | `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. |
| 19 | |
| 20 | We should only fetch the nodepath for every stack once |
| 21 | |
| 22 | different unsymbolicated stacks could lead to the same symbolicated stack, because of fast refresh |
| 23 | |
| 24 | unsymbolicated to symbolicated stack does never change because if it does, it is a different stack due to fast refresh |