Getting Started

screenci records product videos from code. Scripts are Playwright test files — you write interactions, screenci handles the camera, captions, and voiceovers.

Prerequisites

Node.js 18+
npm

Init a project

npx screenci init

You’ll be prompted for a project name. screenci creates the directory, scaffolds the project, and prints what to do next.

my-project/
  screenci.config.ts     ← recording settings (edit this)
  videos/
    example.video.ts     ← starter script (edit this too)
  Dockerfile             ← for CI recording in a container
  package.json
  .gitignore

Write a video

Open videos/example.video.ts. You’ll see:

import { video } from 'screenci'

video('Example video', async ({ page }) => {
  await page.goto('https://example.com')
  await page.waitForTimeout(3000)
})

This is a Playwright test. Everything in Playwright’s page API works as-is. Replace https://example.com with your app, write the interactions, done.

What ScreenCI adds

The page fixture inside video() is a ScreenCIPage — a wrapper whose .locator() and related methods return animated versions of Playwright’s locators. Clicks move the cursor along a bezier curve; fill() types character-by-character.

On top of that, screenci adds:

API	What it does
`hide(fn)`	Cuts the section from the final video (logins, page loads, setup)
`autoZoom(fn)`	Smooth camera zoom that follows clicks and fills
`createCaptions()`	Typed voiceover markers — text becomes AI-generated audio at render
`createAssets()`	Image or video overlays shown during the recording

All of these are composable with normal Playwright code. No rewrites required.

Develop without recording

npm run dev

Opens the Playwright UI. Run your scripts, verify selectors work, iterate fast. No screen capture, no Docker, no FFmpeg. Just Playwright.

Record

cd my-project && npm run record

Runs in a container (Docker/podman), starts a virtual display, launches a headless browser, captures the screen with FFmpeg, and saves:

.screenci/
  example-video/
    recording.mp4
    data.json

Configure

Edit screenci.config.ts to set your target URL, aspect ratio, and quality:

import { defineConfig } from 'screenci'

export default defineConfig({
  projectName: 'my-project',
  videoDir: './videos',
  use: {
    baseURL: 'https://app.example.com',
    recordOptions: {
      aspectRatio: '16:9',
      quality: '1080p',
      fps: 30,
    },
  },
})

Upload and render

Once you have a recording you’re happy with, upload it to screenci.com for rendering, voiceover generation, and your permanent embed link:

npm run upload-latest

Set apiUrl in your config (or SCREENCI_URL env var) to point at the API.

Next steps

Writing video tests — hide(), autoZoom(), createCaptions()
Configuration reference — all config options
API reference — full function signatures