Code Editor
Last updated:
The WebSandbox code editor — powered by CodeMirror and VSCode Server with TypeScript IntelliSense, multi-tab support, keybindings, and live diagnostics.
Editor Overview
The editor panel sits at the centre of the WebSandbox workspace. It supports:
- Syntax highlighting for 50+ languages
- Full TypeScript/JavaScript IntelliSense powered by the in-browser LSP
- Multi-tab editing with drag-to-reorder
- Horizontal and vertical panel splits
- Minimap navigation
- Code folding
- Multi-cursor editing (Alt+Click)
- Find & Replace across files (Cmd/Ctrl+Shift+F)
Language Support
Our editors provide built-in tokenisation for all major languages. WebSandbox ships with enhanced support for:
| Language | Syntax Highlight | IntelliSense | Diagnostics |
|---|---|---|---|
| TypeScript / TSX | ✓ | ✓ (full LSP) | ✓ real-time |
| JavaScript / JSX | ✓ | ✓ (type inference) | ✓ real-time |
| CSS / SCSS / Less | ✓ | ✓ (property hints) | ✓ |
| HTML | ✓ | ✓ (tag completion) | — |
| JSON / JSONC | ✓ | ✓ (schema hints) | ✓ |
| Markdown | ✓ | — | — |
TypeScript IntelliSense
WebSandbox runs a full TypeScript Language Server inside the WebContainer. This means IntelliSense is not based on static snippet databases — it performs real type-checking against your actual project types, including third-party library types from @types/* packages.
Features powered by the in-browser LSP:
- Auto-complete with type-aware suggestions
- Hover documentation (JSDoc comments, type signatures)
- Go to definition / Go to type definition
- Find all references
- Rename symbol (refactoring)
- Inline error squiggles from
tsc - Quick fix suggestions (auto-import, etc.)
Tabs & Splits
Each open file gets a tab in the editor header bar. Tabs can be:
- Pinned — right-click a tab → Pin Tab to prevent it from being replaced by preview opens
- Split horizontally / vertically — drag a tab to the edge of the editor pane to create a split, or use the split icon in the toolbar
- Diff view — right-click a file in the git panel → Open Diff to view staged vs. working changes side-by-side
Keybindings
WebSandbox uses VS Code-compatible keybindings by default. Key shortcuts:
| Action | Mac | Windows / Linux |
|---|---|---|
| Command Palette | Cmd+Shift+P | Ctrl+Shift+P |
| Quick Open (file) | Cmd+P | Ctrl+P |
| Find in file | Cmd+F | Ctrl+F |
| Find across files | Cmd+Shift+F | Ctrl+Shift+F |
| Go to line | Ctrl+G | Ctrl+G |
| Multi-cursor | Option+Click | Alt+Click |
| Format document | Shift+Option+F | Shift+Alt+F |
Editor Settings
Open the editor settings panel via the gear icon in the bottom-left toolbar (or Cmd+,). Configurable options include:
- Font family and size
- Tab size and indent style (spaces vs. tabs)
- Line numbers, minimap, word wrap
- Theme (synced to the system light/dark preference by default)
- Format on save
- Bracket pair colourisation
Settings are persisted per-user and restored across workspaces.