# Editing code by hand (https://docs.fuser.studio/docs/creative-code/editor)

Creative Code has two modes that share the same node: **prompt mode**, where you describe what you want and an LLM writes the JavaScript, and **code mode**, where you read and edit that JavaScript directly. They aren't separate features — they're two views on the same sketch. This page covers code mode; for prompt mode see [Prompting](https://docs.fuser.studio/docs/creative-code/prompting.md). Most sessions land in code mode automatically after a prompt, and you'll often stay here for targeted tweaks before going back to prompt mode for the next big move.

## Opening the editor [#opening-the-editor]

The editor opens automatically the first time a prompt-mode generation starts. You can also switch to code mode directly from the Creative Code node — the editor takes over the foreground and the sketch keeps running on the canvas behind it.

Save your edits with the **Save** button in the editor toolbar or `⌘/Ctrl`+`S`. The button is disabled when there are no unsaved changes. The node-level **Save** button on the canvas is a different thing — it captures the running canvas as an asset; see [Saving and sharing](https://docs.fuser.studio/docs/creative-code/publishing-and-export.md).

## The editor surface [#the-editor-surface]

The editor uses a dark theme tuned for long sessions. You get:

* Syntax highlighting for JavaScript.
* Line numbers and a clean, fixed-width layout.
* Line-diff highlights during streaming — when the model is mid-write, new and modified lines are colored so you can track changes as they land.
* Selection that survives re-renders, so a line you've highlighted stays highlighted while the model writes around it.

The editor is meant for tight, focused edits — declarative param tweaks, swapping a constant, refining a `draw` loop. For larger restructuring, drop back to [prompt mode](https://docs.fuser.studio/docs/creative-code/prompting.md) and describe the change.

## Explain this line [#explain-this-line]

Select a line (or a contiguous range) and the **Explain this line** popover appears. Click it to ask an LLM for a plain-English explanation of what that code does — kept to three sentences or fewer so the popover stays compact.

This is read-only. It doesn't modify the code; it doesn't send the explanation to the chat panel. Use it when you've inherited a sketch from a prompt and want to understand a specific block before touching it, or when you're learning the library and want to see what `noiseSeed()` actually does in context.

## Editing while the model is streaming [#editing-while-the-model-is-streaming]

You can type while a generation is in flight, but it's usually noisy — your edits get overwritten by the next chunk of stream. If you want to take over, cancel the generation first (or submit a new prompt to interrupt) and then edit. For small tweaks, wait for the stream to finish.

## Try to fix [#try-to-fix]

When your sketch crashes at runtime — three consecutive frame errors flip it into the **error** state (see [transient error tolerance](https://docs.fuser.studio/docs/creative-code/runtime.md#transient-error-tolerance)) — the editor surfaces a **Try to fix** action next to the error. Clicking it sends the runtime error message back to the model along with your current code, asking for a targeted patch. The model edits in place rather than rewriting the sketch from scratch, so your params, attachments, and structure usually stay intact.

Reach for **Try to fix** when:

* The error is a runtime exception (not a syntax error caught before run).
* You'd rather keep iterating from the current code than re-prompt from scratch.
* The error message is informative on its own — model fixes work better when the error is specific.

If two attempts don't resolve it, fall back to a manual fix or a rewrite prompt.

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

  - [Parameters and inputs](https://docs.fuser.studio/docs/creative-code/parameters-and-attachments.md): Add `@fuser-params` to expose tunable controls instead of hard-coding values.

  - [How sketches run](https://docs.fuser.studio/docs/creative-code/runtime.md): What's available in your code, what's blocked, and the lifecycle hooks you can implement.