Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Vega Viewer

Version Installs Downloads

Trending-Weekly Trending-Monthly

Vega Viewer provides language support & Interactive Preview of Vega & Vega-Lite JSON spec graphs πŸ“ˆ

You can use it in a disconnected mode, unlike other online dataViz devTools, to prototype your maps πŸ—ΊοΈ & graphs πŸ“ˆ on a go, on a ✈️, on a πŸš„, on a 🚀, in a πŸ“¦ with a 🐐, and no d3 py plotly || rstats required! :)

Advanced Vega Charts


  • Create Vega || Vega-Lite JSON {} spec documents
  • Vega & Vega-Lite Graphs Preview πŸ“ˆ
  • Local & http(s) data files support
  • SVG & PNG Graph Export options
  • 660 searchable built-in Vega & Vega-Lite Examples
  • Vega Themes Preview
  • Load Vega specs from online Vega Editor or github gists
  • Preview Vega graphs πŸ“ˆ from ⭐️ Starred Gists, Playgrounds & featured Data Visualizations in GistPad πŸ“˜
  • View and Share Vega(-Lite) spec in the online Vega Editor
  • Referenced CSV & JSON data display via Data Preview 🈸

Vega Viewer Data Preview


Install Data Preview 🈸 or use built-in command to preivew referenced CSV & JSON data files for your Vega graphs πŸ“ˆ

Vega Viewer Data Preview Command Setting


  1. Use Vega: Create Vega Spec command from View -> Command Pallette... menu to Create & Save new Vega || Vega-Lite document with the corresponding Vega json $schema reference

  2. Run Vega: Preview Vega Graph command on an open .vg.json || .vl.json Vega spec document to Preview πŸ“ˆ

  3. Save updated Vega spec json document to Preview updated Graph πŸ“ˆ

  4. Use Vega: Preview Remote Vega Graph command to preview URL encoded Vega specs from online Vega Editor or github gists

Built-in Examples

  1. Run Vega: Examples command to view the list of built-in Vega Examples

  2. Run Vega: Lite Examples command to view all the Vega-Lite Maps πŸ—Ί & Graphs πŸ“ˆ created by the Vega dev community πŸ€—

  3. Run Vega: Visual Vocabulary Examples command to View quick list of Visual Vocabulary Vega Examples


Example: Vega Contour Plot Preview

Vega Viewer Plot Example

Vega Viewer VSCode Contributions

Vega Viewer Contributions

Vega Viewer Commands

Vega Viewer Commands

Vega Viewer GistPad Integration

Vega Viewer Gistpad Integration

Recommended Extensions

Other extensions Vega Viewer replaces, enhances or supplements for working with data and graphs πŸ“ˆ in VSCode:

Extension Description
Data Preivew 🈸 Data Preview 🈸 extension for importing πŸ“€ viewing πŸ”Ž slicing πŸ”ͺ dicing 🎲 charting πŸ“Š & exporting πŸ“₯ large JSON array/config, YAML, Apache Arrow, Avro & Excel data files
GistPad πŸ“˜ VS Code extension for managing and sharing code snippets, notes and interactive samples using GitHub Gists
SVG Viewer SVG Viewer for Visual Studio Code
Geo Data Viewer πŸ—ΊοΈ Geo Data Viewer w/0 Py 🐍, pyWidgets βš™οΈ, pandas 🐼, or @reactjs βš›οΈ required to gen. some snazzy maps πŸ—ΊοΈ with keplerGL ...

Dev Log

See #VegaViewer πŸ“ˆ tag on Twitter for the latest & greatest updates on this vscode extension & what's in store next.

Dev Build

$ git clone
$ cd vscode-vega-viewer
$ npm install
$ code .

F5 to launch Vega Viewer extension VSCode debug session:

Alt text


Any & all test, code || feedback contributions are welcome.

Open an issue || create a pull request to make Vega Viewer πŸ“ˆ work better for all. πŸ€—