Demo

bun add @absolutejs/demo

bun add -d playwright

import {
	createDemoRunner,
	goto,
	narrate,
	signIn,
	spotlight,
	writeDemoManifest,
} from "@absolutejs/demo";
import { createDemoAuthDriver } from "@absolutejs/demo/auth";
import {
	createPlaywrightDemoSession,
} from "@absolutejs/demo/playwright";

const session = await createPlaywrightDemoSession({
	headless: false,
	recordVideoDir: ".demo-video",
	screenshotDir: ".demo-shots",
});

const runner = createDemoRunner({
	auth: createDemoAuthDriver(),
	browser: session.browserDriver,
	annotations: session.annotations,
	voiceover: {
		speak: async ({ text }) => {
			console.log("[voiceover]", text);
		},
	},
});

const report = await runner.run({
	profiles: [
		{
			id: "ae",
			kind: "absolute",
			baseUrl: "http://localhost:3000",
			email: { env: "DEMO_EMAIL" },
			password: { env: "DEMO_PASSWORD" },
			afterLoginUrl: "http://localhost:3000/pipeline",
		},
	],
	id: "crm-demo",
	title: "CRM demo",
	steps: [
		signIn("ae"),
		narrate("Here is the live pipeline view."),
		goto("http://localhost:3000/pipeline"),
		spotlight({
			selector: "[data-demo='pipeline-total']",
			label: "Revenue at risk",
			durationMs: 1800,
		}),
	],
});

await writeDemoManifest(report, ".demo-artifacts/crm-demo.manifest.json");
console.log(report.status, report.artifacts);
await session.close();

// A third-party site you do not control:
{
	id: "saucedemo",
	kind: "form",
	loginUrl: "https://www.saucedemo.com/",
	fields: [
		{ selector: "#user-name", value: { env: "SAUCE_USERNAME" } },
		{ selector: "#password", value: { env: "SAUCE_PASSWORD" } },
	],
	submitSelector: "#login-button",
	success: { selector: ".inventory_list" },
}

import {
	createDemoRunner,
	goto,
	narrate,
	signIn,
	spotlight,
	writeDemoManifest
} from '@absolutejs/demo';
import { createDemoAuthDriver } from '@absolutejs/demo/auth';
import { createPlaywrightDemoSession } from '@absolutejs/demo/playwright';

const session = await createPlaywrightDemoSession({
	headless: false,
	recordVideoDir: '.demo-video',
	screenshotDir: '.demo-shots'
});

const runner = createDemoRunner({
	annotations: session.annotations,
	auth: createDemoAuthDriver(),
	browser: session.browserDriver,
	voiceover: {
		speak: async ({ text }) => {
			console.log('[voiceover]', text);
		}
	}
});

const report = await runner.run({
	id: 'crm-demo',
	profiles: [
		{
			afterLoginUrl: 'http://localhost:3000/pipeline',
			baseUrl: 'http://localhost:3000',
			email: { env: 'DEMO_EMAIL' },
			id: 'ae',
			kind: 'absolute',
			password: { env: 'DEMO_PASSWORD' }
		}
	],
	steps: [
		signIn('ae'),
		narrate('Here is the live pipeline view.'),
		goto('http://localhost:3000/pipeline'),
		spotlight({
			durationMs: 1800,
			label: 'Revenue at risk',
			selector: "[data-demo='pipeline-total']"
		})
	],
	title: 'CRM demo'
});

await writeDemoManifest(report, '.demo-artifacts/crm-demo.manifest.json');
console.log(report.status, report.artifacts);
await session.close();

import {
	createElevenLabsVoiceover,
	withPronunciationAliases,
	withRenderCache
} from '@absolutejs/demo/voiceover';

// Premium voiceover with demo-vocabulary pronunciation fixes applied
// before TTS, and identical lines cached so re-runs skip re-synthesis.
const voiceover = withRenderCache(
	withPronunciationAliases(
		createElevenLabsVoiceover({
			apiKey: process.env.ELEVENLABS_API_KEY ?? '',
			outputDir: '.demo-voiceover'
		})
	),
	{ cacheDir: '.demo-voiceover/cache', salt: 'rachel:flash_v2_5' }
);

import { composeDemoWithFFmpeg } from '@absolutejs/demo/composition';

// Merge the run recording and voiceover artifacts into a final video,
// offsetting narration against the recorded screen via the demo timeline.
const finalVideo = await composeDemoWithFFmpeg(report, {
	outputPath: '.demo-artifacts/crm-demo.mp4'
});