Lyra
An interactive, graphical Visualization Design Environment (VDE)
Install / Use
/learn @vega/LyraREADME
Lyra
Lyra is an interactive environment that enables custom visualization design without writing any code. Graphical “marks” can be bound to data fields using property drop zones; dynamically positioned using connectors; and directly moved, rotated, and resized using handles. Lyra also provides a data pipeline interface for iterative visual specification of data transformations and layout algorithms. Lyra is more expressive than interactive systems like Tableau, allowing designers to create custom visualizations comparable to hand-coded visualizations built with D3 or Processing. These visualizations can then be easily published and reused on the Web.
This is the working branch for Lyra 2 and does not contain all functionality. A deployed version of Lyra 1 is available online. For more information, check out the Lyra wiki.
To build a stable version of Lyra 1, see the master branch. For a stable but not fully-featured version of Lyra 2, see the lyra2 branch.
Local Development
Installation
To work on Lyra locally, you must have node and yarn installed on your computer. Download this repository with Git, then (from the command prompt or terminal) check out the lyra2 development branch with the command
git checkout lyra2019
Once you are on the lyra2 branch, run
yarn install
to install the project's code dependencies.
Start the local webserver with the command:
yarn start
Lyra should now be running at http://localhost:8080! This web server will auto-reload when you change the JavaScript code; manually re-building with npm run build should only be necessary if you update the SCSS stylesheets.
Related Skills
diffs
340.5kUse the diffs tool to produce real, shareable diffs (viewer URL, file artifact, or both) instead of manual edit summaries.
clearshot
Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.
openpencil
1.9kThe world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.
HappyColorBlend
HappyColorBlendVibe Project Guidelines Project Overview HappyColorBlendVibe is a Figma plugin for color palette generation with advanced tint/shade blending capabilities. It allows designers to
