Skip to content
ScreenCI

Installation & First Video

ScreenCI is a Playwright-based workflow for producing product videos as code. If you already know Playwright, the startup path should feel familiar: initialize a project and run the generated E2E tests locally using test command. Then ScreenCI allows converting these tests into product videos with record command.

You will learn

Install ScreenCI

Initialize a new ScreenCI project:

Terminal window
npm init screenci@latest

If that does not work, install Node.js, which comes with npm.

What initializing creates

ScreenCI creates the starter project scaffold below.

screenci.config.ts          # ScreenCI and Playwright configuration
package.json
package-lock.json           # Or pnpm-lock.yaml, depending on package manager
videos/
  example.video.ts          # Minimal starter video
.github/workflows/
  screenci.yaml             # Optional GitHub Actions workflow for recording

Initialization may also optionally add agent skills-related files, depending on the agent tooling installed on your system. See Vercel Skills.

The starter video source is generated at videos/example.video.ts and looks like this. For an explanation of how it works, see Video Script Basics:

import { autoZoom, createNarration, hide, video, voices } from 'screenci'


// Define narration lines, including localized variants.
const narration = createNarration({
  voice: { name: voices.Sophie },
  en: {
    docs: 'Here is where to find ScreenCI [pronounce: screen see eye] docs.',
  },
  es: {
    docs: 'Aqui es donde encontrar la documentacion de ScreenCI [pronounce: screen see eye].',
  },
})


video('How to find docs', async ({ page }) => {
  // Run setup without showing these actions in the final recording.
  await hide(async () => {
    await page.goto('https://screenci.com/')
    await page.waitForLoadState('networkidle')
  })


  // Play the matching narration line for this step.
  await narration.docs()


  // Automatically zoom into interactions so they are easier to follow.
  await autoZoom(async () => {
    await page.getByRole('link', { name: 'View Documentation' }).click()
  })
})

Run the example

Test the starter video locally from the same directory:

Terminal window
npx screenci test

The test command is for fast video script verification. It runs the .video.ts file with ScreenCI’s Playwright base but skips the final recording pipeline, which slows down recording to produce correct timings for mouse animations.

screenci test accepts the same arguments as playwright test. For example, to debug the videos visually in Playwright UI Mode, use:

Terminal window
npx screenci test --ui

Record the final result

When you are ready to record the videos in the videos/ directory, run:

Terminal window
npx screenci record

This prompts you to log in to ScreenCI the first time, then records the videos, uploads them, and renders the final output.

It should look something like this:

What’s next