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

# Developer workflow

> Edit contracts, add features, and iterate quickly

Edit Clarity contracts, regenerate bindings, run tests, and redeploy. Requires Clarinet **3.21+**. Run `stacksdapp doctor` if you hit toolchain errors.

## Contents

* [Edit contracts](#edit-contracts)
* [Add a contract](#add-a-contract)
* [Run tests](#run-tests)
* [Type-check contracts](#type-check-contracts)
* [Redeploy after changes](#redeploy-after-changes)
* [Project structure](#project-structure)
* [Code generation](#code-generation)
* [Frontend features](#frontend-features)
* [Local development](#local-development)

## Edit contracts

Open any `.clar` file in `contracts/contracts/` and add a function:

```clarity theme={null}
(define-public (multiply (n uint))
  (begin
    (var-set counter (* (var-get counter) n))
    (ok (var-get counter))))
```

Update bindings:

```bash theme={null}
stacksdapp generate
```

Or let `stacksdapp dev` / `stacksdapp generate --watch` handle it.

Redeploy to apply on-chain changes:

```bash theme={null}
stacksdapp deploy --network testnet
```

The `multiply` function appears in the debug UI after regeneration and redeployment.

## Add a contract

```bash theme={null}
stacksdapp add relayer
stacksdapp add token --template sip010
stacksdapp add nft --template sip009
```

Each command creates the `.clar` file, updates `Clarinet.toml`, regenerates bindings, and updates the debug UI.

See [Working with contracts](/contracts) for a full sample contract and tests.

## Run tests

```bash theme={null}
stacksdapp test
```

See [Testing](/testing) for contract and frontend test patterns.

## Type-check contracts

```bash theme={null}
stacksdapp check
```

## Redeploy after changes

Stacks contracts are immutable. Redeploying creates versioned contracts:

```bash theme={null}
stacksdapp deploy --network testnet
# counter-v2, counter-v3, ...
```

The CLI handles versioning automatically.

## Project structure

```
my-app/
├── contracts/
│   ├── Clarinet.toml
│   ├── .cache/
│   ├── settings/
│   │   ├── Devnet.toml
│   │   ├── Testnet.toml
│   │   └── Mainnet.toml
│   ├── contracts/
│   │   └── counter.clar
│   └── tests/
│       └── counter.test.ts
└── frontend/
    ├── .env.local
    └── src/
        ├── app/
        ├── components/
        │   └── WalletConnect.tsx
        └── generated/
            ├── contracts.ts
            ├── hooks.ts
            ├── DebugContracts.tsx
            └── deployments.json
```

## Code generation

See [Code generation](/code-generation) for the full pipeline, watch mode, ABI caching, and Hiro API keys.

Summary:

1. **Parse** ABIs via `initSimnet()` (cached under `contracts/.cache/`)
2. **Normalize** Clarity types to TypeScript
3. **Render** `contracts.ts`, `hooks.ts`, `DebugContracts.tsx`
4. **Write** only when content changed

## Frontend features

### Debug UI

Every public function gets a typed input form. Read-only functions display results directly.

<Frame>
  <img src="https://mintcdn.com/scaffoldstacks/I5blpV1ATaTB0pfc/images/screen.png?fit=max&auto=format&n=I5blpV1ATaTB0pfc&q=85&s=b1fb7ef14cacc8695a2d3602a080bc07" alt="Debug UI showing contract interaction forms" width="3572" height="1988" data-path="images/screen.png" />
</Frame>

### Reusable hooks

```typescript theme={null}
import { useCounterIncrement } from '@/generated/hooks'

function CounterComponent() {
  const { data, loading, call } = useCounterIncrement()

  return (
    <button onClick={() => call([{ n: 1 }])}>
      {loading ? 'Incrementing...' : 'Increment'}
    </button>
  )
}
```

### Wallet Connect

`WalletConnect.tsx` handles Leather and Xverse, including network detection.

### State management

Jotai atoms sync wallet and network state across the template.

## Local development

```bash theme={null}
stacksdapp dev --auto-deploy
```

See [Local devnet](/local-devnet) for manual deploy and devnet setup.