Web Editor

The Drok Web Editor is a full development environment running in your browser. Built on Monaco — the same editor engine that powers VS Code — it provides syntax highlighting, IntelliSense, multi-cursor editing, and integrated terminal access without installing anything.

Opening the Editor

From any file in the repository browser, press . (period) or click the Edit button to open the file in the Web Editor. The editor loads in the same browser tab with the full repository context available.

For a full IDE experience, press , (comma) from any repository page to open the multi-file editor with a sidebar, terminal, and split panes.

Editor Features

Monaco Foundation

The Web Editor inherits the full Monaco feature set:

• Syntax highlighting — All languages supported by Monaco, plus Drok's Tree-sitter grammars for extended coverage
• IntelliSense — Autocomplete, parameter hints, and quick info for supported languages
• Multi-cursor editing — Ctrl+D / Cmd+D to select next occurrence, Alt+Click to add cursors
• Minimap — Scrollbar-integrated code overview
• Bracket matching — Automatic bracket highlighting and rainbow brackets
• Code folding — Collapse functions, classes, blocks, and regions
• Find and replace — With regex support and preserve-case option

Language Server Protocol (LSP)

The Web Editor connects to language servers running on Drok's infrastructure for:

LSP provides real-time diagnostics, go-to-definition, find-references, and rename-symbol directly in the browser.

Linter Integration

Linter output appears inline as you type:

• ESLint — For JavaScript and TypeScript files
• Clippy — For Rust files
• Pylint / Ruff — For Python files
• golangci-lint — For Go files

Linter warnings and errors display as squiggly underlines with hover tooltips explaining the issue and offering quick-fix actions where available.

Editing Workflows

Quick Edit

For single-file edits (typo fixes, documentation updates, configuration changes):

1. Navigate to the file in the repository browser
2. Press . to open the editor
3. Make your changes
4. Click Commit — choose to commit directly or create a new branch

Multi-File Editing

For changes spanning multiple files:

1. Press , from the repository page to open the full editor
2. Use the file sidebar to navigate between files
3. Open multiple files in tabs
4. Use split panes for side-by-side editing
5. Commit all changes together with a single commit message

Live Preview

For web projects, the editor offers live preview:

• HTML files render in a side panel
• Markdown files render with full GFM support
• CSS changes reflect immediately in the preview

Terminal

The integrated terminal provides shell access to a sandboxed environment with your repository checked out:

• Run build commands (cargo build, npm run build)
• Execute tests (cargo test, pytest)
• Use Git commands directly
• Install dependencies within the session

Terminal sessions are ephemeral — they exist for the duration of your editor session and are destroyed when you close the editor.

Keyboard Shortcuts

The Web Editor supports the full VS Code keybinding set:

Configuration

Editor settings are stored per user and sync across devices:

{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": true,
  "editor.renderWhitespace": "boundary",
  "editor.bracketPairColorization.enabled": true
}

Access settings via Ctrl+, / Cmd+, in the editor.

Collaboration

Multiple users can edit the same file simultaneously. Changes are synchronized in real time using operational transformation (OT). Each user's cursor position and selection are visible to other editors, identified by color-coded cursors with username labels.

Collaborative editing sessions are created automatically when multiple users open the same file from the same branch.