goettl79 / editor

Editor/IDE for Vega and Vega-Lite

Home Page:https://vega.github.io/editor/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vega Editor Build Status Publish

The Vega editor is a web application for authoring and testing Vega and Vega-Lite visualizations. It includes a number of example specifications that showcase both the visual encodings and interaction techniques. It is deployed at https://vega.github.io/editor/.

We integrated a back-end service at https://vega-editor-backend.vercel.app/ which lets a user log in through GitHub so that they can access his/her personal gists. The code for the backend is at https://github.com/vega/editor-backend.

Editor is stuck

You can reset the Vega Editor by going to https://vega.github.io/editor/#/reset and clicking the reset button. This will reset the saved editor state.

Usage Instructions

To run the editor locally, you must first install the dependencies and then launch a local web server. We assume you have yarn installed.

  1. Install the dependencies:
$ yarn
  1. Start the server:
$ yarn start
  1. The local web server will be accessible from http://localhost:8080.


If you'd like to use Docker, there's a Docker Compose setup that you can use:

  1. Build the docker container:
$ docker-compose build
  1. Run the Docker Compose service:
$ docker-compose up
  1. The local web server will be accessible from http://localhost:8080. You can run yarn commands with docker-compose run editor CMD.

Local Testing & Debugging

The editor is useful for testing if you are involved in Vega and Vega-Lite development. To use Vega, Vega-Lite, or Vega Datasets from another directory on your computer, you need to link it. For this, run yarn link in the directory of the library that you want to link. Then, in this directory run yarn link <name of library>, e.g. yarn link vega or yarn link vega-lite.

For example, to link Vega, run

yarn link

yarn link

yarn link vega
yarn link vega-lite

The Vega editor supports React Developer Tools and Redux DevTools.

Building preview images

Build images with yarn generate-example-images.

Contributing guidelines

We welcome contributions and promptly review pull requests. For instructions about how to contribute, please follow the Vega-Lite contributing guidelines.

Creating a release on gh-pages

Add all changes from master into the publish branch with the following commands:

git checkout master
git pull
git checkout publish
git merge master --ff-only
git push
git checkout master

You can preview the changes in this comparison. GitHub will automatically deploy the editor.

ezoic increase your site revenue


Editor/IDE for Vega and Vega-Lite


License:BSD 3-Clause "New" or "Revised" License


Language:TypeScript 86.5%Language:CSS 10.4%Language:JavaScript 1.2%Language:Shell 0.7%Language:Dockerfile 0.6%Language:HTML 0.5%