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.

A timeline-driven composition that pairs a glass code editor with a live preview pane. As each event fires, a new code fragment is appended to the editor and the preview button instantly applies the matching style — no CSS transitions, no easing — mimicking the feel of a real Vite HMR update.

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.

Notes

No transitions on the preview

The preview button intentionally sets transition: none. Each style change snaps in on a single frame so the right pane reads as a real hot module reload — instant, mechanical, and synchronized to the code being typed on the left.