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

// 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}
  />
);

Props

Prop	Type	Default	Description
`accentColor`	`string`	`"#3b82f6"`	Color used for the JSX prop highlight, the HMR flash, and the default button background
`className`	`string`	—	Optional className for the outer container