Skip to main content

​
Overview

Polaris IDE features a powerful code editor built on CodeMirror 6, providing a modern, performant editing experience with syntax highlighting, intelligent code completion, and AI-powered assistance.

Multi-Language Support

Syntax highlighting for JavaScript, TypeScript, HTML, CSS, JSON, Markdown, and Python

AI-Powered

Inline suggestions and quick editing with natural language commands

Smart Features

Auto-completion, bracket matching, code folding, and multi-cursor editing

Customizable

Minimap, line numbers, indentation markers, and custom themes

​
Language Support

The editor automatically detects file types and applies appropriate syntax highlighting based on file extensions:
LanguageExtensionsFeatures
JavaScript.jsFull ES6+ syntax support
JSX.jsxReact component syntax
TypeScript.tsType annotations and interfaces
TSX.tsxTypeScript with JSX
HTML.htmlTag completion and validation
CSS.cssProperty suggestions
JSON.jsonAutomatic formatting
Markdown.md, .mdxLive preview support
Python.pyIndentation-aware editing
The language detection is powered by the getLanguageExtension() function: 
// Automatic language detection from filename
import { javascript } from "@codemirror/lang-javascript";
import { html } from "@codemirror/lang-html";
import { css } from "@codemirror/lang-css";

const ext = filename.split(".").pop()?.toLowerCase();
switch(ext) {
  case "tsx":
    return javascript({ typescript: true, jsx: true });
  case "html":
    return html();
  // ... more languages
}

​
Core Features

​
Line Numbers & Gutters

The editor displays line numbers and interactive gutters for code folding:
Click the chevron icons in the gutter to fold/unfold code blocks, functions, and objects.

​
Code Folding

Collapse code sections to focus on what matters:
  • Functions and methods
  • Object literals and arrays
  • Import/export blocks
  • HTML/JSX elements

​
Multi-Cursor Editing

Polaris supports multiple cursors for efficient batch editing:
Hold Alt/Option and click to place additional cursors, or use Cmd/Ctrl + D to select the next occurrence of the current selection.

​
Bracket Matching

Automatically highlights matching brackets, braces, and parentheses as you type: 
function example() {
  const data = { name: "Polaris" };
  //             ^                ^
  //         Automatically highlighted
}

​
Auto-Completion

Intelligent code completion suggests:
  • Variable and function names
  • Language keywords
  • Imported modules
  • HTML tags and attributes
  • CSS properties

​
Advanced Features

​
Minimap

Get a bird’s-eye view of your code with the integrated minimap powered by @replit/codemirror-minimap:

Minimap Navigation

The minimap appears on the right side of the editor, showing a zoomed-out view of your entire file for quick navigation.

​
Indentation Markers

Visual guides show indentation levels using @replit/codemirror-indentation-markers, making nested code easier to read.

​
Syntax Highlighting

The editor uses the One Dark theme with custom styling: 
import { oneDark } from "@codemirror/theme-one-dark";
import { customTheme } from "../extensions/theme";

// Custom font configuration
const customTheme = EditorView.theme({
  ".cm-content": {
    fontFamily: "var(--font-plex-mono), monospace",
    fontSize: "14px",
  },
});
The editor uses IBM Plex Mono as the default monospace font for optimal code readability.

​
Keyboard Shortcuts

​
Essential Shortcuts

ShortcutAction
TabIndent selection or accept AI suggestion
Cmd/Ctrl + ZUndo
Cmd/Ctrl + Shift + ZRedo
Cmd/Ctrl + /Toggle line comment
Cmd/Ctrl + FSearch in file
Cmd/Ctrl + KQuick edit with AI (when text is selected)

​
Selection Shortcuts

ShortcutAction
Cmd/Ctrl + DSelect next occurrence
Cmd/Ctrl + ASelect all
Alt/Option + ClickAdd cursor at position

​
Code Folding Shortcuts

ShortcutAction
Cmd/Ctrl + Shift + [Fold code block
Cmd/Ctrl + Shift + ]Unfold code block

​
Editor Extensions

Polaris extends CodeMirror with custom extensions:

AI Suggestions

Real-time code suggestions powered by AI as you type

Quick Edit

Edit code with natural language using Cmd+K

Selection Tooltip

Contextual actions when you select code

Custom Setup

Pre-configured with optimal settings for web development

​
Custom Setup Extension

The editor comes pre-configured with: 
import { customSetup } from "../extensions/custom-setup";

// Includes:
// - Line numbers and active line highlighting
// - Code folding with custom icons
// - Bracket matching and auto-closing
// - Auto-completion with Tab key
// - Multiple cursors support
// - Search and replace

​
Auto-Save

Polaris automatically saves your changes with a 1.5-second debounce to prevent excessive updates:
  1. You make changes to a file
  2. The editor waits 1500ms for additional changes
  3. If no new changes occur, the file is saved to the database
  4. Changes sync in real-time across all open sessions
const DEBOUNCE_MS = 1500;

onChange={(content: string) => {
  if (timeoutRef.current) {
    clearTimeout(timeoutRef.current);
  }

  timeoutRef.current = setTimeout(() => {
    updateFile({ id: activeFile._id, content });
  }, DEBOUNCE_MS);
}}
You’ll never lose work - all changes are automatically saved and synced to the cloud.

​
Scrollbar Customization

The editor features custom-styled scrollbars that match the dark theme: 
".cm-scroller": {
  scrollbarWidth: "thin",
  scrollbarColor: "#3f3f46 transparent",
}

​
Performance

CodeMirror 6 provides excellent performance even with large files:
  • Lazy rendering - Only visible lines are rendered
  • Incremental parsing - Syntax highlighting updates incrementally
  • Optimized updates - Minimal DOM manipulation
  • Virtual scrolling - Smooth scrolling through thousands of lines
The editor is optimized for files up to 10,000 lines. For larger files, some features may be automatically disabled for performance.

​
Next Steps

AI Assistance

Learn about AI-powered code suggestions and editing

File Management

Manage your project files and folders

Build docs developers (and LLMs) love

Get started for freeTalk to us