Skip to main content

​
Editor Overview

Code Editor Thing is built on CodeMirror 6, a powerful and extensible code editor framework. It provides a fast, feature-rich editing experience with modern editor capabilities.

​
Core Features

The editor comes with essential features enabled by default:
  • Line numbers with subtle gutters
  • Syntax highlighting for supported languages
  • Auto-indentation and bracket matching
  • Undo/redo with full history support
  • Keyboard shortcuts following standard conventions
  • Theme support with dynamic color schemes

​
Syntax Highlighting

The editor automatically detects the language based on file extension and applies appropriate syntax highlighting.

​
Color-Coded Elements

Syntax highlighting includes:
ElementDescription
KeywordsLanguage keywords like if, function, class
StringsText literals and string values
CommentsSingle-line and multi-line comments (italicized)
NumbersNumeric literals and booleans
FunctionsFunction names and calls
VariablesVariable names and identifiers
TypesType annotations and class names
OperatorsMathematical and logical operators
Colors adapt automatically based on your selected theme (see Themes).

​
Supported Languages

Code Editor Thing supports syntax highlighting and language features for:
  • Extensions: .js, .jsx, .mjs, .cjs, .ts, .tsx
  • Features: JSX support, TypeScript syntax
  • Library: @codemirror/lang-javascript

​
Language Detection

The editor uses file extensions to determine the appropriate language mode: 
// From src/lib/utils.ts
export function getLanguageExtension(filename: string) {
  const ext = filename.split(".").pop()?.toLowerCase();
  switch (ext) {
    case "js":
    case "jsx":
    case "mjs":
    case "cjs":
      return javascript({ jsx: true });
    case "ts":
    case "tsx":
      return javascript({ jsx: true, typescript: true });
    case "py":
      return python();
    // ... more languages
  }
}

​
Saving Files

Save your changes using the standard keyboard shortcut:
Keyboard Shortcut: Cmd+S (macOS) or Ctrl+S (Windows/Linux)

​
How Saving Works

When you save a file:
  1. The editor captures the current document content
  2. Sends it to the Electron main process via IPC
  3. Writes the content to disk using Node.js file system APIs
  4. Confirms the save operation
// From electron/main.ts
ipcMain.handle('save-file', async (_event, filePath: string, content: string) => {
  try {
    fs.writeFileSync(filePath, content, 'utf-8')
    return true
  } catch {
    return false
  }
})

​
Editor Configuration

The editor is configured with:
  • Font: Geist Mono, Fira Code, JetBrains Mono, or system monospace
  • Font Size: 14px
  • Line Height: 28px (content) / 21px (scrollbar)
  • Padding: 12px around content area
  • Tab Size: Automatic based on file type

​
Editor Shortcuts

Common editing shortcuts work as expected:
ShortcutAction
Cmd/Ctrl+ZUndo
Cmd/Ctrl+Shift+ZRedo
Cmd/Ctrl+SSave file
Cmd/Ctrl+ASelect all
Cmd/Ctrl+CCopy
Cmd/Ctrl+VPaste
Cmd/Ctrl+XCut
CodeMirror provides additional shortcuts for advanced editing. Press F1 in the editor to see all available commands.

​
Theme Integration

The editor dynamically adapts to your selected theme, updating:
  • Background and foreground colors
  • Syntax highlighting colors
  • Gutter appearance
  • Cursor color
  • Selection colors
See the Themes guide for more information on customizing your editor appearance.

Build docs developers (and LLMs) love

Get started for freeTalk to us