screenci

Your UI changed. Your demo videos didn't. screenci fixes that.

Record product walkthroughs as code. When the UI ships, run npx screenci export and your videos regenerate. You keep the Playwright mental model, but the output is a maintainable product video instead of a test report.

Learn more at screenci.com.

Get started

npm init screenci@latest
# or
pnpm create screenci

This scaffolds a self-contained screenci/ directory with its own dependencies and installs Chromium. The directory is isolated from the surrounding workspace, which keeps installation reliable inside monorepos.

Then write a video, run it locally, refine it, and export the final output:

npx screenci test      # author the video
npx screenci edit      # record it and open the web editor
npx screenci export    # render and download the finished video

Full docs:

• Getting started
• Writing scripts
• CLI reference

Write a video

Video scripts are Playwright-style files with a .screenci.ts extension. If you already know Playwright locators, navigation, and waiting, you already know most of the automation layer.

// recordings/onboarding.screenci.ts
import { hide, speed, time, video } from 'screenci'

video('Onboarding flow', async ({ page }) => {
  await hide(async () => {
    await page.goto('https://app.example.com/signup')
  })

  await page.getByLabel('Email').fill('jane@example.com')
  await page.getByRole('button', { name: 'Create account' }).click()
  await speed(0.5, async () => {
    await page.getByRole('button', { name: 'Open dashboard tour' }).click()
  })
  await time(1000, async () => {
    await page.getByRole('button', { name: 'Skip tutorial' }).click()
  })
  await page.getByRole('heading', { name: 'Dashboard' }).waitFor()
})

Each video() call becomes one output video. The title becomes the filename and the remote video identity. Inside video(), page is a ScreenCIPage: a Playwright Page with animated cursor movement and visible typing layered on top of normal Playwright behavior.

hide() removes setup entirely. speed() and time() keep a section visible but remap its rendered duration.

Authoring helpers

Export	What it does
defineConfig	Wraps Playwright config with ScreenCI defaults
video	Declares a video recording test
video.narration	Declares narration cues (per language or shared) for a video
hide	Cuts setup or cleanup out of the visible recording
autoZoom	Smooth camera follow for an interaction block
zoomTo	Manual camera framing for a locator or point
resetZoom	Returns from manual framing to the full viewport
createOverlays	Inserts timed media overlays into the recording timeline
voices	Available voice constants such as voices.Ava
modelTypes	Narration model constants

See the docs for configuration, narration, camera, and CI setup.

Community

Questions, ideas, or want to show off your videos? Join us on Discord.