Code Editor
Use the built-in code editor to view and modify generated code.
Omma includes a built-in code editor. You can view, edit, and manage the code generated by the AI.
Features#
Syntax Highlighting#
The editor supports syntax highlighting for:
- JavaScript / TypeScript
- HTML
- CSS
- JSX / React
Code Versioning#
Every change is tracked with version history:
- Automatic versioning — Each AI-generated update creates a new version
- Version browser — Navigate through previous versions
- Restore — Revert to any previous version
Live Preview Sync#
Changes in the editor are reflected in the live preview in real-time. You can:
- Edit code manually in the editor
- See the preview update instantly
- Ask the AI to iterate on your manual changes
Responsive Device Preview#
The preview panel has a device toggle for checking your project at different viewport sizes:
- Desktop — the preview fills the panel (default)
- Tablet and Mobile — the project renders in a fixed-size device frame, scaled to fit the panel
- Custom sizes — drag the frame's edges (or enter an exact pixel width) to test any breakpoint
Use it to verify responsive layouts before publishing.
Auto-Fix#
If the generated code has errors, Omma can automatically detect and fix common issues:
- Syntax errors
- Missing imports
- Incorrect API usage
- React component errors
Keyboard Shortcuts#
| Shortcut | Action |
|---|---|
Ctrl/Cmd + S | Save current state |
Ctrl/Cmd + Z | Undo |
Ctrl/Cmd + Shift + Z | Redo |
Ctrl/Cmd + / | Toggle comment |
Ctrl/Cmd + D | Duplicate line |
Alt + Up/Down | Move line up/down |
Code Export#
You can export your project code:
- Copy to clipboard — Quick copy of the full source
- Download as ZIP — Package with all assets
- Publish — Deploy to a public URL