Skip to main content
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:
  • JavaScript (ES2022+)
  • TypeScript
  • JSX / TSX (React, Preact)
  • HTML
  • CSS / SCSS / Less
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.

​
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.
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.

​
Working with Existing Code

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

Open a Code canvas

Activate Canvas Mode and send a prompt like “Open a Python code canvas” or any code-generating request.
2

Paste your code

Click inside the editor and paste your existing code with Cmd/Ctrl + V.
3

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.
4

ZeroTwo edits in place

The code in the editor is modified. The original is replaced by the updated version.
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.

​
Language Quick Reference

LanguageSay 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

Specify the language and framework. “Write a React hook in TypeScript” gives far better results than “write a hook.”
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.
Iterate in steps. Generate the core logic first, then follow up: “Now add error handling,” “Add input validation,” “Write unit tests for this function.”
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.

​
Related Pages

Canvas Overview

All 7 canvas editor types and how to activate Canvas Mode.

Export Canvas

Copy or download your code as a file.

HTML Preview

Render HTML, CSS, and JS live in a split-pane canvas.

Troubleshooting

Fix common code canvas issues.