Browse our collection of runnable code examples and interactive tools. Cards tagged **playground** open directly in the [CCC Playground](https://live.ckbccc.com/); cards tagged **app** link to the [CCC App](https://app.ckbccc.com/) — a mini-toolset for CKB that lets you perform common operations through a graphical interface, even if you're not a developer.

Use the tag filter below to narrow down examples by category.

<ExampleGrid
  lang="en"
  items="[
{
  title: &#x22;Transfer CKB&#x22;,
  description: &#x22;Send a specified amount of native CKB to another address. Demonstrates the declare → fill → fee → send pattern.&#x22;,
  href: &#x22;https://live.ckbccc.com/?src=https://raw.githubusercontent.com/ckb-devrel/ccc/refs/heads/master/packages/examples/src/transfer.ts&#x22;,
  tags: [&#x22;playground&#x22;, &#x22;transaction&#x22;],
  source: &#x22;packages/examples/src/transfer.ts&#x22;,
},
{
  title: &#x22;Transfer All CKB&#x22;,
  description: &#x22;Sweep an entire wallet's CKB balance into a single output. Uses completeInputsAll and completeFeeChangeToOutput.&#x22;,
  href: &#x22;https://live.ckbccc.com/?src=https://raw.githubusercontent.com/ckb-devrel/ccc/refs/heads/master/packages/examples/src/transferAll.ts&#x22;,
  tags: [&#x22;playground&#x22;, &#x22;transaction&#x22;],
  source: &#x22;packages/examples/src/transferAll.ts&#x22;,
},
{
  title: &#x22;Transfer UDT Token&#x22;,
  description: &#x22;Transfer xUDT fungible tokens between addresses. Demonstrates UDT cell construction and input completion.&#x22;,
  href: &#x22;https://live.ckbccc.com/?src=https://raw.githubusercontent.com/ckb-devrel/ccc/refs/heads/master/packages/examples/src/transferUdt.ts&#x22;,
  tags: [&#x22;playground&#x22;, &#x22;transaction&#x22;, &#x22;udt&#x22;],
  source: &#x22;packages/examples/src/transferUdt.ts&#x22;,
},
{
  title: &#x22;Sign & Verify Message&#x22;,
  description: &#x22;Sign an arbitrary message with the connected wallet and verify the signature on-chain. Works across all wallet types.&#x22;,
  href: &#x22;https://live.ckbccc.com/?src=https://raw.githubusercontent.com/ckb-devrel/ccc/refs/heads/master/packages/examples/src/sign.ts&#x22;,
  tags: [&#x22;playground&#x22;, &#x22;wallet&#x22;],
  source: &#x22;packages/examples/src/sign.ts&#x22;,
},
{
  title: &#x22;Custom UI — Specified Wallet&#x22;,
  description: &#x22;Connect a specific wallet type in your own custom UI without using the built-in connector modal.&#x22;,
  href: &#x22;https://live.ckbccc.com/?src=https://raw.githubusercontent.com/ckb-devrel/ccc/refs/heads/master/packages/examples/src/customUi.ts&#x22;,
  tags: [&#x22;playground&#x22;, &#x22;wallet&#x22;],
  source: &#x22;packages/examples/src/customUi.ts&#x22;,
},
{
  title: &#x22;Custom UI — All Wallets with Controller&#x22;,
  description: &#x22;Enumerate and connect all supported wallets using SignersController for a fully custom wallet UI.&#x22;,
  href: &#x22;https://live.ckbccc.com/?src=https://raw.githubusercontent.com/ckb-devrel/ccc/refs/heads/master/packages/examples/src/customUiWithController.ts&#x22;,
  tags: [&#x22;playground&#x22;, &#x22;wallet&#x22;],
  source: &#x22;packages/examples/src/customUiWithController.ts&#x22;,
},
{
  title: &#x22;Query Balance&#x22;,
  description: &#x22;Query the CKB balance of any address on testnet or mainnet. A simple read-only script.&#x22;,
  href: &#x22;https://live.ckbccc.com/?src=https://raw.githubusercontent.com/ckb-devrel/ccc/refs/heads/master/packages/examples/src/queryBalance.ts&#x22;,
  tags: [&#x22;playground&#x22;, &#x22;query&#x22;],
  source: &#x22;packages/examples/src/queryBalance.ts&#x22;,
},
{
  title: &#x22;Query Cells&#x22;,
  description: &#x22;Iterate over live cells owned by an address. Demonstrates the cell collector pattern.&#x22;,
  href: &#x22;https://live.ckbccc.com/?src=https://raw.githubusercontent.com/ckb-devrel/ccc/refs/heads/master/packages/examples/src/queryCells.ts&#x22;,
  tags: [&#x22;playground&#x22;, &#x22;query&#x22;],
  source: &#x22;packages/examples/src/queryCells.ts&#x22;,
},
{
  title: &#x22;Query Transactions&#x22;,
  description: &#x22;Fetch transaction history for an address. Shows how to use the transaction iterator.&#x22;,
  href: &#x22;https://live.ckbccc.com/?src=https://raw.githubusercontent.com/ckb-devrel/ccc/refs/heads/master/packages/examples/src/queryTransactions.ts&#x22;,
  tags: [&#x22;playground&#x22;, &#x22;query&#x22;],
  source: &#x22;packages/examples/src/queryTransactions.ts&#x22;,
},
{
  title: &#x22;NervosDAO Deposit & Withdraw&#x22;,
  description: &#x22;Deposit CKB into NervosDAO and withdraw with interest. Covers the full DAO lifecycle.&#x22;,
  href: &#x22;https://live.ckbccc.com/?src=https://raw.githubusercontent.com/ckb-devrel/ccc/refs/heads/master/packages/examples/src/dao.ts&#x22;,
  tags: [&#x22;playground&#x22;, &#x22;transaction&#x22;],
  source: &#x22;packages/examples/src/dao.ts&#x22;,
},
{
  title: &#x22;Create Spore DOB&#x22;,
  description: &#x22;Mint an on-chain digital object (DOB) using the Spore protocol. Demonstrates cluster creation and content upload.&#x22;,
  href: &#x22;https://live.ckbccc.com/?src=https://raw.githubusercontent.com/ckb-devrel/ccc/refs/heads/master/packages/examples/src/createSpore.ts&#x22;,
  tags: [&#x22;playground&#x22;, &#x22;transaction&#x22;, &#x22;spore&#x22;],
  source: &#x22;packages/examples/src/createSpore.ts&#x22;,
},
{
  title: &#x22;Transfer Spore DOB&#x22;,
  description: &#x22;Transfer an existing Spore DOB to another address.&#x22;,
  href: &#x22;https://live.ckbccc.com/?src=https://raw.githubusercontent.com/ckb-devrel/ccc/refs/heads/master/packages/examples/src/transferSpore.ts&#x22;,
  tags: [&#x22;playground&#x22;, &#x22;transaction&#x22;, &#x22;spore&#x22;],
  source: &#x22;packages/examples/src/transferSpore.ts&#x22;,
},
{
  title: &#x22;Backend Transfer (Node.js)&#x22;,
  description: &#x22;Send CKB from a Node.js backend using @ckb-ccc/shell with a private key signer — no browser required.&#x22;,
  href: &#x22;https://github.com/ckb-devrel/ccc/blob/master/packages/examples/src/backendTransfer.ts&#x22;,
  tags: [&#x22;backend&#x22;, &#x22;transaction&#x22;],
  source: &#x22;packages/examples/src/backendTransfer.ts&#x22;,
},
{
  title: &#x22;DOB Cookbook — Colorful Loot&#x22;,
  description: &#x22;Create a colorful loot DOB using the Spore DOB Cookbook recipes. Demonstrates advanced DOB patterns.&#x22;,
  href: &#x22;https://live.ckbccc.com/?src=https://raw.githubusercontent.com/sporeprotocol/dob-cookbook/refs/heads/main/examples/dob0/1.colorful-loot.ts&#x22;,
  tags: [&#x22;playground&#x22;, &#x22;spore&#x22;],
  source: &#x22;sporeprotocol/dob-cookbook&#x22;,
},
{
  title: &#x22;Issue xUDT — Single-Use Lock&#x22;,
  description: &#x22;Issue a new xUDT token using the Single-Use Lock pattern. The lock is consumed after issuance, preventing re-minting.&#x22;,
  href: &#x22;https://app.ckbccc.com/connected/IssueXUdtSus&#x22;,
  tags: [&#x22;app&#x22;, &#x22;transaction&#x22;, &#x22;udt&#x22;],
  source: &#x22;packages/demo/src/app/connected/(tools)/IssueXUdtSus/page.tsx&#x22;,
},
{
  title: &#x22;Issue xUDT — Type ID&#x22;,
  description: &#x22;Issue an xUDT token controlled by a Type ID cell, allowing future minting by the same controller.&#x22;,
  href: &#x22;https://app.ckbccc.com/connected/IssueXUdtTypeId&#x22;,
  tags: [&#x22;app&#x22;, &#x22;transaction&#x22;, &#x22;udt&#x22;],
  source: &#x22;packages/demo/src/app/connected/(tools)/IssueXUdtTypeId/page.tsx&#x22;,
},
{
  title: &#x22;Create Spore Cluster&#x22;,
  description: &#x22;Create a Spore Cluster — a logical grouping for on-chain digital objects (DOBs).&#x22;,
  href: &#x22;https://app.ckbccc.com/connected/CreateSporeCluster&#x22;,
  tags: [&#x22;app&#x22;, &#x22;transaction&#x22;, &#x22;spore&#x22;],
  source: &#x22;packages/demo/src/app/connected/(tools)/CreateSporeCluster/page.tsx&#x22;,
},
{
  title: &#x22;Mint Spore&#x22;,
  description: &#x22;Mint a Spore DOB under a cluster through the CCC App UI.&#x22;,
  href: &#x22;https://app.ckbccc.com/connected/MintSpore&#x22;,
  tags: [&#x22;app&#x22;, &#x22;transaction&#x22;, &#x22;spore&#x22;],
  source: &#x22;packages/demo/src/app/connected/(tools)/MintSpore/page.tsx&#x22;,
},
{
  title: &#x22;Transfer / Melt Spore&#x22;,
  description: &#x22;Transfer a Spore DOB to another address, or melt (destroy) it to reclaim CKB capacity.&#x22;,
  href: &#x22;https://app.ckbccc.com/connected/TransferSpore&#x22;,
  tags: [&#x22;app&#x22;, &#x22;transaction&#x22;, &#x22;spore&#x22;],
  source: &#x22;packages/demo/src/app/connected/(tools)/TransferSpore/page.tsx&#x22;,
},
{
  title: &#x22;Transfer Spore Cluster&#x22;,
  description: &#x22;Transfer ownership of a Spore Cluster to another address.&#x22;,
  href: &#x22;https://app.ckbccc.com/connected/TransferSporeCluster&#x22;,
  tags: [&#x22;app&#x22;, &#x22;transaction&#x22;, &#x22;spore&#x22;],
  source: &#x22;packages/demo/src/app/connected/(tools)/TransferSporeCluster/page.tsx&#x22;,
},
{
  title: &#x22;Time-Locked Transfer&#x22;,
  description: &#x22;Send CKB with a time lock — the recipient cannot spend the output until a specified block number or timestamp.&#x22;,
  href: &#x22;https://app.ckbccc.com/connected/TimeLockedTransfer&#x22;,
  tags: [&#x22;app&#x22;, &#x22;transaction&#x22;],
  source: &#x22;packages/demo/src/app/connected/(tools)/TimeLockedTransfer/page.tsx&#x22;,
},
{
  title: &#x22;SSRI Contract Call&#x22;,
  description: &#x22;Interact with on-chain smart contracts through the SSRI (Script-Sourced Rich Information) protocol.&#x22;,
  href: &#x22;https://app.ckbccc.com/connected/SSRI&#x22;,
  tags: [&#x22;app&#x22;, &#x22;transaction&#x22;],
  source: &#x22;packages/demo/src/app/connected/(tools)/SSRI/page.tsx&#x22;,
},
{
  title: &#x22;Transfer CKB (Lumos)&#x22;,
  description: &#x22;Transfer native CKB using the legacy Lumos SDK with CCC's compatibility patches.&#x22;,
  href: &#x22;https://app.ckbccc.com/connected/TransferLumos&#x22;,
  tags: [&#x22;app&#x22;, &#x22;transaction&#x22;],
  source: &#x22;packages/demo/src/app/connected/(tools)/TransferLumos/page.tsx&#x22;,
},
{
  title: &#x22;CKB Hash Calculator&#x22;,
  description: &#x22;Calculate the CKB hash (Blake2b-256) of any message. A quick utility for developers.&#x22;,
  href: &#x22;https://app.ckbccc.com/utils/Hash&#x22;,
  tags: [&#x22;app&#x22;, &#x22;tool&#x22;],
  source: &#x22;packages/demo/src/app/utils/(tools)/Hash/page.tsx&#x22;,
},
{
  title: &#x22;Mnemonic & Keypair Generator&#x22;,
  description: &#x22;Generate BIP-39 mnemonic words and derived keypairs. Optionally encrypt to a keystore file.&#x22;,
  href: &#x22;https://app.ckbccc.com/utils/Mnemonic&#x22;,
  tags: [&#x22;app&#x22;, &#x22;tool&#x22;],
  source: &#x22;packages/demo/src/app/utils/(tools)/Mnemonic/page.tsx&#x22;,
},
{
  title: &#x22;Keystore Decryptor&#x22;,
  description: &#x22;Decrypt a CKB keystore file to recover the private key.&#x22;,
  href: &#x22;https://app.ckbccc.com/utils/Keystore&#x22;,
  tags: [&#x22;app&#x22;, &#x22;tool&#x22;],
  source: &#x22;packages/demo/src/app/utils/(tools)/Keystore/page.tsx&#x22;,
},
{
  title: &#x22;Dep Group Manager&#x22;,
  description: &#x22;View and manage CKB dependency groups (DepGroup) used in transaction cell deps.&#x22;,
  href: &#x22;https://app.ckbccc.com/utils/DepGroup&#x22;,
  tags: [&#x22;app&#x22;, &#x22;tool&#x22;],
  source: &#x22;packages/demo/src/app/utils/(tools)/DepGroup/page.tsx&#x22;,
},
]"
/>

## Contribute your examples [#contribute-your-examples]

We welcome community contributions! Whether it's a handy utility script, an interesting on-chain data analysis, or an integration example for a new protocol — it can be included here to help more people get started with CKB development.

### Via GitHub Pull Request [#via-github-pull-request]

To have your example included in the official repository:

<Steps>
  <Step>
    **Fork and clone the repo**

    Go to [ckb-devrel/ccc](https://github.com/ckb-devrel/ccc), click **Fork**, then clone locally:

    ```bash
    git clone https://github.com/<your-username>/ccc.git
    cd ccc
    ```
  </Step>

  <Step>
    **Write your script**

    Create a new `.ts` file in `packages/examples/src/`, using camelCase naming (e.g. `myNewExample.ts`). Your script should:

    * Import the SDK from `@ckb-ccc/ccc`
    * Import `render`, `signer`, etc. from `@ckb-ccc/playground`
    * Call `await render(tx)` at key steps to enable visualization in the Playground

    See [`transfer.ts`](https://github.com/ckb-devrel/ccc/blob/master/packages/examples/src/transfer.ts) for a reference.
  </Step>

  <Step>
    **Test locally**

    Paste your script into the [Playground](https://live.ckbccc.com/) and verify it runs correctly on Testnet.
  </Step>

  <Step>
    **Open a Pull Request**

    Push to your fork and open a PR against the `master` branch of `ckb-devrel/ccc`. Briefly describe the example's purpose and use case in the PR description.
  </Step>
</Steps>

### Quick share (no PR needed) [#quick-share-no-pr-needed]

The Playground can load code from **any** publicly accessible URL via the `?src=` parameter — your GitHub repo, a Gist, or any raw file URL:

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

Share the generated link with colleagues or the community — they can open it and run your code immediately.

<Callout type="info">
  The built-in **Share** button stores code on Nostr relay nodes. Nostr share links are great for quick collaboration, but relay nodes do not guarantee permanent data retention — links may expire over time. For **long-lived, stable share links**, host your script in a GitHub repository and load it via `?src=https://raw.githubusercontent.com/...` — the link will remain valid as long as the repository and file exist.
</Callout>


---

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