@bworlds/launchkit

Launch kit for builders - demo recording, feedback tools, and more for BWorlds.

Features

Session Recording - Captures user interactions using rrweb
Automatic Screenshots - Takes snapshots on page load, navigation, form submit, modal open, and scroll
Privacy-First - Automatically masks passwords and credit card inputs
Lightweight UI - Minimal toolbar (~3KB) with start/pause/stop controls
Auto-Stop - Recordings automatically stop after 15 minutes
Zero Config - Just add the URL parameter to start recording

Installation

npm install @bworlds/launchkit
# or
pnpm add @bworlds/launchkit
# or
yarn add @bworlds/launchkit

Usage

Auto-Activation (Recommended)

Import the package anywhere in your app - it auto-activates when the URL contains ?_bw_record=<api_key>:

// In your app entry point or layout
import '@bworlds/launchkit';

Then visit your app with the recording parameter:

https://yourapp.com?_bw_record=your_api_key

A toolbar will appear in the bottom-right corner.

Manual Control

For programmatic control over recording:

import { DemoRecorder } from '@bworlds/launchkit';

const recorder = new DemoRecorder({
  apiKey: 'your_api_key',
  maxDuration: 10 * 60 * 1000, // 10 minutes (default: 15)
  maskInputs: true, // default: true
  toolbar: {
    position: 'bottom-right', // or 'bottom-left', 'top-right', 'top-left'
    enabled: true,
  },
  onComplete: (result) => {
    console.log('Recording URL:', result.playbackUrl);
  },
});

// Initialize toolbar
recorder.init();

// Control recording programmatically
await recorder.start();
recorder.pause();
recorder.resume();
await recorder.stop();

// Take manual screenshot
await recorder.screenshot();

Script Tag (CDN)

For non-bundled applications:

<script src="https://cdn.bworlds.com/recorder.umd.js"></script>

Then visit with ?_bw_record=your_api_key to activate.

Next.js / React Setup

Create a client component:

// components/DemoRecorder.tsx
'use client';

import { useEffect } from 'react';

export function DemoRecorder() {
  useEffect(() => {
    import('@bworlds/launchkit');
  }, []);

  return null;
}

Add to your layout:

// app/layout.tsx
import { DemoRecorder } from '@/components/DemoRecorder';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <DemoRecorder />
        {children}
      </body>
    </html>
  );
}

Configuration

Option	Type	Default	Description
`apiKey`	`string`	required	Your BWorlds API key
`apiEndpoint`	`string`	`https://api.bworlds.com`	API endpoint URL
`maxDuration`	`number`	`900000` (15 min)	Max recording duration in ms
`maskInputs`	`boolean`	`true`	Mask sensitive inputs
`toolbar.position`	`string`	`bottom-right`	Toolbar position
`toolbar.enabled`	`boolean`	`true`	Show/hide toolbar
`onComplete`	`function`	-	Called when recording finishes
`onStateChange`	`function`	-	Called on state changes
`onError`	`function`	-	Called on errors

Automatic Screenshots

Screenshots are captured automatically on:

Page Load - After initial render
Navigation - On route changes (SPA or browser)
Form Submit - Before form submission
Modal Open - When dialogs/modals appear
Scroll - After scrolling >50% of viewport

You can also take manual screenshots via the camera button or recorder.screenshot().

Privacy

The SDK automatically masks:

Password inputs (type="password")
Credit card fields (autocomplete="cc-*")
Fields with data-private or data-sensitive attributes

To exclude an element from recording entirely:

<div data-recorder-block>This won't be recorded</div>

Browser Support

Chrome 80+
Firefox 75+
Safari 13+
Edge 80+

License

MIT