Can Skribbl be vibe coded?
Infinite canvas where coding agents run as live terminal nodes you wire together by drawing
The canvas is the easy half. React Flow plus xterm.js plus node-pty gets you panning, zooming and half a dozen live agent terminals in a focused implementation, and it is a genuinely nice way to watch a fleet work. The gaps are all in the boring layer underneath: knowing when an agent is actually blocked on you rather than just quiet, keeping sessions alive across a restart or a crash, and counting tokens accurately enough that the number can be trusted. Each of those is days of work on its own, and the focused build reads as finished until the first agent silently dies behind a tab you were not looking at.
Jump to the build brief ↓Legacy-calibrated assessment
Checked Aug 2026
What you pay today, before any DIY hosting
medium editorial confidence
Tracked separately from the pricing check
Buildability by layer
Screens, forms, and focused interactions
The repeatable job the product performs
Availability and legality of required data
Uptime, queues, support, and maintenance
Security, compliance, and user confidence
The achievable core
- Spawn real shells as draggable nodes on a pan/zoom canvas, run a coding agent in each one, and watch several of them work side by side.
- Build the focused developer workflow you use repeatedly, with local configuration.
- A responsive interface with real empty, loading, success, and error states.
The parts a prompt cannot buy
- hook-driven agent status, so a blocked agent looks the same as an idle one
- session survival across restarts and crashes
- an accurate token meter, cache reads price nothing like input tokens
- a signed and notarized Mac build, so Gatekeeper blocks what you ship to anyone else
- The last 20 percent is sync, migration fidelity, speed, and edge cases.
- Connectors, OAuth flows, and vendor API changes require constant upkeep.
Build, switch, or keep paying
Narrower, with trade-offs
Spawn real shells as draggable nodes on a pan/zoom canvas, run a coding agent in each one, and watch several of them work side by side.
Use the build brief ↓No checked option yet
Compare the prior art below or build only the workflow you need.
$8.25/mo
Not for the canvas. For the layer that keeps twelve child processes honest: status that comes from the agent itself instead of scraped output, sessions that come back after a reboot, and a spend number accurate enough to act on before the bill arrives.
Visit Skribbl ↗Why people still pay
Not for the canvas. For the layer that keeps twelve child processes honest: status that comes from the agent itself instead of scraped output, sessions that come back after a reboot, and a spend number accurate enough to act on before the bill arrives.
The last 20 percent is sync, migration fidelity, speed, and edge cases.
Connectors, OAuth flows, and vendor API changes require constant upkeep.
The brief
Context, requirements, acceptance criteria, non-goals, and the full production standard — as Markdown, ready for any coding agent.
Build brief — a focused alternative to Skribbl
Context
Skribbl — Infinite canvas where coding agents run as live terminal nodes you wire together by drawing. It currently costs $8.25/mo.
The canvas is the easy half. React Flow plus xterm.js plus node-pty gets you panning, zooming and half a dozen live agent terminals in a focused implementation, and it is a genuinely nice way to watch a fleet work. The gaps are all in the boring layer underneath: knowing when an agent is actually blocked on you rather than just quiet, keeping sessions alive across a restart or a crash, and counting tokens accurately enough that the number can be trusted. Each of those is days of work on its own, and the focused build reads as finished until the first agent silently dies behind a tab you were not looking at.
This brief describes a focused, single-operator replacement for the part of Skribbl that is genuinely reproducible. It is deliberately narrower than the product it replaces, and it says so in writing. Build the useful core; do not pretend to have rebuilt the rest.
What you are building
Spawn real shells as draggable nodes on a pan/zoom canvas, run a coding agent in each one, and watch several of them work side by side.
Build the focused developer workflow you use repeatedly, with local configuration.
A responsive interface with real empty, loading, success, and error states.
Requirements
Functional
Node 20 and native build tools for node-pty.
A coding agent CLI already installed and authenticated.
Tmux, if you want sessions to survive a restart.
Non-functional
Accessibility: semantic markup, labelled controls, visible focus, and reduced-motion support.
Security: server-side secrets, validated input, and no credentials in the client bundle.
Reliability: retries with backoff on external calls, and a clear failure state when a provider is down.
Portability: the operator can export their data and leave without losing it.
Implementation brief
Build me a canvas for running several coding agents at once, like Skribbl. Requirements:
Electron plus React, with React Flow for the pan/zoom canvas and xterm.js plus
node-pty for the terminals. No web version, this is a desktop app.
Each node is a real shell in its own process, spawned with node-pty in a working
directory I pick per node. Double click empty canvas to add one, and let me type in
it exactly like a normal terminal.
Node position, size, title and cwd persist to a JSON file in the Electron userData
folder, restored on launch. The shells themselves do not survive, say so in the UI
rather than pretending they do.
Spawn each shell inside tmux new-session -A -s <nodeId> so a crashed window can
reattach to the running agent instead of killing it. Budget real time for this, the
reattach and scrollback restore is the fiddly part of the whole build.
Drag from one node to another to draw a link, and store the links with a direction.
Right click a link to delete it. Links are just recorded relationships for now, no
message passing between agents.
A top bar counting tokens per node, parsed from each agent CLI's own usage output.
Keep input, output, cache write and cache read as four separate counters, never sum
them into one number, a cache read costs about a tenth of an input token.
Out of scope: multiplayer, cloud sync, code signing, and any status indicator you
would have to infer by scraping terminal output. Guessing wrong there is worse than
showing nothing.
README with the node-pty rebuild step for your Electron version, which is the one
thing that will break on a fresh machine.
Delivery standard
Inspect the repository first, then write a short implementation plan before writing code.
Deliver the smallest complete end-to-end workflow first; every primary control must work against persisted data.
Use real validation and storage; never substitute fake dashboards, decorative controls, hard-coded success states, or mock integrations.
Include responsive layouts plus genuine empty, loading, success, validation, and failure states.
Keep secrets server-side in environment variables, provide .env.example, and never commit credentials or user data.
Add structured logs around every external call and return actionable errors without leaking sensitive details.
Write unit tests for the core logic and one automated test of the main user journey.
Finish with a README covering setup, architecture, data location, backups, tests, deployment, and known limitations.
Acceptance criteria
A clean install starts the app using only the README and .env.example.
The primary journey works from first visit through saved result, reload, edit, export, and deletion where applicable.
Invalid input, missing configuration, provider failure, and an empty database each have a usable state.
The interface works at 390px and 1440px, is keyboard navigable, and shows visible focus on every control.
Tests, type checking, linting, and a production build all pass with no ignored failures.
No part of the interface implies a live integration, security guarantee, or scale capability that was not actually built and verified.
Non-goals
Do not build these, and do not claim to have replaced them:
Hook-driven agent status, so a blocked agent looks the same as an idle one.
Session survival across restarts and crashes.
An accurate token meter, cache reads price nothing like input tokens.
A signed and notarized Mac build, so Gatekeeper blocks what you ship to anyone else.
What you still own after launch
Run migrations, backups, restores, and dependency updates.
Test the critical journey after every model, API, or hosting change.
Monitor failures and fix the edge cases a first prompt will miss.
Maintain every third-party integration as APIs and OAuth rules change.
Risk
Operational risk. The code is achievable; dependable data, integrations, and ongoing operations are the real cost.
Editorial confidence in this assessment: medium. No reviewed project implementation is linked yet.
Prior art
Working open-source software you can read, fork, or borrow from before starting:
claude-squad — open-source terminal manager for multiple agents in tmux and git worktrees
Crystal — open-source desktop app running parallel agent sessions in worktrees
vibe-kanban — open-source board for queueing and reviewing coding agent tasks
Generated by Can It Be Vibe Coded? · Full report: https://www.canitbevibecoded.com/skribbl
You still own the product
- Run migrations, backups, restores, and dependency updates.
- Test the critical journey after every model, API, or hosting change.
- Monitor failures and fix the edge cases a first prompt will miss.
- Maintain every third-party integration as APIs and OAuth rules change.
Projects built from this idea
No reviewed implementation has been linked for Skribbl yet. A submission is evidence for review, not automatic proof that the whole product was replaced.
Built a version of Skribbl?Submit the project as evidence for this report.
Open-source prior art
Before you start
Can Skribbl be vibe coded?
Partly, if you narrow it. The canvas is the easy half. React Flow plus xterm.js plus node-pty gets you panning, zooming and half a dozen live agent terminals in a focused implementation, and it is a genuinely nice way to watch a fleet work. The gaps are all in the boring layer underneath: knowing when an agent is actually blocked on you rather than just quiet, keeping sessions alive across a restart or a crash, and counting tokens accurately enough that the number can be trusted. Each of those is days of work on its own, and the focused build reads as finished until the first agent silently dies behind a tab you were not looking at.
What can an AI coding agent reproduce from Skribbl?
Spawn real shells as draggable nodes on a pan/zoom canvas, run a coding agent in each one, and watch several of them work side by side. Build the focused developer workflow you use repeatedly, with local configuration. A responsive interface with real empty, loading, success, and error states.
What will a DIY Skribbl replacement still be missing?
hook-driven agent status, so a blocked agent looks the same as an idle one; session survival across restarts and crashes; an accurate token meter, cache reads price nothing like input tokens; a signed and notarized Mac build, so Gatekeeper blocks what you ship to anyone else; The last 20 percent is sync, migration fidelity, speed, and edge cases.; Connectors, OAuth flows, and vendor API changes require constant upkeep.
What do I still own after building a Skribbl alternative?
Run migrations, backups, restores, and dependency updates. Test the critical journey after every model, API, or hosting change. Monitor failures and fix the edge cases a first prompt will miss. Maintain every third-party integration as APIs and OAuth rules change.