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

# Code Editor

> A full-featured code canvas where ZeroTwo generates, refactors, and edits code directly in a syntax-highlighted editor.

The Code editor canvas gives ZeroTwo a dedicated programming environment to write clean, well-formatted code. Instead of producing code blocks buried in the chat, the AI writes directly into a syntax-highlighted editor. You get a proper file to copy, download, and iterate on — without hunting through a chat transcript.

## Supported Languages

The Code editor supports syntax highlighting and AI code generation for all major languages:

<Tabs>
  <Tab title="Web and Frontend">
    * JavaScript (ES2022+)
    * TypeScript
    * JSX / TSX (React, Preact)
    * HTML
    * CSS / SCSS / Less
  </Tab>

  <Tab title="Backend">
    * Python
    * Java
    * C
    * C++
    * C#
    * Go
    * PHP
    * Ruby
    * Kotlin
    * Swift
    * Scala
    * Rust
  </Tab>

  <Tab title="Data and Query">
    * SQL (PostgreSQL, MySQL, SQLite dialects)
    * R
    * Julia
    * Shell / Bash
    * PowerShell
  </Tab>

  <Tab title="Config and Markup">
    * JSON / YAML / TOML
    * XML
    * Markdown
    * GraphQL
    * LaTeX
  </Tab>
</Tabs>

<Tip>
  Specify the language explicitly in your prompt for best results: "Write a **Python** function that..." or "Create a **TypeScript** interface for..." If you do not specify, ZeroTwo infers the language from context.
</Tip>

## What ZeroTwo Can Do in the Code Editor

### Generate Code from Scratch

Describe the function, module, class, or script you need. ZeroTwo writes the full implementation with comments, proper naming, and idiomatic style for the target language.

**Prompts to try:**

* "Write a Python function that parses a CSV file and returns a list of dictionaries"
* "Create a TypeScript class for a simple event emitter with on, off, and emit methods"
* "Write a Go HTTP handler that validates a JSON request body and returns a 400 on missing fields"
* "Build a SQL schema for a multi-tenant SaaS application with users, organizations, and subscriptions"
* "Write a React hook in TypeScript that debounces a search input"

### Refactor Existing Code

Paste code into the editor and ask ZeroTwo to improve it. The AI rewrites the code in place.

**Prompts to try:**

* "Refactor this to use async/await instead of callbacks"
* "Extract the database logic into a separate service class"
* "Rewrite this loop using functional array methods (map, filter, reduce)"
* "Break this large function into smaller, reusable helpers"

### Add Types and Annotations

**Prompts to try:**

* "Add TypeScript types to this JavaScript code"
* "Write JSDoc comments for every function in this file"
* "Add Python type hints and a docstring to each function"
* "Generate a Zod schema that matches this TypeScript interface"

### Write Tests

**Prompts to try:**

* "Write Jest unit tests for this function covering edge cases"
* "Create pytest tests for this Python module"
* "Add integration tests for this Express route handler"
* "Write table-driven tests for this Go function"

### Fix Bugs

Describe the bug or paste the error message. ZeroTwo diagnoses and fixes the issue in the editor.

**Prompts to try:**

* "This function throws a null pointer exception when the input is empty — fix it"
* "Fix the off-by-one error in this loop"
* "The async function is not being awaited correctly — here is the error: \[paste error]"

### Convert Between Languages

**Prompts to try:**

* "Convert this Python script to Go"
* "Rewrite this JavaScript class in TypeScript"
* "Translate this shell script to Python"
* "Convert this REST API handler to GraphQL"

### Explain Code

Ask ZeroTwo to explain what the code does. The explanation appears in the chat; the code in the canvas stays unchanged.

**Prompts to try:**

* "Explain what this code does, line by line"
* "What is the time and space complexity of this algorithm?"
* "Why might this implementation cause a race condition?"

## Editor Actions

### Copy Code

Click the **Copy** button in the canvas toolbar to copy the entire editor contents to your clipboard. Paste directly into your project files or IDE.

### Download as File

Click **Download** to save the code as a file. ZeroTwo automatically uses the correct extension based on the detected language — `.py`, `.ts`, `.go`, `.sql`, `.rb`, etc.

<Note>
  The current Code editor canvas shows one file at a time. For multi-file projects, use separate canvases per file or paste multiple files with clear section comments and use canvas per module.
</Note>

## Working with Existing Code

You can paste your own code into the editor at any time and then ask ZeroTwo to act on it:

<Steps>
  <Step title="Open a Code canvas">
    Activate Canvas Mode and send a prompt like "Open a Python code canvas" or any code-generating request.
  </Step>

  <Step title="Paste your code">
    Click inside the editor and paste your existing code with `Cmd/Ctrl + V`.
  </Step>

  <Step title="Send an instruction in the chat">
    Tell ZeroTwo what to do: "Refactor this," "Add error handling," "Convert to TypeScript," "Write tests for each function," etc.
  </Step>

  <Step title="ZeroTwo edits in place">
    The code in the editor is modified. The original is replaced by the updated version.
  </Step>
</Steps>

<Tip>
  If you want to compare the original and refactored versions, say: "Show me the refactored version below the original with a comment separator." ZeroTwo will append rather than replace.
</Tip>

## Language Quick Reference

| Language        | Say in your prompt                     |
| --------------- | -------------------------------------- |
| Python          | "Python", "Python 3"                   |
| JavaScript      | "JavaScript", "JS", "Node.js"          |
| TypeScript      | "TypeScript", "TS"                     |
| React (JSX/TSX) | "React", "JSX", "TSX"                  |
| Go              | "Go", "Golang"                         |
| Rust            | "Rust"                                 |
| SQL             | "SQL", "PostgreSQL", "MySQL", "SQLite" |
| Shell           | "Shell", "Bash", "sh"                  |
| Java            | "Java"                                 |
| C#              | "C#", "CSharp"                         |
| Ruby            | "Ruby"                                 |
| PHP             | "PHP"                                  |
| Swift           | "Swift"                                |
| Kotlin          | "Kotlin"                               |
| R               | "R"                                    |
| Julia           | "Julia"                                |

## Tips for Best Results

<Tip>
  **Specify the language and framework.** "Write a React hook in TypeScript" gives far better results than "write a hook."
</Tip>

<Tip>
  **Provide context about usage.** "This function will be called on every keystroke in a search input — it needs to be debounced" helps ZeroTwo write production-appropriate code rather than a naive implementation.
</Tip>

<Tip>
  **Iterate in steps.** Generate the core logic first, then follow up: "Now add error handling," "Add input validation," "Write unit tests for this function."
</Tip>

<Tip>
  **Include error messages verbatim.** When asking ZeroTwo to fix a bug, paste the full stack trace or error message into the chat for the most accurate diagnosis.
</Tip>

## Related Pages

<CardGroup cols={2}>
  <Card title="Canvas Overview" icon="layers" href="/tools/canvas/overview">
    All 7 canvas editor types and how to activate Canvas Mode.
  </Card>

  <Card title="Export Canvas" icon="download" href="/tools/canvas/export-canvas">
    Copy or download your code as a file.
  </Card>

  <Card title="HTML Preview" icon="globe" href="/tools/canvas/html-preview">
    Render HTML, CSS, and JS live in a split-pane canvas.
  </Card>

  <Card title="Troubleshooting" icon="wand2" href="/tools/canvas/troubleshooting">
    Fix common code canvas issues.
  </Card>
</CardGroup>