Skip to content

Fabric Demo Recording Guide

This document explains how to create pixel-perfect demos of Fabric for the blog and marketing site.

Two Approaches

1. Scripted Demos (Current - FabricDemo component)

Location: src/components/FabricDemo/

These are animated React components that simulate the Fabric UI. Good for: - Quick iterations - Controlled scenarios - Works without Fabric running

Limitations: - Not pixel-perfect (recreated UI, not actual Fabric) - Manual maintenance when Fabric UI changes

2. rrweb Recordings (Future - FabricReplay component)

Location: src/components/FabricReplay/

Records actual Fabric sessions and replays them. Good for: - Pixel-perfect accuracy - Capturing real interactions - Zero maintenance when UI changes (just re-record)

Setup (Already done in Fabric)

The recording utility is at: /Users/ryanmonsurate/Projects/fabric/src/renderer/utils/demoRecorder.ts

How to Record

  1. Start Fabric in dev mode: bash cd /Users/ryanmonsurate/Projects/fabric npm run dev

  2. Open DevTools in Fabric (Cmd+Option+I or View > Toggle Developer Tools)

  3. Start recording in the console: javascript __demoRecorder.startRecording()

  4. Perform your demo actions:

  5. Custom Commands Demo: Type /, select a command, show response

  6. Simultaneous Agents Demo: Create tabs, type prompts, show responses

  7. Stop and export: javascript __demoRecorder.stopAndExport('my-demo.json') This downloads a JSON file.

  8. Move the file to codewithfabric: bash mv ~/Downloads/my-demo.json /Users/ryanmonsurate/Projects/codewithfabric/src/demos/

Recording Tips

  • Keep it short: 15-30 seconds max
  • Pause at key moments: Brief pauses make the demo easier to follow
  • Avoid sensitive data: Don't show API keys, passwords, etc.
  • Clean state: Start with a fresh Fabric window
  • Consistent size: Keep the window size consistent between recordings

Available Commands

__demoRecorder.startRecording()     // Start recording
__demoRecorder.stopAndExport(name)  // Stop and download JSON
__demoRecorder.isRecording()        // Check if recording
__demoRecorder.getEventCount()      // See how many events captured
__demoRecorder.cancelRecording()    // Cancel without saving

Using Recordings in Blog Posts

In MDX:

<CustomCommandsDemo />

<SimultaneousAgentsDemo />

With rrweb recordings (when ready):

import events from '@/demos/custom-commands.json';
import { FabricReplay } from '@/components/FabricReplay';

<FabricReplay events={events} height={450} autoPlay={true} />

Demo Scenarios Reference

Custom Commands Demo

Shows: Fabric's slash command system

Steps: 1. Type / to trigger autocomplete 2. Select /commit command 3. Show the AI analyzing git diff 4. Display commit message options

Simultaneous Agents Demo

Shows: Multiple tabs with parallel AI agents

Steps: 1. Create "Auth Flow" tab → Send auth implementation prompt 2. Create "API Tests" tab → Send test writing prompt 3. Create "PR Review" tab → Send code review prompt 4. Show responses appearing in each tab 5. Tour through tabs showing parallel work

File Locations

File Purpose
src/components/FabricDemo/ Scripted animated demos
src/components/FabricReplay/ rrweb replay component
src/demos/*.json Recorded rrweb sessions
src/demos/README.md Quick reference
src/app/demo/page.tsx Demo testing page at /demo
src/components/blog/mdx-components.tsx MDX component whitelist

Current Demo Status

Demo Type Status
Custom Commands Scripted Working
Simultaneous Agents Scripted Fixed (shows all 3 tabs)
Custom Commands rrweb Placeholder
Simultaneous Agents rrweb Placeholder

Troubleshooting

Recording fails to start

  • Make sure Fabric is running in dev mode
  • Check DevTools console for errors
  • Try refreshing Fabric and starting again

JSON file too large

  • Keep recordings under 30 seconds
  • The default sampling already reduces mousemove events
  • Check getEventCount() during recording

Replay looks wrong

  • Viewport size might differ - set explicit width/height
  • Fonts might not load - ensure fonts are available on the web
  • CSS might be missing - rrweb captures inline styles

Demo doesn't match current Fabric UI

  • Re-record the demo
  • For scripted demos, update the scenario steps