# Live Code Compilation
URL: https://remocn.dev/docs/compositions/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

- Install: `npx shadcn@latest add @remocn/live-code-compilation`
- Vibe: tech
- Natural length: 260f @ 30fps

## Installation

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `accentColor` | `string` | `"#3b82f6"` | Color used for the JSX prop highlight, the HMR flash, and the default button background |
| `speed` | `number` | `1` | 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 |

## Use when
- You want to show cause and effect for a developer audience: a style prop finishes typing on the left and the button on the right changes on that exact frame.
- The pitch needs an HMR moment — the preview button carries `transition: none`, so every property lands as a hard snap rather than an ease.
- You need a self-contained developer-tooling beat that takes no props beyond an accent colour and runs its own typing schedule to completion.

## Don't use when
- The code on screen has to be yours — the eight typed fragments and the resulting button are hardcoded, while `glass-code-block` and `glass-code-walk` take arbitrary code as a `code` prop.
- The shot is about commands and their output rather than an editor next to a preview; `terminal-simulator` types commands and rolls older lines off the top.
- The split should read as a conversation driving the result; `chat-to-preview-layout` shrinks a chat column while the preview column expands.