Skip to main content

renderData

renderData(path, options)​

Asynchronous function that renders a screencast or screenshot from a json or yaml data file. If any of the other api methods were used to write screencast data to json or yaml, this method can be used to render that data to svg or png.

Returns a promise that resolves either a string if the output format option is 'svg', or a Buffer if the output format is 'png'.

Arguments​

path​string

JSON or YAML data file path containing the screencast data to render.

options​Object

A config object to specify the configuration options listed below.

Output Related
output, outputPath, scaleFactor, embedFonts, fonts
Command Related
includeCommand, prompt, keystrokeAnimation, keystrokeAnimationInterval
Rendering Related
theme, fontFamily, fontSize, lineHeight, columnWidth, iconColumnWidth, borderRadius, boxShadow, offsetX, offsetY, paddingX, paddingY, decorations, insetMajor, insetMinor
Debugging
logLevel

Usage​

Here is a basic example of rendering a capture data file called capture.yaml to svg:

capture.yml
version: 1.0.0
type: capture
columns: 50
rows: 10
tabSize: 8
cursorHidden: true
writes:
  - content: Hello World!
    delay: 0
  - content: "\n1st Write..."
    delay: 1500
  - content: "\n2nd Write..."
    delay: 1500
  - content: "\n3rd Write..."
    delay: 1500
endDelay: 2000
import { renderData } from 'cli-screencast';

renderData('capture.yaml', { output: 'svg' }).then((svg) => {
    // Use or save the generated SVG string here
});
result
Hello World!Hello World!1st Write...Hello World!1st Write...2nd Write...Hello World!1st Write...2nd Write...3rd Write...