Window Configuration

The following diagram shows how the windowIcon, windowTitle, offsetX, offsetY, paddingX, paddingY, decorations, insetMajor, and insetMinor options affect the rendered terminal window.

Title and Icon

The initial window title and icon can be specified using the windowTitle and windowIcon options. After that, the title and icon can also be configured using these OSC escape sequences:

Sequence	Description	Example
ESC]0;[text]BEL	Set both the window title and icon	\x1b]0;window title and icon\x07
ESC]1;[text]BEL	Set the window icon only	\x1b]1;icon\x07
ESC]2;[text]BEL	Set the window title only	\x1b]2;window title\x07

See the section below for examples of how to use escape sequences to set the terminal window title and icon.

Icon Keywords

The following diagram shows the keywords that can be used for particular window icons:

Examples

Here's an example of how escape sequences within the content of a screenshot can overwrite the initial window title and icon:

import { renderScreen } from 'cli-screencast';

// Content that contains an escape sequence that sets the window title and icon to 'node'
const content = '\x1b]0;node\x07Hello World!';

renderScreen(content, {
    columns: 50,
    rows: 10,
    windowTitle: 'Overwritten Title',
}).then((svg) => {
    // Use or save the generated SVG string here
});

result

Here's an example of capturing a callback function that changes the window title and icon multiple times by both directly writing escape sequences and by using the capture.setTitle convenience function:

import { captureCallback } from 'cli-screencast';

captureCallback((capture) => {
    process.stdout.write('Hello World!');
    capture.wait(2000); // Wait 2s
    // Set title to 'Next Title', icon to 'node'
    process.stdout.write('\x1b]2;Next Title\x07\x1b]1;node\x07');
    capture.wait(2000); // Wait 2s
    // Set title to 'Last Title', icon to 'code'
    capture.setTitle({ title: 'Last Title', icon: 'code' });
    capture.wait(2000); // Wait 2s
    // Clear the title and icon
    capture.setTitle({ title: '', icon: '' });
    capture.wait(2000); // Wait 2s
}, {
    columns: 50,
    rows: 10,
    cursorHidden: true,
    windowTitle: 'Initial Title',
    windowIcon: 'shell',
}).then((svg) => {
    // Use or save the generated SVG string here
});

result

Box Shadow

The rendered window box shadow can be configured by passing a configuration object to the boxShadow option. Any of the options in the table below can be specified, and any unspecified options will assume their default values.

Option	Description	Default
dx	The horizontal offset of the shadow, in pixels. Positive values will offset the shadow to the right of the window, while negative values will offset the shadow to the left.	0
dy	The vertical offset of the shadow, in pixels. Positive values will offset the shadow down under the window, while negative values will offset the shadow up.	0
spread	The spread radius of the shadow. If two numbers are provided in a [number, number] array pair, the first number will represent the x-radius of the spread and the second will represent the y-radius. If one number is provided, it is used for both the x and y. Positive values will cause the shadow to expand, and negative values will cause the shadow to contract.	0.125 * fontSize
blurRadius	Blur radius of the shadow. This is the standard deviation value for the blur function, and must be a number ≥ 0	0.25 * fontSize
color	Color of the shadow. This can be configured with any color string or a rgba color array.	[0,0,0,0.5]

Examples

Here's an example of a terminal window rendered with the default box shadow:

import { renderScreen } from 'cli-screencast';

renderScreen('Hello World!', {
    columns: 50,
    rows: 10,
    windowTitle: 'Box Shadow',
    boxShadow: true, // Enable box shadow
}).then((svg) => {
    // Use or save the generated SVG string here
});

result

Here's an example of a terminal window rendered with an offset box shadow:

import { renderScreen } from 'cli-screencast';

renderScreen('Hello World!', {
    columns: 50,
    rows: 10,
    windowTitle: 'Box Shadow with Offset',
    boxShadow: { dx: 2, dy: 2 }, // Shadow offset (2px right, 2px down)
}).then((svg) => {
    // Use or save the generated SVG string here
});

result