XSVG Viewer for VS Code

The designated editor for .xsvg files — VisionCortex's interactive xsvg viewer embedded in a VS Code custom editor. Open a .xsvg file and it renders as the compiled SVG, with pan/zoom, the multi-artboard slide deck, and a collapsible inspector + source pane.

Features

• Designated .xsvg viewer. Opening any .xsvg file uses this editor by default — no drag-and-drop, no file picker. To edit the XML source, run “xsvg: Open Source in Text Editor” from the command palette (or right-click → Reopen With → Text Editor).
• Theme-aware. The canvas, panels, controls, and inspector map onto your active VS Code color theme via --vscode-* variables, and follow light/dark automatically.
• Live reload. Edits — whether typed in a text editor beside the viewer or made by an external tool on disk — recompile and reframe the drawing instantly.
• Pure JS + WASM. The xsvg compiler ships as WebAssembly inlined into the viewer bundle. No native modules, no Rust/wasm-pack build step — the extension is a self-contained JavaScript + WASM package.

Interacting with the view

• Scroll to zoom, middle-drag (or hold Space and drag) to pan.
• Fit / 1:1 toggle and ± zoom live in the bottom-right control cluster.
• The ‹ › code button toggles the inspector; click any element on the canvas to see its tag, attributes, and bounding box, with the matching source highlighted.
• Multi-artboard documents get a slide rail; navigate with the thumbnails or the ← / → arrow keys.

Develop

npm install
npm run build          # or: npm run watch

Press F5 in VS Code (or code --extensionDevelopmentPath=.) to launch an Extension Development Host, then open any .xsvg file. Sample files live in the xsvg repo's dataset/ directory.

Package a .vsix with npm run package (requires @vscode/vsce).

How it works

The extension registers a CustomTextEditorProvider for *.xsvg. Because it is text-backed, VS Code keeps the underlying TextDocument in sync with the file on disk; every change fires onDidChangeTextDocument, which the extension forwards to the webview. The webview hosts the packaged <xsvg-view-interactive> custom element and sets its .source property, which recompiles the xsvg to SVG and reframes it.

Built on @visioncortex/xsvg-viewer.