Live Code Compilation

A split-screen where code is typed on the left and the right-side UI snaps to match in a single frame

Installation

$ pnpm dlx shadcn@latest add @remocn/live-code-compilation

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { LiveCodeCompilation } from "@/components/remocn/live-code-compilation";
 
const LiveCodeCompilationScene = () => (
  <LiveCodeCompilation accentColor="#3b82f6" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="LiveCodeCompilation"
    component={LiveCodeCompilationScene}
    durationInFrames={260}
    fps={30}
    width={1280}
    height={720}
  />
);

Props3

Prop	Type	Default
accentColor	string"#3b82f6" Color used for the JSX prop highlight, the HMR flash, and the default button background
speed	number1 Time multiplier applied as frame × speed. The typing schedule is a fixed set of frame constants, so this shifts the whole sequence rather than remapping it cleanly — leave it at 1 unless you are matching an external beat
className	string— Optional className for the outer container

accentColorstring
Color used for the JSX prop highlight, the HMR flash, and the default button background
Default"#3b82f6"
speednumber
Time multiplier applied as frame × speed. The typing schedule is a fixed set of frame constants, so this shifts the whole sequence rather than remapping it cleanly — leave it at 1 unless you are matching an external beat
Default1
classNamestring
Optional className for the outer container