VizChat Widget Preview

Live-preview and debug VizChat widgets without leaving VS Code.

Open any file inside a widget package, run VizChat: Open Widget Preview from the Command Palette, and a side panel renders that widget's demo — fully interactive, the same container it gets on the VizChat canvas. Save a source file and it recompiles and refreshes on its own.

Requirements

The extension is a thin shell around the vizchat-widget CLI, so the widget package has to be able to run that CLI on its own:

• VS Code 1.125 or newer.
• pnpm on your PATH — the extension launches the dev server via pnpm exec.
• A widget package whose package.json contains a vizchat block (this is what identifies a directory as a widget), with @vizchat/widget-scripts installed as a dependency.

A minimal widget package.json looks like this:

{
  "name": "@acme/my-widget",
  "vizchat": {
    "mount": "inline",
    "displayName": "My Widget",
    "entry": "src/index.ts",
    "definition": "src/definition.ts",
    "demo": "src/demo.stb"
  },
  "devDependencies": {
    "@vizchat/widget-scripts": "^0.3.0"
  }
}

Usage

1. Open any file inside the widget package.
2. Run VizChat: Open Widget Preview from the Command Palette (Cmd/Ctrl+Shift+P).
3. The preview opens beside the editor. Edit and save — it rebuilds automatically.

One dev server runs per widget package and is reused; closing the preview panel shuts it down. Server logs go to the VizChat Widget Dev channel in the Output panel.

Starting from a file that is not inside a widget package is reported as an error rather than guessed at — the extension walks up looking for a package.json with a vizchat block and stops if it finds none.

How it works

The extension does exactly two things: start a dev server process and open an iframe pointing at it. Everything that makes the preview work — compilation, serving build output, singleton supply, cross-widget resolution — lives in the dev subcommand of @vizchat/widget-scripts, and the preview UI is a standalone SPA.

The practical consequence: opening the same local address in a browser shows exactly the same thing. Nothing here is VS Code-only, so teammates on other editors lose no capability.

On the first preview, the dev server fetches the preview UI assets from VizChat's CDN and caches them on disk; subsequent runs work offline.

Privacy

The extension itself sends no telemetry and makes no network requests. The dev server it launches runs on 127.0.0.1 and reaches the network only for the one-time asset fetch described above.

License

Proprietary — see the License tab. Free to use, including for commercial widgets you build and sell; redistribution and derivative works are not permitted.