Back to docsRecipe

Code editor design

A monospace-first editing surface with syntax-aware line numbers, minimap, and a command palette that feels native to the desktop.

Ingredients

  • Monospace grid — 14px Cascadia Code, 1.6 line-height, tab stops at 4 spaces
  • Gutter — 48px fixed width, relative line numbers, active-line highlight
  • Minimap — 80px right rail, character-level pixel blocks, scroll-synced
  • Command palette — Ctrl+Shift+P, fuzzy-filtered, keyboard-first navigation
  • Token coloring — keywords violet, strings pink, comments muted zinc

Steps

  1. 1

    Lay the grid

    Set up a contenteditable div with white-space: pre and a monospace font stack. Overlay a canvas for decorations.

  2. 2

    Tokenize on keystroke

    Run a lightweight lexer on the current line block. Apply span-wrapped classes for keywords, strings, and comments.

  3. 3

    Sync the minimap

    Render a downscaled pixel buffer from the editor surface. Track scroll position with a viewport indicator.

  4. 4

    Wire the palette

    Trap Ctrl+Shift+P, render a floating input with fuzzy search over a command registry. Arrow keys navigate, Enter executes.

Edge cases

  • • Large files — virtualize lines outside the viewport
  • • Undo stack — maintain a command-based history, not full snapshots
  • • Multi-cursor — track selections as an ordered set, merge on overlap
  • • IME composition — defer tokenization until compositionend fires
← Back to docsMeridian · Recipe