# Parameters and inputs (https://docs.fuser.studio/docs/creative-code/parameters-and-attachments)

Hard-coded constants are fine for one-shot sketches. For anything you'll iterate on, declare a parameter — the value moves out of the source code and onto a live control on the node, so you can tune it without touching the editor.

The Creative Code node has two magic-comment blocks for this:

* **`@fuser-params`** declares tunable controls — sliders, color pickers, toggles — that live in a panel on the node.
* **`@fuser-attachments`** declares connectable input sockets that pull image, video, audio, mesh, or text data from upstream nodes.

The two are separate. Params are panel-only; attachments are how other nodes feed your sketch.

## The `@fuser-params` block [#the-fuser-params-block]

Declare parameters in a magic-comment block at the top of your sketch:

```javascript
// @fuser-params
// @param speed: number(0, 10, 0.1) = 5
// @param backgroundColor: color = #1a1a2e
// @param label: text = "Hello World"
// @param showGrid: boolean = true
// @end-fuser-params
```

The block must open with `// @fuser-params` and close with `// @end-fuser-params`. Each `// @param` line declares one parameter:

| Type          | Syntax                             | Renders as     |
| ------------- | ---------------------------------- | -------------- |
| **`number`**  | `number(min, max, step) = default` | A slider       |
| **`color`**   | `color = #hexcolor`                | A color picker |
| **`text`**    | `text = "default"`                 | A text field   |
| **`boolean`** | `boolean = true`                   | A toggle       |

Access the values inside your sketch as the `params` global:

```javascript
function draw() {
  const { speed, backgroundColor, showGrid } = params;
  background(backgroundColor);
  if (showGrid) drawGrid();
  for (const dot of dots) dot.x += speed;
}
```

## The parameters panel [#the-parameters-panel]

Every declared parameter appears as a control in the **parameters panel** on the node. Drag the slider, pick the color, flip the toggle — the sketch re-runs with the new value immediately. No re-prompt, no editor round-trip.

When you tweak a control, Fuser writes the new value back into your sketch as the parameter's default — so when you re-prompt or share the sketch, the tuned value is what travels with it. You can always edit the default by hand in the editor.

If you want a value to be driven by another node in your flow instead of by the panel, declare it as an [attachment](#the-fuser-attachments-block) — that's the connectable side of the Creative Code node.

## The `@fuser-attachments` block [#the-fuser-attachments-block]

Attachments are how upstream nodes feed your sketch. Declare them in a second magic-comment block:

```javascript
// @fuser-attachments
// @attachment input: image = "Background image"
// @attachment soundtrack: audio = "Audio track to visualize"
// @end-fuser-attachments
```

Each `// @attachment` line creates a connectable input socket on the node. Connect a compatible upstream node, and the value lands in your sketch as the `attachments` global, keyed by the name you declared:

```javascript
function draw() {
  const { input } = attachments;
  if (input) {
    image(input, 0, 0, width, height);
  }
}
```

The optional description in quotes becomes the socket's label on the node.

### Supported attachment types [#supported-attachment-types]

| Type             | Accepts             | Use for                                       |
| ---------------- | ------------------- | --------------------------------------------- |
| **`image`**      | A single image URL  | Textures, backgrounds, source frames          |
| **`multiimage`** | Up to 10 image URLs | Grids, montages, batch processing             |
| **`video`**      | A video URL         | Playback, frame sampling, motion input        |
| **`audio`**      | An audio URL        | Reactive visuals, waveforms, beat detection   |
| **`mesh`**       | A 3D mesh asset     | Models to render in Three.js or pixi sketches |
| **`text`**       | A text string       | Captions, prompts, upstream LLM output        |

This is how you compose Creative Code into a larger flow. A generation node feeds an `image` attachment; a transcription node feeds a `text` attachment; a different sketch's output drives this one.

See [the canvas](https://docs.fuser.studio/docs/interface/canvas.md) for the socket-and-edge model that ties it all together.

## Per-video webcam toggle [#per-video-webcam-toggle]

For video attachments specifically, each socket has a **webcam toggle**. Flip it on and the attachment becomes the user's webcam feed instead of whatever's wired into the socket. Useful for camera-driven sketches, real-time feedback, and prototyping.

The browser asks for camera permission the first time you flip the toggle on. If permission is denied, the attachment falls back to the connected upstream — or to nothing, if nothing's connected.

> [!WARNING] Params live in your sketch source
>
> The `@fuser-params` block is part of your code. If you re-prompt and ask the model to "remove all the parameters" — or just to "rewrite this sketch from scratch" — the block can disappear with everything else. You'll lose the controls until you re-declare them. Use chat history checkpoints (see [Prompting and chat](https://docs.fuser.studio/docs/creative-code/prompting.md#chat-history-and-checkpoints)) to recover a working version with the params intact.

## Forking a sketch [#forking-a-sketch]

Every Creative Code node has a special **`Code In`** input socket. Connect another Creative Code node's output to it and the downstream node forks the upstream sketch — it inherits the **code, the version history, and the chat** as starting points. From there the two diverge: changes you make to the downstream sketch don't propagate back, and the upstream's later changes don't pull through unless you reconnect.

Use forking to:

* **Branch** a sketch you like into variants without losing the original.
* **Hand off** a sketch to a teammate's part of the canvas while keeping your working copy intact.
* **Share** an entire prompt history along with the code, so the next person can keep iterating in chat instead of starting cold.

## What's Next? [#whats-next]

  - [How sketches run](https://docs.fuser.studio/docs/creative-code/runtime.md): Where `params` and `attachments` come from at runtime, plus the lifecycle and what's blocked.

  - [Saving and sharing](https://docs.fuser.studio/docs/creative-code/publishing-and-export.md): Capture a tuned sketch as an asset, or publish a public embed.