---
name: vega-editor-reference-clone
description: Location and nature of the local vega/editor clone used as a technique reference for Astrolabe's Monaco/vega-embed/validation work
metadata:
  type: reference
---

The canonical Vega-Lite editor (vega/editor) is cloned locally at
`/Users/oleh/code/reference/vega-editor` (shallow clone of `main`, HEAD 4fdbb59). It is the
reference for the "editor + renderer" wiring Astrolabe's M1/M2 call out ("mine vega-editor
for how it wires the schema"). Re-clone with `git clone --depth 1 https://github.com/vega/editor`.

Key divergences to remember when borrowing — it is **React + Redux/context**, uses
`@monaco-editor/react` + `@monaco-editor/loader` (CDN-loaded Monaco, no explicit worker
config), and — surprisingly — **does NOT use vega-embed for its live preview** (it hand-rolls
`vegaLite.compile` → `vega.parse` → `new vega.View().runAsync()`; vega-embed is imported only
for types + the exported standalone HTML). Astrolabe is React (see [[stack-moving-to-react]]) +
Zustand stores + raw `monaco-editor` + `vegaEmbed()`. Since both are now React, vega/editor's
component lifecycle patterns port fairly directly; the friction is state (their flat Redux →
our Zustand stores) and Monaco worker wiring (their CDN loader → our explicit Vite workers).
The Monaco choice (self-hosted from npm + raw API, not the CDN loader / `@monaco-editor/react`
route) is a recorded decision — see `docs/architecture/08` § Decision · Monaco integration.

The highest-value files: `src/utils/monaco.ts` (schema wiring), `src/utils/validate.ts` (ajv),
`src/utils/jsonc-parser.ts`, `src/utils/logger.ts` (LocalLogger), `src/components/renderer/renderer.tsx`
(View lifecycle), `src/components/app.tsx:188-365` (parse→validate→compile→render flow),
`src/constants/default-state.ts` (state shape). Relevant to [[]] M1/M2 of the implementation plan.