Klippy

Demo

Use this guide to walk stakeholders through the Editor Starter experience using the hosted demo atklippy.pro/editor. The flow highlights privacy-first editing, timeline ergonomics, captions, and export pipelines in under ten minutes.

Preparation

  • Open https://www.klippy.pro/editor — the latest build is hosted here for hands-on demos.
  • Optionally, if you need to show custom branding or unreleased features, follow Setup to run a local build and mirror this script.
  • Gather demo media (one short video clip, an audio bed, a PNG sticker, and a subtitle file). Use copyright-clear assets.
  • Create a clean browser profile so IndexedDB storage starts empty; reset via /storage if needed.
  • Have the documentation sidebar open to reference Features or Rendering during Q&A.

Suggested script (8–10 minutes)

  1. Project creation (1 min): upload the sample video, rename the project, and point out autosave + private storage (Persistence).
  2. Timeline editing (3 min): trim the clip, duplicate using D, add the audio bed, show snapping/zoom, and rearrange rows to illustrate virtualization.
  3. Text & assets (2 min): add a text layer, adjust font/outline, drag a sticker from the Gif/Emoji panel, and demonstrate layer controls in the Properties panel.
  4. Captions & transcript (1 min): import an SRT or trigger automatic transcription if your environment is configured (Captioning).
  5. Exports (2 min): show Standard (FFmpeg) export settings, then switch to Transparent (WebCodecs/MediaBunny). Mention WASM caching, COOP/COEP, and mobile considerations.
  6. Wrap up (1 min): open /storage to demonstrate local persistence, reference Backend routes, and answer roadmap questions using Features not included.

Optional deep dives

  • AI & transcription: demonstrate queued jobs, worker responses, and throttling if you have a Whisper Worker configured.
  • Transparent workflow: export a WebM with alpha and import into another tool to prove overlay fidelity.
  • Mobile story: open the editor on an iPad/Android device to show responsive layouts and MediaBunny export.
  • Storage inspection: use the browser Application panel to highlight IndexedDB project/asset stores and quota information.

Troubleshooting during demos

  • If FFmpeg fails to load, confirm NEXT_PUBLIC_FFMPEG_ALLOW_CDN and COOP/COEP headers (Rendering troubleshooting).
  • For API 403 errors (Pexels/Tenor/Meme), re-check ALLOWED_ORIGINS and ensure you are serving the dev build from the same origin.
  • If automatic transcription is disabled, mention the Cloudflare Worker requirement and proceed with manual caption import.
  • Have a zipped backup project (.klippy.bundle.json) ready to import if uploads go wrong or you need to reset quickly.

Recording a shareable demo

Use your favourite screen recorder or the built-in capture tools, keep clips under 5 minutes, and share alongside notes from Before you buy so decision makers can evaluate asynchronously.