Klippy
Editor Starter

Editor Starter

Klippy’s reference implementation for a privacy-first browser editor. The starter ships the production UI, Redux state, export engines, and docs you need to evaluate Klippy or bootstrap your own editor without building timeline, captions, and render pipelines from scratch.

Why teams choose the starter

  • Private by default — all editing stays in the browser with IndexedDB persistence; optional API routes proxy stock media, AI, and transcription without exposing keys.
  • Production-ready UI — timeline virtualization, snapping, captions, properties panel, media library, and header export flows mirror the production Klippy editor.
  • Battle-tested export stack — FFmpeg WASM for desktop, MediaBunny/WebCodecs for mobile, transparent exports, and Remotion integration points for server rendering.
  • End-to-end documentation — setup, state architecture, persistence, backend hardening, and production checklists live alongside the code.

What ships in the box

Editor surface

  • Timeline with media, text, zoom, transitions, and captions tracks
  • Canvas preview & properties for transforms, opacity, audio, and layer order
  • Panels for media uploads, stock sources, captions, transcript, effects, and TTS
  • Keyboard shortcuts, snapping guides, virtualization, and undo/redo history

Infrastructure & ops

  • Next.js 15 App Router with typed routes, middleware security, and headers for COOP/COEP
  • Redux Toolkit store, memoized selectors, middleware pipeline, and IndexedDB storage manager
  • FFmpeg WASM assets, CDN fallbacks, MediaBunny/WebCodecs mobile exporters, and export logging UI
  • API routes for Pexels, Tenor, Meme, AI proxy, transcription worker, health checks, and diagnostics

Evaluation playbook

  1. Follow Setup to install dependencies, configure .env.local, and run npm run dev:clean.
  2. Open /projects/new, import sample clips, and exercise timeline editing, captions, and undo/redo.
  3. Test both Standard (FFmpeg) and Transparent (WebCodecs/MediaBunny) exports across desktop and mobile.
  4. Review Backend routes and Persistence to map integration points to your infra.
  5. Run through the Production checklist before planning deployment.

Key files to explore

State & timeline

  • app/store/index.ts — store config, middleware ordering, storage helpers
  • app/store/slices/projectSlice.ts — timeline items, history, transitions
  • app/store/selectors/timelineSelectors.ts — memoized derived state for UI
  • app/components/editor/timeline/* — virtualization, row rendering, drag/drop

Export & services

  • app/lib/export/* — FFmpeg command builders, MediaBunny/WebCodecs orchestrators
  • app/api/transcription/route.ts — Cloudflare Whisper proxy with origin validation
  • middleware.ts — CSP, COOP/COEP, rate limits, and allowed origins
  • public/_headers & vercel.json — recommended production headers

Next steps

Ready to go deeper? Continue to Before you buyfor licensing, prerequisites, and evaluation tips, or jump directly into the feature deep dives linked in the sidebar. When you are satisfied with the fit, review Buyto arrange access and ongoing support.