screenci

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

Record product walkthroughs as code. When the UI ships, run npx screenci record and your videos regenerate.

ScreenCI keeps the Playwright mental model, but the output is a maintainable product video instead of a test report.

Install and scaffold

npm init screenci@latest
pnpm create screenci

init creates a ready-to-run project in the current directory, installs dependencies, and installs Chromium by default. When using npm init, pass extra initializer flags after --, for example npm init screenci@latest -- --yes --package-manager pnpm.

screenci.config.ts
package.json
tsconfig.json
README.md
.gitignore
.env
videos/
  example.video.ts
.github/workflows/screenci.yaml

Docs:

• Getting started: https://screenci.com/docs
• Writing scripts: https://screenci.com/docs/write-video-scripts
• CLI reference: https://screenci.com/docs/reference/cli

Write a video

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

// videos/onboarding.video.ts
import { hide, video } from 'screenci'

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

  await page.getByLabel('Email').fill('[email protected]')
  await page.getByRole('button', { name: 'Create account' }).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.

Run locally

npx screenci test
npx screenci test --ui

Use test for the normal authoring loop. It runs the video scripts through Playwright without starting the final recording and upload path.

Record the final output

npx screenci record

record writes local artifacts into .screenci/<video-name>/ and uploads them when SCREENCI_SECRET is configured.

Configure

// screenci.config.ts
import { defineConfig } from 'screenci'

export default defineConfig({
  projectName: 'my-project',
  envFile: '.env',
  videoDir: './videos',
  use: {
    baseURL: 'https://app.example.com',
    recordOptions: {
      aspectRatio: '16:9',
      quality: '1080p',
      fps: 60,
    },
    trace: 'retain-on-failure',
  },
  projects: [{ name: 'chromium' }],
})

ScreenCI manages testDir, testMatch, and retries for you. Most other Playwright config still passes through.

Authoring helpers

| Export | What it does | | ----------------- | --------------------------------------------------------- | | defineConfig | Wraps Playwright config with ScreenCI defaults | | video | Declares a video recording test | | createNarration | Creates typed narration controllers | | 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 | | createAssets | Inserts timed media overlays into the recording timeline | | voices | Available voice constants such as voices.Ava | | modelTypes | Narration model constants such as modelTypes.consistent |

Output

.screenci/
  <video-name>/
    recording.mp4
    data.json

When SCREENCI_SECRET is configured, screenci record uploads the output to ScreenCI for rendering, narration generation, and hosted delivery.