Opening the editor
Click Code Editor from any project dashboard, or click a file in the sidebar to open it directly.Layout
The editor uses a split-panel layout:- Left panel — AI chat for natural language coding
- Center panel — the code editor with tabs for open files
- Right panel — live preview of your site
Language support
| Category | Languages |
|---|---|
| Web | HTML, CSS, JavaScript, TypeScript, JSX, TSX, SCSS, LESS, Markdown, MDX |
| Data / Config | JSON, YAML, TOML, XML, ENV, SQL |
| Other | Python, PHP, Ruby, Go, Rust, C, C++, Java, Shell, Dockerfile |
Editor features
- Syntax highlighting for all supported languages
- Autocomplete with IntelliSense-style suggestions
- Minimap for quick navigation in long files
- Word wrap toggle for horizontal scrolling preference
- Format on paste to auto-indent pasted code
- Format on type for automatic formatting as you write
Keyboard shortcuts
| Shortcut | Action |
|---|---|
Ctrl+S / Cmd+S | Save file |
Ctrl+P / Cmd+P | Quick file open |
Ctrl+Shift+P / Cmd+Shift+P | Command palette |
Ctrl+F / Cmd+F | Find in file |
Ctrl+H / Cmd+H | Find and replace |
Ctrl+Z / Cmd+Z | Undo |
Ctrl+Shift+Z / Cmd+Shift+Z | Redo |
Alt+Up / Option+Up | Move line up |
Alt+Down / Option+Down | Move line down |
Ctrl+D / Cmd+D | Select next occurrence |
File mention in AI chat
Type@ followed by a filename in the AI chat to reference a specific file. This focuses the AI’s attention on that file when generating responses.