Block Syntax

Block syntax

Dev-reel blocks use frontmatter syntax (YAML) for configuration, followed by terminal content. This page documents all available options.

Basic structure

markdown

```dev-reel
[YAML frontmatter here]

[terminal content here]
```

Frontmatter options

title (required)

Name of the SVG file to be generated. No need to include the .svg extension.

yaml

title: my-terminal-demo
# Generates: assets/my-terminal-demo.svg

theme

Color theme. Default: promise-inc

yaml

theme: promise-inc   # Default theme (dark with cyan)
theme: dracula       # Purple/pink theme
theme: nord          # Blue/frost theme
theme: catppuccin-mocha  # Warm dark theme

animation

Array of animations to apply. Can combine multiple. Default: []

yaml

animation:
  - typing          # Typing effect
  - fade-lines      # Lines appear gradually
  - blink-cursor    # Blinking cursor
  - scanline        # CRT scanline effect
  - wave            # Wave movement
  - pulse-error     # Pulse on errors
  - glow-success    # Glow on successes
  - noise-overlay   # Noise texture
  - progress-bar    # Animated progress bar
  - grow-bars       # Bars grow
  - slide-cards     # Cards slide (bento)

frame

Frame/border type around the content. Default: terminal

yaml

frame: terminal   # macOS window with traffic lights
frame: card       # Simple rounded card
frame: browser    # Browser chrome with URL bar
frame: mobile     # Mobile phone frame
frame: none       # No frame

width

SVG width in pixels or 'auto'. Default: auto

yaml

width: auto    # Adjust to content
width: 600     # Fixed 600px
width: 1200    # Fixed 1200px

cursor

Show blinking cursor. Default: true

yaml

cursor: true    # Visible cursor
cursor: false   # No cursor

prefix

Custom command prefix. Default: $

yaml

prefix: "$"       # Bash/sh style
prefix: ">"       # PowerShell style
prefix: "❯"       # Modern shell
prefix: "user@host $"  # Full prompt

showTitle

Show title in frame header (terminal/browser). Default: true

yaml

showTitle: true   # Visible title
showTitle: false  # No title

rawMode

Disables line type parsing. Everything is rendered as normal text. Default: false

yaml

rawMode: false   # Automatic parsing of $, ✔, etc
rawMode: true    # Everything as normal text

layout

Layout for multiple blocks. Default: single (one SVG per block)

yaml

layout: single   # Individual SVG
layout: bento    # Bento grid (multiple blocks in one SVG)

Bento layout groups all blocks with 'layout: bento' into a single grid SVG.

font

Font settings. Object with family, size, lineHeight.

yaml

font:
  family: "Fira Code, monospace"
  size: 14
  lineHeight: 1.5

Default values:

yaml

font:
  family: "SF Mono, Monaco, Consolas, monospace"
  size: 14
  lineHeight: 1.6

Line types

Dev Reel automatically detects line type based on special characters:

Type	Characters	Color	Example
Command	$ or >	Accent	$ npm install
Success	✔ ✓	Green	✔ Build completed
Error	✖ ✗	Red	✖ Failed to compile
Warning	⚠	Yellow	⚠ Deprecated API
Info	ℹ	Blue	ℹ Using cache
Progress	[=== ]	Accent	[====> ] 50%
Output	-	Foreground	Output text
Empty		-	(spacing)

Complete example

Block using all main options:

markdown

```dev-reel
title: full-example
theme: dracula
animation:
  - typing
  - fade-lines
  - blink-cursor
  - glow-success
frame: terminal
width: 800
cursor: true
prefix: "❯"
showTitle: true
rawMode: false
font:
  family: "JetBrains Mono, monospace"
  size: 15
  lineHeight: 1.7

❯ npm create vite@latest my-app
✔ Select framework: React
✔ Select variant: TypeScript

❯ cd my-app
❯ npm install
[=========>  ] Installing... 85%

✔ Dependencies installed in 3.2s
ℹ Run 'npm run dev' to start

❯ npm run dev
> Starting dev server...
✔ Server ready at http://localhost:5173
```

TypeScript interface

For reference, the complete TypeScript interface:

typescript

interface DevReelBlock {
  title: string;
  theme?: "promise-inc" | "dracula" | "nord" | "catppuccin-mocha";
  animation?: Array<
    | "typing"
    | "blink-cursor"
    | "fade-lines"
    | "scanline"
    | "wave"
    | "pulse-error"
    | "glow-success"
    | "noise-overlay"
    | "progress-bar"
    | "grow-bars"
    | "slide-cards"
  >;
  frame?: "terminal" | "card" | "browser" | "mobile" | "none";
  width?: number | "auto";
  cursor?: boolean;
  prefix?: string;
  showTitle?: boolean;
  rawMode?: boolean;
  layout?: "single" | "bento";
  font?: {
    family?: string;
    size?: number;
    lineHeight?: number;
  };
  content: string; // Content after frontmatter
}

Tips and best practices

Use descriptive titles: 'install-demo' instead of 'demo1'
Combine 2-3 animations for best effect: typing + fade-lines + blink-cursor
Progress bars work well with the 'progress-bar' animation
Use rawMode for code or output that shouldn't be colorized
Bento layout is great for side-by-side comparisons
Dark themes (dracula, nord) work better in GitHub dark mode
Limit width to 800-1000px for best viewing on GitHub

Quick Start Themes