Live Code Split
An editor and its rendered output side by side.
CompositionAdvanced
live-code-split30fps · 960×540
Install
$ npx remotion-ui@latest add live-code-splitThe file is written on the left. The moment its JSX finishes typing, the pane on the right wakes up and starts rendering the clip that code describes, then replays it on a loop with a playhead running under it, the way a preview player does.
previewAt is the frame the pane goes live. It defaults to the frame the sample
code's JSX lands on, so change it whenever you pass your own code.
1920×1080 code editor then live device preview.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/compositions/live-code-split- Use when: complete video templates that can be customized as source.
- Customize: code, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { LiveCodeSplit } from "@/compositions/live-code-split";
<LiveCodeSplit code={sourceCode} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| code | string | - | Code reveal content. |