Code Element

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

Shape

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

{
  "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
  }
}