How to vibe codeSkribbl
AI agent orchestration IDE built around an infinite canvas workspace
skribbl.dev ↗Developer Tools
The verdict: can you vibe code Skribbl?
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.
Estimated effort: 6+ weeks of focused 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
Founded
2026
Raised
—
Team
Solo developer / small indie team
Cheapest paid tier
$39/year
What Skribbl 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
- Standard Subscription$99/year or $12/month
Funding
Unknown / bootstrapped
Pay vs build, cumulative
No break-even inside 24 months at these numbers.
The hard parts of vibe coding Skribbl
- 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 vibecode Skribbl
Prerequisites
macOS (Apple Silicon)Owned hardware
Target platform for native system tools and binary compatibility.
Node.jsfree
Runtime environment for Electron, React, and local helper servers.
tmuxfree
Required terminal multiplexer for session persistence across app restarts.
AI coding tools
Recommended 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 & infrastructure
| None | Runs entirely locally on your Mac; $0/mo cloud infrastructure. | $0/mo |
Build guide
01Scaffold 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).02Integrate 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.03Implement 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 <target>`) that queries the node's local neighbourhood and rejects any dispatch attempt if no qualifying directed link exists between the source and target agent.04Git 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.05Local 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 for Skribbl
What will you build it with?
Starting total with Cursor~$99 one-time
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 Skribbl
$12/mo ($39/yr founding)
Your time to build
45-60 hours
AI tool credits
$20/mo (Cursor Pro / Claude Code)
Break-even
Never (commercial software is cheaper, built for learning/fun)
Own Skribbl? Wear the score
Put this badge on your site or README — it links back to this report.
<a href="https://vibeityourself.com/app/skribbl"><img src="https://vibeityourself.com/badge/skribbl" alt="Skribbl vibe-codeability score" /></a>[](https://vibeityourself.com/app/skribbl)Vibe code Skribbl: FAQ
- Can you vibe code Skribbl yourself?
- Serious undertaking — 35/100 vibecodeable. 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.
- How long does it take to vibe code Skribbl?
- 6+ weeks of focused work — roughly 45-60 hours of hands-on time with an AI coding agent.
- How do you build your own Skribbl?
- Scoped to personal use: Electron + React + TypeScript + Tailwind CSS + React Flow + xterm.js on the front, Node.js local loopback server + node-pty + tmux behind it, Local JSON / JSONL state files stored in user data directory for data. Follow the 5-step build guide on this page — each step has a paste-ready prompt for an AI coding agent.
- How do you code your own Skribbl without being an expert?
- Use an AI coding tool (Cursor or Claude Code) and work in small steps: scaffold, data model, core screens, then deploy. Realistic effort: 6+ weeks of focused work. The prompts on this page are written so the AI does the heavy lifting.
- How much does it cost to vibe code Skribbl instead of paying?
- About $0 one-time (local build) to start and $20/mo to run, versus $12/mo ($39/yr founding) for Skribbl. Break-even: Never (commercial software is cheaper, built for learning/fun).
- What stack should you use to vibe code Skribbl?
- Electron + React + TypeScript + Tailwind CSS + React Flow + xterm.js; Node.js local loopback server + node-pty + tmux; Local JSON / JSONL state files stored in user data directory; plus electron-builder, claude-code-spend (reference parser).
Methodology
This report was generated by VibeItYourself's standard pipeline: we scrape skribbl.dev (content, branding, screenshot), deep-research the company with AI + web search (pricing, funding, team, engineering complexity), then score rebuild feasibility 0–100 against the same rubric used for every app — scoped to a personal-use clone, not a competing business. How scoring works. Verdicts are honest by design: what you can't replicate is listed above.
Last verified: