Editor augmentation — Monaco interactivity sandbox

A live Vega-Lite spec bound to a fake weather dataset (date, precipitation, temp_max, temp_min, wind, weather). Move the cursor around and try each surface — every action edits the real document and is undoable with ⌘/Ctrl+Z.

Refactor & transform

⌘. Lightbulb code actions

The contextual refactor menu. Open it in the view and you'll see Wrap in layer / hconcat / vconcat, plus value swaps when you're on a mark, type, or field line. Select a child view's JSON first to wrap just that part; with no selection it wraps the whole document. This is the position-aware "give me ideas" surface.

right-click / F1 Menu actions

The same transforms as durable menu items — a discoverable home with the lightbulb as the accelerator. Right-click the editor, or press F1 and type "wrap".

inline CodeLens

Clickable affordances rendered above a line: ＋ add layer / ＋ add color encoding over "mark", and ＋ add view over a composition array. Look just above the "mark" line.

Beyond the schema

⌃Space Dataset-aware completion

In a "field" value, suggestions are the dataset's real columns with their inferred types — something the Vega-Lite schema can't know. Also augments type, mark, and aggregate values. Click inside a field's quotes and press ⌃Space.

hover Field hover

Hover a column name to see its inferred type and sample values pulled from the bound dataset (merged with, not replacing, the schema's own hover).

ghost Inlay hints

Each "field" gets a faint type annotation beside it — annotation without touching the text. Toggle it from the header.

squiggle Diagnostics → quick fix

A field not in the dataset gets a warning squiggle and a "Change to …" quick fix. The starter spec ships one typo ("wnd") so you can see it immediately — open the lightbulb on that line.

Editor basics (for reference)

⇧⌥F Format & misc

Format the document, then notice folding, multi-cursor, and the minimap all come free with Monaco.