Terminal

Hello Brief!

Usage#

Wrap TerminalStep components in Terminal. Give each step a command and write its output in a terminal fence. Omit the fence for commands without output.

::::Terminal
	:::TerminalStep{command='echo "Hello Brief!"'}

		```terminal
		Hello Brief!
		```

	:::
::::

Header#

Set title to choose the header text.

::::Terminal{title="Create a Brief project"}
	:::TerminalStep{command="brief init docs" src="/recordings/brief-init.cast"}
	:::
::::

Shell#

Set shell to bash for Bash or ps for PowerShell. It controls the prompt prefix and command highlighting. The default is bash.

::::Terminal{shell="ps"}
	:::TerminalStep{command="Write-Output 'Hello Brief!'"}

		```terminal
		Hello Brief!
		```

	:::
::::

Working Directory#

Set cwd to show a directory in the prompt. Override it on a step after a directory change.

::::Terminal{shell="bash" cwd="/projects"}
	:::TerminalStep{command="cd docs"}
	:::
	:::TerminalStep{command='echo "Hello Brief!"' cwd="/projects/docs"}
	:::
::::

cwd is display metadata. It does not execute a command or update automatically after cd. It also doesn't affect the copy output.

Height#

Set height=max to reserve space for every response screen. This is the default. Set a pixel height for a fixed, vertically scrollable terminal.

::::Terminal{height=240}
	:::TerminalStep{command="brief init docs" src="/recordings/brief-init.cast"}
	:::
::::

Inline output and imported cast files are compiled into recordings and included in the page response. Playback uses that data directly, without fetching a recording file. Dimensions are checked during compilation, so height=max reserves the output's space before playback starts.

Each recording must fit within the 2 MB limit, including recordings generated from inline output. Cast files are read during the build; changing a file updates the embedded recording when the page is rebuilt.

Long commands and output scroll horizontally together without wrapping.

Compact#

Set compact=true to align the terminal's borders with the text column without changing its inner padding. This only affects desktop layout; mobile terminals remain edge-to-edge.

::::Terminal{compact=true}
	:::TerminalStep{command='echo "Hello Brief!"'}
	:::
::::

Custom Input#

Use a terminal fence inside a step for line-by-line output. This format supports plain text, wait directives, and ANSI colors without a separate recording file.

Timing#

Lines in a terminal fence print instantly. Put \-300ms on its own line to wait 300 milliseconds before printing more output.

::::Terminal
	:::TerminalStep{command="pnpm build"}

		```terminal
		Building documentation...
		\-300ms
		Done.
		```

	:::
::::

Empty lines are preserved. Wait directives do not add a line. Use \\-300ms to print a literal \-300ms line. A wait at the end delays the next step.

Colors#

Use ANSI color and style sequences in the output. Write the escape character as \x1b, and use \x1b[0m to reset the style.

::::Terminal
	:::TerminalStep{command="pnpm build"}

		```terminal
		Building documentation...
		\x1b[32mBuild complete.\x1b[0m
		```

	:::
::::

Asciinema Recordings#

Use an asciicast .cast file for interactive prompts, per-character output, or progress lines that update in place. Versions 2 and 3 are supported.

1. 1

   Step 1: Prepare the recording#

   Record each command separately so each file contains one step's response.
2. 2

   Step 2: Add the file#

   Place the recording in the application's public folder, such as public/recordings/brief-init.cast.
3. 3

   Step 3: Reference the recording#

   Set src on a TerminalStep to the file's site-root URL. Paths relative to the Markdown file are not supported.

   ::::Terminal{title="Create a Brief project"}
   	:::TerminalStep{command="brief init docs" src="/recordings/brief-init.cast"}
   	:::
   ::::

   A step can have a recording or an inline fence, but not both.

Terminal Reference#

TerminalStep Reference#