Code Canvas
Write and edit code with syntax highlighting and live preview
Code Canvas provides a dedicated space for writing, viewing, and editing code. It supports syntax highlighting for dozens of programming languages.
Features
Syntax Highlighting
Code Canvas automatically detects and highlights code for:
- JavaScript / TypeScript
- Python
- Java
- C / C++ / C#
- Go
- Rust
- Ruby
- PHP
- Swift
- HTML / CSS
- SQL
- And many more
Live Preview
For web technologies, see your code rendered:
- HTML renders in a preview pane
- CSS styling applies in real-time
- JavaScript runs in a sandboxed environment
Creating Code
Ask the AI to write code:
"Write a Python function that calculates the Fibonacci sequence""Create a React component for a todo list with add and delete""Write a SQL query to find the top 10 customers by revenue"The code appears in Canvas with proper formatting and highlighting.
Editing Code
Ask for Changes
Continue the conversation to modify code:
- "Add error handling for invalid inputs"
- "Make it async/await instead of promises"
- "Add comments explaining each step"
- "Refactor to use a class instead of functions"
The AI updates the code in Canvas while preserving your context.
Specify Changes
Be specific about what to change:
"In the processOrder function, add validation for the quantity
parameter to ensure it's a positive integer"Copying Code
Click Copy Button
Use the copy icon in the Canvas header.
Code Copies to Clipboard
The full code, without line numbers, is copied.
Paste Anywhere
Use in your IDE, terminal, or documentation.
Language Support
Web Development
| Language | Features |
|---|---|
| HTML | Syntax highlighting, preview |
| CSS | Highlighting, live preview |
| JavaScript | Highlighting, execution |
| TypeScript | Highlighting |
| React/JSX | Component highlighting |
| Vue | Template highlighting |
Backend Languages
| Language | Features |
|---|---|
| Python | Syntax highlighting |
| Node.js | Highlighting |
| Java | Highlighting |
| Go | Highlighting |
| Rust | Highlighting |
| Ruby | Highlighting |
| PHP | Highlighting |
Data & Config
| Language | Features |
|---|---|
| SQL | Syntax highlighting |
| JSON | Highlighting, validation |
| YAML | Highlighting |
| XML | Highlighting |
| Markdown | Highlighting, preview |
Best Practices
Provide Context
Give the AI context about your project:
"I'm using Python 3.11 with FastAPI. Write an endpoint
that accepts a POST request with user data and saves
it to a PostgreSQL database using SQLAlchemy."Request Documentation
Ask for comments and documentation:
"Write the function and include:
- Docstring explaining what it does
- Type hints for all parameters
- Comments for complex logic"Specify Style
Mention coding standards:
"Follow PEP 8 style guidelines"
"Use camelCase for variable names"
"Keep functions under 20 lines"Multi-File Projects
For complex projects, ask for multiple files:
"Create a basic Express.js API with:
1. index.js - main server file
2. routes/users.js - user routes
3. middleware/auth.js - authentication middleware
4. package.json - dependencies"The AI can create each file sequentially in Canvas.
Code Review
Ask the AI to review code:
"Review this code for:
- Security vulnerabilities
- Performance issues
- Best practice violations
- Potential bugs"Paste your code, and the AI provides feedback.
Common Tasks
Debug Code
"This function returns incorrect results. Find the bug:
[paste your code]Convert Code
"Convert this Python function to JavaScript:
[paste Python code]Optimize Code
"Make this code more efficient:
[paste code]Add Tests
"Write unit tests for this function using pytest:
[paste function]Keyboard Shortcuts
| Action | Shortcut |
|---|---|
| Copy all code | Click copy button |
| Close canvas | Escape |
| Toggle fullscreen | Cmd/Ctrl + Enter |
Common Questions
Next Steps
- Learn about Markdown Canvas
- Explore Diagrams
- Master prompting for code
Was this page helpful? Let us know!
Report an issue