Developer UI
Code Editor — editable Remotion component
A deterministic code window with line numbers, simple syntax coloring, highlights, and static, typed, or line-by-line reveal modes.
Component details
- Version
- 0.1.0
- License
- MIT
- Duration
- 3.5 seconds
- Dimensions
- 1920 × 1080
Prerequisite: Create a Remotion project
Agent Motion installs components into an existing Remotion project. If you are starting fresh, create a blank project first:
npx create-video --yes --blank my-video
Add editable source
Run this command from the root of your Remotion project. No separate Agent Motion CLI installation is required.
npx @agent-motion/cli add code-editor@0.1.0
Agent guidance
- Use static for supporting code, lines for explainers, and type only when the act of authoring code is part of the story.
- Import calculateCodeEditorDuration and pass the same code and reveal timing values used by the component.
- Highlight only the lines discussed by the narration and use one-based line numbers.
- Use Terminal Session instead when commands and their output are more important than source code.
- The syntax coloring is intentionally lightweight and dependency-free; use a dedicated highlighter only for language-perfect tokenization.