# Code Element

Use `code` to show source snippets in technical explainers, API walkthroughs, and before/after code videos.

## Shape

```ts
interface CodeClip extends BaseClip {
  type: "code";
  code: string;
  language?: string;
  fontFamily?: string;
  fontSize?: number;
  lineHeight?: number;
  selection?: unknown;
}
```

## Fields

- `code`: source text, required
- `language`: language id reserved for syntax highlighting
- `fontFamily`: overrides `style.fontFamily`
- `fontSize`: overrides `style.fontSize`
- `lineHeight`: overrides `style.lineHeight`
- `selection`: forwarded to the Revideo `Code` component

## Example

```json
{
  "type": "code",
  "start": 0,
  "duration": 4,
  "code": "const video = renderJson({ effects: ['code'] });",
  "transform": {
    "x": "50%",
    "y": "50%",
    "width": 900,
    "height": 360
  },
  "style": {
    "fontSize": 42,
    "fill": "#dbeafe"
  },
  "transition": {
    "type": "blur",
    "duration": 0.4
  }
}
```