Code Editor
The Studio editor is built on CodeMirror 6 , configured with a professional feature set that matches desktop IDEs.
Syntax highlighting
The editor auto-detects the language from the file extension and loads the appropriate grammar. Over 40 languages are supported out of the box, including TypeScript, JavaScript, Python, Rust, Go, Java, C/C++, Ruby, SQL, GraphQL, HTML, CSS, Markdown, YAML, TOML, Dockerfile, and more.
Two themes are available:
| Theme | Style |
|---|---|
| Dark | Catppuccin Mocha-inspired palette — purple keywords, green comments, orange strings |
| Light | Solarized-inspired — vivid colors on a white background |
The editor theme follows the global Cendriix theme toggle in the header.
Tabs
Each open file gets its own tab. Tabs display the file name and a color-coded dot based on the file extension (e.g. blue for .ts, yellow for .js, green for .css).
| Action | How |
|---|---|
| Open a file | Click it in the file tree or use Ctrl+P to search |
| Close a tab | Click the × on the tab or press Ctrl+W |
| Close all tabs | Command palette → “Close All Tabs” |
| Switch tabs | Click any tab |
Editing features
| Feature | Description |
|---|---|
| Bracket matching | Matching brackets are highlighted. Non-matching brackets are shown in red. |
| Bracket pair colorization | Nested bracket pairs are rendered in distinct colors for easy visual matching at multiple depth levels. Toggle via Settings. |
| Auto-close brackets | Typing (, [, {, `, or " auto-inserts the closing character. |
| Indent on input | The editor auto-indents new lines based on the language grammar. |
| Code folding | Fold/unfold blocks using the gutter arrows (▸/▾). Toggle via Settings. |
| Line numbers | Shown in the left gutter. The active line number is highlighted. |
| Active line highlight | A subtle background highlight on the current line. |
| Selection highlight | Selected text is highlighted across the editor. |
| Multiple cursors | Press Ctrl+D to select the next occurrence of the current selection, adding a new cursor. Repeat to add more. |
| Undo / redo | Full history support via Ctrl+Z / Ctrl+Shift+Z. |
| Autocomplete | Language-aware autocompletion triggered as you type. |
| Minimap | Optional scrollbar minimap showing a high-level overview of the file structure. Toggle via Settings. |
| Word wrap | Optional line wrapping for long lines. Toggle via Settings. |
Find in file
Press Ctrl+F to open the in-editor search panel. Features:
- Text search — highlight all matches with match count
- Case-sensitive toggle
- Regex toggle
- Replace and Replace All
- Navigate between matches with
Enter/Shift+Enter
Find and replace (project-wide)
Press Ctrl+Shift+H to open the project-wide Find & Replace panel. This searches across all files in the repository:
- Search field — enter a text pattern to find across all files
- Replace field — enter the replacement text
- Results list — shows every match with file path, line number, and context
- Replace / Replace All — apply replacements individually or all at once
- Case-sensitive and Regex toggles
Results are clickable — selecting a match opens the file at the matching line.
Settings panel
Click the gear icon (⚙) in the toolbar to open the Settings panel. Customize the editor to your preferences:
| Setting | Options | Description |
|---|---|---|
| Font Size | 10–24 px | Adjust the editor font size with +/− buttons |
| Tab Size | 2 / 4 / 8 spaces | Set the number of spaces per tab stop |
| Word Wrap | On / Off | Enable line wrapping for long lines |
| Bracket Colors | On / Off | Enable bracket pair colorization |
| Code Folding | On / Off | Show fold/unfold arrows in the gutter |
| Minimap | On / Off | Show the scrollbar code overview |
| .gitignore Dimming | On / Off | Dim ignored files in the explorer |
| Theme | Dark / Light / System | Set the editor color theme |
Settings are persisted in localStorage and applied immediately.
Keyboard shortcuts reference
The Settings panel also shows a reference card of all 12+ keyboard shortcuts for quick reference.
Markdown preview
When a .md or .mdx file is open, the editor offers three viewing modes:
| Mode | Description |
|---|---|
| Edit | Raw markdown source in the CodeMirror editor |
| Preview | Rendered HTML with headings, code blocks, tables, images, links, and lists |
| Split | Side-by-side editor and preview |
The renderer supports fenced code blocks with syntax labels, inline code, bold, italic, blockquotes, images, links, horizontal rules, ordered and unordered lists, and tables.
Image preview
Image files (.png, .jpg, .gif, .svg, .webp, etc.) open in a visual preview pane instead of the text editor. The image is rendered at its natural size with a dark background.
Draft auto-save
Every edit is automatically saved as a draft via the backend API (POST /projects/:id/drafts). Drafts persist across browser sessions and can be committed as a PR from the Source Control panel. No manual save is required.
Breadcrumb navigation
A breadcrumb bar above the editor shows the full path of the current file (e.g. src / pages / studio / StudioIde.tsx). Each segment is displayed for quick orientation within the project structure.
Persistent layout
The IDE remembers your layout preferences across sessions:
- Sidebar width — drag the resize handle to adjust, persisted in
localStorage - Open tabs — the set of files you had open is restored
- Panel state — whether the terminal, Cendra panel, etc. were open or minimized
- Editor preferences — font size, tab size, word wrap, and other settings