> ## Documentation Index
> Fetch the complete documentation index at: https://ckbfans.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Playground

> A browser-based coding environment for CKB. Run TypeScript instantly — no setup, no install.

The [CCC Playground](https://live.ckbccc.com/) is a browser-based TypeScript environment for experimenting with CKB. Open it, write code, and run it immediately — no local setup required.

<Card title="Open the Playground" icon="play" href="https://live.ckbccc.com/">
  Run CKB code in your browser at live.ckbccc.com
</Card>

## Cell visualization

The playground renders cells graphically so you can watch your transaction take shape as each step completes.

Each cell is drawn as three concentric layers:

* **Outer ring** — lock script (ownership). Cells with the same outer ring color share the same lock script.
* **Inner ring** — type script (asset type). Cells with the same inner ring color share the same type script.
* **Center fill** — occupancy. A filled center circle means all CKB capacity in that cell is used to store data.

When the lock and type scripts are identical, the outer and inner rings show the same color. Click any cell to inspect its full details.

## Share code via URL

The playground loads a script from the `?src=` query parameter. Pass any raw URL to a `.ts` file and the playground fetches and runs it:

```
https://live.ckbccc.com/?src=<raw-url-to-your-script.ts>
```

You can share your own scripts the same way — host the file anywhere accessible, then send the URL.

## Example scripts

The following examples are available in the [CCC repository](https://github.com/ckb-devrel/ccc/tree/master/packages/examples/src). Click any card to open it in the playground.

<CardGroup cols={2}>
  <Card title="Transfer CKB" icon="paper-plane" href="https://live.ckbccc.com/?src=https://raw.githubusercontent.com/ckb-devrel/ccc/refs/heads/master/packages/examples/src/transfer.ts">
    Build a transaction that transfers 100 CKB to an address, filling inputs and paying the fee automatically.
  </Card>

  <Card title="Transfer all CKB" icon="arrow-right-arrow-left" href="https://live.ckbccc.com/?src=https://raw.githubusercontent.com/ckb-devrel/ccc/refs/heads/master/packages/examples/src/transferAll.ts">
    Collect every cell owned by the signer and sweep the full balance to a single output.
  </Card>

  <Card title="Sign a message" icon="signature" href="https://live.ckbccc.com/?src=https://raw.githubusercontent.com/ckb-devrel/ccc/refs/heads/master/packages/examples/src/sign.ts">
    Sign a message with a CKB signer and verify the signature using `ccc.Signer.verifyMessage`.
  </Card>

  <Card title="Transfer UDT" icon="coins" href="https://live.ckbccc.com/?src=https://raw.githubusercontent.com/ckb-devrel/ccc/refs/heads/master/packages/examples/src/transferUdt.ts">
    Transfer an xUDT token by building a transaction with `ccc.udt.Udt`, filling UDT inputs, capacity inputs, and fees.
  </Card>

  <Card title="Custom UI" icon="paintbrush" href="https://live.ckbccc.com/?src=https://raw.githubusercontent.com/ckb-devrel/ccc/refs/heads/master/packages/examples/src/customUi.ts">
    Connect a JoyID signer directly without the built-in connector UI, using `ccc.JoyId.CkbSigner`.
  </Card>

  <Card title="Custom UI with controller" icon="sliders" href="https://live.ckbccc.com/?src=https://raw.githubusercontent.com/ckb-devrel/ccc/refs/heads/master/packages/examples/src/customUiWithController.ts">
    Use `ccc.SignersController` to enumerate all available wallets and signers, then connect to one programmatically.
  </Card>
</CardGroup>

## CCC App

The [CCC App](https://app.ckbccc.com/) is a hosted mini-toolset built with CCC. It covers transfers, UDT issuance, Spore NFTs, Nervos DAO, and more. You can use it directly without being a developer.

<Tip>
  The CCC App and the playground share many of the same example scripts. Use the app for a polished UI, and the playground when you want to inspect or modify the underlying code.
</Tip>