- Project Name
Cell Sandbox — A Visual Playground for the CKB Cell Model - Team / Individual Profile and Contact Information
-
Name: zynorr
-
Role: Sole developer and maintainer
-
Background: Full-stack engineer with deep experience in TypeScript, React, Next.js, and the CKB ecosystem. Built the entire Cell Sandbox
-
github: zynorr (zynor) · GitHub
email : [email protected]
Telegram @zynorlawesProject Description
Problem
CKB’s cell model is powerful but has a steep learning curve. Understanding how cells work capacity, lock scripts, type scripts, data encoding typically requires reading multiple RFCs and piecing together examples from documentation. There is no interactive, visual way to explore the cell model, design cells, and see how they fit into transactions before writing code.
Newcomers to CKB face a significant onboarding barrier: they need to understand the cell model conceptually, learn the correct script configurations, debug data encoding formats, and figure out how transactions work — all before they can send their first meaningful transaction.Solution
Cell Sandbox is a browser-based visual development environment for the CKB cell model. It makes the cell model tangible through interactive design and real-time feedback. Users can design cells through intuitive forms, see their structure rendered as SVG diagrams, assemble them into transactions with one click, and broadcast to testnet all without writing code.The MVP is already live and functional at cell-sandbox-seven.vercel.app and includes:
-
Visual cell designer with capacity, lock/type scripts, and data editing
-
9 known scripts in a registry (Secp256k1, Omnilock, xUDT, Spore, DAO, Cheque, Type ID, Always Success)
-
6 cell templates covering token, NFT, DAO, auth, and demo patterns
-
SVG cell visualization with color-coded concentric rings
-
Data editor with hex/text/number modes and auto-parsed preview (xUDT amounts, DAO blocks, Spore content)
-
Transaction flow builder using React Flow with input/output assignment, balance tracking, and fee estimation
-
JoyID wallet integration with send-to-chain capability
-
Testnet faucet claiming with status polling
-
Cell loading from chain by outpoint
-
CCC-compatible TypeScript code export
-
Zod-validated shareable URLs
-
Network switching between Pudge testnet and mainnet
-
14 passing tests, zero type errors
Repository: GitHub - zynorr/cell-sandbox · GitHubHow this differs from existing CKB tools
CCC already ships two visual applications: live.ckbccc.com and app.ckbccc.com
Cell Sandbox occupies a different niche:
CCC Playground = code-first. Write TypeScript, see the resulting transaction.
CCC App = task-first. Select a pre-built operation (e.g., “Send xUDT”), fill parameters.
Cell Sandbox = free-form design. Design any cell from scratch by filling fields in a visual form, assemble cells into a transaction with drag-and-drop, visualize the structure as SVG, and export back to CCC-compatible code.
Cell Sandbox fills the “blank canvas” gap it’s for learning and prototyping when you don’t yet know what you want to build, or when you want to understand how a cell configuration maps to a real transaction before writing any code.
Expected Deliverables
-
Code repository - All code remains open source in the existing GitHub repository (MIT), with continued maintenance and issue tracking
-
4 new cell templates - Spore Cluster, Cheque payment, mNFT, Time-lock — expanding coverage of real CKB dApp patterns
-
Multi-source transaction inputs - Support for specifying input cells by raw outpoints, enabling transactions that reference real on-chain cells alongside editor-designed cells
-
Script hash computation - Display computed script hash and CKB address from lock script fields
-
Transaction history - Local storage of sent transactions with status, timestamps, and explorer links
-
Documentation - Video tutorial and written walkthrough published on Nervos Talk and YouTube
-
Expanded test suite - Additional tests covering store slices, transaction flow, and edge cases
-
Final report - Summary of work completed, community feedback, and usage metrics
How to Verify
All on-chain deliverables will be submitted with Pudge testnet transaction hashes and/or outpoints that a reviewer can confirm in the explorer:
4 new cell templates (Spore Cluster, Cheque, mNFT, Time-lock)
Open Cell Sandbox, select each template from the template picker, and confirm the cell form is pre-populated with the correct lock/type scripts, capacity, and data. Then assemble a minimal transaction and broadcast it. Each template produces a valid testnet transaction — the tx hash will be recorded in the project README and linked on the Nervos Explorer for direct verification.
Multi-source transaction inputs
Open the transaction builder, paste a valid outpoint from an existing testnet cell (e.g., from the explorer) alongside a cell designed in the editor, assign both as inputs, and confirm the balance tracker correctly accounts for the combined capacity. Sign and broadcast — the resulting tx will show both input origins on the explorer.
Script hash computation and CKB address display
Design a cell with any lock script (e.g., Secp256k1 with a known public key hash). The UI will display the computed script hash and derived CKB address. Verify correctness by checking the same script hash against a tool like ckb-cli util key-info or by looking up the address on the testnet explorer.
Transaction history with local storage and status tracking
Send a transaction through the tool, then close and reopen the browser tab. The sent transaction appears in the history panel with its status (pending / committed / failed), timestamp, and an explorer link. Click the link to confirm the tx exists on chain.
Expanded test suite (14 → 25+ passing tests)
Run pnpm test from the repository root. All tests pass with zero type errors when checked with pnpm typecheck .
-
Required Funding
Total request: $1,500
The MVP is already built and functional. This grant funds focused effort on the next phase of development, testing, documentation, and community outreach.
Breakdown: -
Development ($1,100) — Two months of part-time work (roughly 5–8 hours per week) covering new templates, multi-cell transactions, script hash computation, transaction history, and expanded testing.
-
Infrastructure ($150) — Vercel Pro hosting for faster edge function responses (critical for the faucet proxy).
-
Community content ($250) — Production of a tutorial video (editing, narration), written guide, and engagement on Nervos Talk and Discord.
The amount is kept reasonable because the core application is already built. This funding accelerates the transition from MVP to a polished, well-documented community resource.
Milestones
Milestone 1 — Templates & Multi-Input Support (Month 1) -
4 new cell templates implemented and merged
-
Multi-source transaction inputs functional (raw outpoints accepted alongside editor cells)
-
Script hash computation and address display working
-
Improved error messages for common on-chain failures
Milestone 2 — Polish, Testing & Documentation (Month 2)
-
Transaction history feature with local storage and status tracking implemented
-
Test suite expanded with additional coverage for store slices and transaction flow
-
Video tutorial and written walkthrough published
-
Responsive layout and UI polish completed
-
Final report submitted
Estimated Completion Time
2 months
All deliverables are achievable within this window because the architecture, store, components, and deployment pipeline are already in place. The work is additive — extending existing systems rather than building from scratch. -
Clear To-do List
Month 1: Feature Expansion
Add 4 new cell templates: Spore Cluster, Cheque payment, mNFT, Time-lock
Implement multi-source transaction inputs (paste raw outpoints alongside editor cells)
Add script hash computation from code hash + hash type + args with address display
Improve error messages for common on-chain failures (insufficient capacity, missing deps, invalid args)
Month 2: Polish, Testing, and Documentation
Implement transaction history with local storage and status tracking
Expand test suite — add tests for store slices and transaction flow components
Create video tutorial and written walkthrough
Polish pass: responsive layout, loading states, keyboard shortcuts
Collect community feedback on Nervos Talk and Discord
Write final report summarizing deliverables and usage metricsRelevance to the CKB Ecosystem
Cell Sandbox serves a clear and currently unmet need in the CKB ecosystem:
Meeting actual needs -
There is no existing browser-based visual tool for designing CKB cells and building transactions. Cell Sandbox fills this gap as an interactive, no-code entry point to CKB development.
-
It serves as an onboarding funnel: a new developer can go from zero to “I sent a CKB transaction” in under 5 minutes without installing anything. This directly lowers the barrier to entry for the Nervos ecosystem.
-
The template system demonstrates real CKB patterns (xUDT, Spore, DAO, Omnilock) with correct code hashes, hash types, and cell deps serving as both an educational reference and a starting point for real dApp development.
-
The code export feature generates CCC-compatible TypeScript, bridging the gap between visual design and production development.
Utilizing CKB’s technical architecture -
Cell Sandbox is built on CCC (CKB Core Components), the modern CKB TypeScript SDK, serving as a reference implementation for CCC + JoyID integration in a Next.js application.
-
It leverages CKB’s unique cell model architecture the separation of lock and type scripts, capacity as a first-class resource, and custom data encoding conventions making these concepts tangible through interactive visualization.
-
The transaction flow builder demonstrates CKB’s transaction structure (inputs consuming cells, outputs creating new cells, cell deps providing script code) in a visual, intuitive way.
-
By making the cell model visually accessible, it highlights CKB’s architectural strengths: programmable state with verifiable type constraints, explicit capacity management, and script-based ownership.
Report Metrics
Testnet transactions sent through the tool (target: 50+ unique txs) -
Unique users (via Vercel Analytics — target: 200+)
-
GitHub stars (target: 20+ new stars)
-
Template usage — anonymous tracking of which templates are loaded (target: 100+ template loads)
-
Community engagement — x post (target: 500+ views, 10+ replies),
-
Passing test count — expanded from 14 to 25+
Try the live demo: https://cell-sandbox-m.vercel.app/
Repository: GitHub - zynorr/cell-sandbox · GitHub