Spark Program | Cell Sandbox — A Visual Playground for the CKB Cell Model

zynor · July 13, 2026, 11:40am

Weekly Sync: Milestone 1 Progress Update

Hi everyone,

This week I worked on the Milestone 1 flow for Cell Sandbox and pushed the latest updates for review.

Live demo:

Repository:

Merged PR:

github.com/zynorr/cell-sandbox

Implement Milestone 1 guided sandbox flow

main ← codex/milestone-1

opened 10:53AM - 13 Jul 26 UTC

zynorr

+1778 -479

## Summary - Implement Milestone 1 guided flow: Learn, Design Cells, Inspect Tx,… and Build Tx - Add CKB docs-aligned copy for Cells, capacity, lock scripts, type scripts, and transactions - Add transaction inspector, workspace status strip, guided panels, README screenshots, and reviewer walkthrough - Polish Build Tx output selection, wallet/faucet balance flow, and send explanation ## Verification - tsc --noEmit - eslint - vitest run (69 tests) - next build - Playwright walkthrough: Learn -> Design -> Build Tx -> mark Output -> wallet/send explanation on desktop and mobile

What i Worked On

Milestone 1 is focused on making Cell Sandbox easier to understand as a visual playground for the CKB Cell model.

The current flow is:

Learn → Design Cells → Inspect Tx → Build Tx

Updates So Far

Added a Learn view to introduce the Cell model before users start editing fields.
Added a How to Use guide and Start Here panel.
Improved wording around CKB concepts:
- Cells as state containers
- Capacity as storage limit and CKB amount in shannons
- Lock scripts as ownership/spending rules
- Type scripts as optional state-transition rules
- Transactions consuming live input Cells and creating new output Cells
Added a transaction inspector for full transaction hashes.
Improved the Build Tx page so users understand that designed Cells are local drafts until they are marked as Outputs.
Clarified that wallet inputs are supplied automatically when sending.
Fixed faucet response handling and wallet balance refresh behavior.
Improved Build Tx scrolling and responsive layout.
Added README screenshots and a reviewer walkthrough.

Suggested Review Flow

Open the live demo.
Start from Learn and read the Cell model explanation.
Move to Design Cells and inspect or edit a Cell.
Open Inspect Tx and load the sample transaction.
Move to Build Tx.
Click Output under a designed Cell.
Check whether the transaction flow and wallet/send explanation feel clear.

Verification

So far, I have verified locally with:

TypeScript check
ESLint
Vitest test suite
Next.js production build
Desktop and mobile walkthroughs

Feedback Welcome

I would appreciate feedback on whether the Milestone 1 flow feels clear enough for new CKB developers, especially around the transition from designing a local Cell to marking it as a transaction output.

Next, I plan to continue with wallet selector work and further refine the wallet/send experience based on feedback.