# How to Vibe Code Your Own Skribbl (and Stop Paying for It) > AI agent orchestration IDE built around an infinite canvas workspace - Site: https://skribbl.dev - Category: Developer Tools - Verdict: **Serious undertaking** (35/100 vibecodeable) - Estimated effort: 6+ weeks of focused work ## Verdict You can build a functional single-agent canvas wrapper, but matching the deep local PTY integration, tmux session resilience, and drawn-authority state machine requires significant engineering depth. Skribbl is deceptively complex. While building a React Flow canvas with some styled boxes is straightforward, wiring up real pseudo-terminals via `node-pty`, persisting sessions across Electron crashes with `tmux`, automating git worktrees cleanly, and writing a local loopback hook server to track token usage multipliers accurately will test a solo developer's patience. An AI coding agent can scaffold the UI rapidly, but debugging raw terminal stream escaping, pointer events over terminal panes, and multi-agent permission graph enforcement involves intricate systems work. ### What you can't replicate - The exact polish and muscle memory of a purpose-built desktop orchestration shell - The massive corpus-derived telemetry rules for cache-tier token pricing without reverse-engineering local JSONL logs ## What it does Skribbl is a desktop IDE that runs multiple coding agents (Claude Code, Codex, Gemini, Grok) side-by-side in real terminal nodes on an infinite canvas, where drawing lines between nodes governs agent authority and permissions. ### Core features - Infinite pan-and-zoom canvas with React Flow node management - Real pseudo-terminal (`node-pty` + `tmux`) integration for CLI agents - Drawn authority links (SVG paths determining dispatch permissions) - Automated git worktree orchestration (`git worktree add`) per agent - Granular token cost and cache-tier accounting (deduplicating JSONL log streams) - Local hook loopback server for real-time agent status updates - Persistent state across app restarts via local file stores and tmux ## The business ### Pricing - Founding Infinity Plan: $39/year — Limited to the first 100 seats before pricing increases. - Standard Subscription: $99/year or $12/month — Standard recurring pricing for annual or monthly access. Founded 2026. Team size: Solo developer / small indie team. ## The hard parts - Reliably bridging `node-pty` outputs and `tmux` session persistence inside an Electron app without scrollback loss - Handling real-time token metering with precise differentiation of ephemeral 1h vs 5m cache write multipliers - Automating clean git worktrees so multiple concurrent coding agents don't corrupt repository state or file locks - Synchronizing gesture-drawn authority lines with an underlying execution dispatcher so agents can only command linked neighbours ## How to vibe code Skribbl ### Prerequisites - macOS (Apple Silicon) (Owned hardware): Target platform for native system tools and binary compatibility. - Node.js (free): Runtime environment for Electron, React, and local helper servers. - tmux (free): Required terminal multiplexer for session persistence across app restarts. ### Recommended AI tools - Cursor: AI-native code editor ideal for generating complex Electron, React Flow, and native bindings. - Claude Code: Command-line agentic coding tool capable of building multi-file desktop applications. ### Stack - Frontend: Electron + React + TypeScript + Tailwind CSS + React Flow + xterm.js - Backend: Node.js local loopback server + node-pty + tmux - Database: Local JSON / JSONL state files stored in user data directory - Auth: Local subscription key verification / Bring-your-own-keys - Payments: None (local personal app clone) - Other: electron-builder, claude-code-spend (reference parser) ### Hosting - None (Runs entirely locally on your Mac; $0/mo cloud infrastructure.): $0/mo ### Build guide 1. **Scaffold Electron Desktop Shell & Canvas** — Initialize a strict TypeScript Electron app using Vite and React, integrating React Flow for an infinite pan-and-zoom canvas supporting custom terminal and note nodes. ``` Create a strict TypeScript Electron app using Vite, React, and Tailwind CSS. Configure electron-builder for macOS Apple Silicon. Implement a main layout shell with a top status bar and a left tool rail for drawing controls (Select, Hand, Lasso, Grant, Spawn, Kill, Annotate). Render a React Flow canvas as the central workspace. Ensure nodes snap to a 22px grid, inflate around neighbours when spawned, and persist positions locally in app data. Add keyboard shortcuts for tool switching (V, H, L, G, N, K, A) and panel toggles (⌘K, ⌘N, ⌘B, ⌘T). ``` 2. **Integrate node-pty and tmux Terminal Nodes** — Implement terminal nodes inside the Electron app using node-pty and xterm.js, backed by tmux sessions for persistence across app restarts. ``` Implement custom React Flow nodes that embed xterm.js instances driven by node-pty on the main Electron process. For every spawned terminal node, generate a persistent tmux session named after the node identifier so sessions survive app restarts and closing windows. Implement scrollback snapshotting so restored nodes display previous terminal activity. Ensure resizing the canvas node correctly resizes the underlying PTY and xterm terminal columns and rows. ``` 3. **Implement Drawn Authority & Dispatch Engine** — Add SVG gesture lines on the canvas to represent permission links, creating a router that enforces that commands only flow along valid directed edges. ``` Build an interactive drawing layer on the React Flow canvas using SVG paths for the Grant (G), Share, and Chain gestures. When a user draws a line from Agent A to Agent B, register a directed permission link in local state. Implement a CLI dispatch command helper (`skribbl dispatch --to `) that queries the node's local neighbourhood and rejects any dispatch attempt if no qualifying directed link exists between the source and target agent. ``` 4. **Git Worktree Automation** — Automate git worktree creation so spawned agents operate on isolated branches of the same repository without file locking collisions. ``` Add a New panel (⌘N) modal in React that lets users specify a repository, branch name, quantity, and permission mode (Plan, Ask, Edits, Auto, Bypass). When spawning agents into a worktree, programmatically execute `git worktree add` prior to launching the CLI process in that directory's cwd. Handle worktree creation failures gracefully by falling back to the main checkout and displaying a clear warning toast in the app UI. ``` 5. **Local Hook Server & Token Metering** — Spin up a lightweight local loopback server to ingest status hooks and compute accurate token costs differentiating cache reads and cache write tiers. ``` Implement a lightweight local loopback HTTP server in the Electron main process to receive status hooks from CLI agents (session start, prompt submitted, tool use, stop, permission requested). Update React UI status lights dynamically from hook events rather than terminal text scraping. Implement a token cost accounting utility that parses local Claude JSONL session transcripts under ~/.claude/projects/, deduplicates calls globally by (message.id, requestId), and prices cache reads (0.1x), 5-minute cache writes (1.25x), and 1-hour cache writes (2x) separately to render a live ten-block spend meter in the top bar. ``` ### Cost vs paying **Starting costs (one-time):** - Apple Developer Account (optional for personal local build): $99/yr - Total: $0 one-time (local build) **Ongoing costs (monthly):** - AI coding tools subscription: $20/mo - Total: $20/mo - Paying for the SaaS instead: $12/mo ($39/yr founding) - Build time: 45-60 hours - AI tool credits: $20/mo (Cursor Pro / Claude Code) - Break-even: Never (commercial software is cheaper, built for learning/fun) ## Sources - [Skribbl Home Page](https://skribbl.dev) - [Skribbl Pricing Page](https://skribbl.dev/pricing) - [Skribbl Blog - Claude Code Cache Pricing](https://skribbl.dev/blog/claude-code-cache-pricing) - [Skribbl About Page](https://skribbl.dev/about) - [Skribbl Documentation](https://skribbl.dev/docs)