Spellsplice is an unofficial tool for creating synchronized overlays on Magic: The Gathering match recordings.
Load a video file, then use the timeline editor to mark in-game events — life changes, draws, discards, and more — at the exact moments they occur. The editor renders the current game state (life totals, hand sizes) as a canvas overlay in real time as the video plays, keeping everything in sync automatically.
- Video playback with frame-accurate canvas rendering
- Non-linear timeline editor — zoom, scrubbing, draggable playhead, rubber-band multi-select, command palette (Cmd+K)
- Full event suite: Lose Life, Gain Life, Add to Hand, Remove from Hand, Reveal from Hand, Stack Deck, Unstack Deck, Display Card, Win, Hide UI, Show UI, Reset
- Drag-and-drop events across layers and players; resizable duration events (e.g. Display Card) span a time range
- Up to 4 players, each with their own multi-layer track
- Live canvas overlay — player name, life total, and hand size rendered frame-by-frame as events fire
- Cards-in-hand display — stacked card title-bar crops per player, always visible on the overlay
- Deck stack overlay with entrance animation
- Decklist import — paste an MTGO-format decklist; card data and images are bulk-fetched from Scryfall and cached locally
- Inspector panel — edit event properties; card autocomplete draws from the cached deck first, falls back to Scryfall
- Project export/import — save and load the full timeline as a
.spsfile; media sources relink on open via a file picker - Video export — bake the overlay into the video directly in the browser (Chrome/Edge; powered by WebCodecs + WebGL)
- Settings dialog — project metadata, player defaults, overlay appearance
- Node.js v24 (see
.nvmrc) - npm
# Clone the repository
git clone https://github.com/rafael-graunke/spellsplice.git
cd spellsplice
# If using nvm
nvm use
# Install dependencies
npm installnpm run dev # Start the Vite dev server
npm run build # Type-check and build for production
npm run preview # Preview the production build locally
npm run lint # Run ESLint
npx prettier --write . # Format all filesEverything needed to produce a complete, finished video.
- Video playback with frame-accurate canvas rendering
- Timeline editor
- Zoom, scrubbing, draggable playhead
- Drag-and-drop events across layers
- Resizable duration events
- Multi-event selection via rubber-band drag
- Command palette (Cmd+K) for adding events
- Two players, each with their own multi-layer track
- Live overlay: player name, life total, hand size
- Inspector panel: edit event properties (cards via Scryfall autocomplete, life amounts)
- Decklist import - paste a decklist in MTGO format per player; card data and images are bulk-fetched from Scryfall once and cached locally for the session
- Autocomplete in event fields draws from the cached deck first, falling back to global Scryfall search for off-deck cards
- Cards-in-hand display - always-visible stacked card title crops per player (Card Kingdom / Mengu's Workshop style), rendered from the local image cache
- Project export/import - save and load the full timeline (players, events, clips, deck data) as a
.spsfile; media sources relink on open via a file picker - Video export - render the overlay baked into the video, or export overlay-only, directly in the browser
- Player name & deck name editing in Inspector - changes reflect on the overlay in real time
- Complete all event types and state handlers:
- Add to Hand
- Remove from Hand
- Gain Life
- Lose Life
- Display Card
- Reveal from Hand
- Stack Deck
- Unstack Deck
Live streaming support and full creative control over the overlay.
- Non-linear video editing - Sources panel holds imported video files; drag clips onto a dedicated video track on the timeline just like events; cuts and trims work without affecting overlay event timing since everything lives in output-timeline time
- Annotation system - generic titled card-list overlays replacing the hardcoded deck-stack; multiple simultaneous annotations per player (e.g. "Top of deck" + "Pithing Needle naming"); project-level slot registry with system slots and user-defined slots; slot titles are editable and resolve at render time so macros can target slots by ID regardless of what the user named them
- Built-in macro library - predefined event sequences for common spells (e.g. Brainstorm: +3 to hand, −2 from hand, annotate top-of-deck slot ×2)
- User-defined macros - create, name, and reuse custom event sequences without waiting for app-side support
- Overlay UI editor - drag, resize, and style every overlay element; choose fonts, colors, backgrounds, and which stats to show per player
- Layout export & sharing - export your overlay layout to a file and share it with others
- Add / remove players - manage the player roster from within the app
- Live overlay mode - manage an event stack in the controller, overlay renders chroma-keyed and syncs via BroadcastChannel; opens as a popup window for clean OBS Window Capture
Native desktop experience with offline-first card data and faster video export, built on Tauri (Rust backend + system webview).
- Tauri wrapper - same React UI, distributed as a native desktop app (~5–10 MB runtime vs ~150 MB for Electron)
- FFmpeg video export - replace WebCodecs pipeline with FFmpeg via Rust backend; order-of-magnitude faster, works on all platforms
- Scryfall bulk data - download the full card database (~2.3 GB) on first run; SQLite + FTS5 index (via
rusqlite) for sub-millisecond lookups with no API rate limits
Spellsplice is unofficial Fan Content permitted under the Wizards of the Coast Fan Content Policy. Not approved/endorsed by Wizards. Portions of the materials used are property of Wizards of the Coast. ©Wizards of the Coast LLC.
Wordmark uses FORQUE by Tup Wanders (CC BY).
Timeline event icons courtesy of game-icons.net (CC BY 3.0).