Welcome to the Neo4j Visualization Library, NVL for short. NVL is a collection of libraries that can be used to build custom graph visualizations like those used in Neo4j Bloom. NVL is written in TypeScript and can be used in any JavaScript project. It is also available as a React component that can be used in React applications.
You can install the library with your preferred package manager, for example
npm install @neo4j-nvl/base
If you want to add common interactivity to the graph, you can install the NVL interaction handlers. If you are planning to use NVL in a React app, be sure to check out the NVL React wrappers.
This is a basic setup for a NVL instance.
const nodes = [{ id: '1' }, { id: '2' }]
const relationships = [{ id: '12', from: '1', to: '2' }]
const options = {
layout: 'forceDirected',
initialZoom: 0.5
}
const callbacks = {
onLayoutDone: () => console.log('Layout done')
}
const nvl = new NVL(document.getElementById('frame'), nodes, relationships, options, callbacks)
You can find more instructions and examples on how to use NVL in the docs.
This package ships an agent skill for NVL (neo4j-nvl-skill) that helps AI coding assistants write correct NVL code for the version you have installed. @neo4j-nvl/react and @neo4j-nvl/interaction-handlers point to this skill as well. To make it available to your agent, run the following with a recent version of the skills CLI:
npx skills experimental_sync
Every NVL instance registers read-only helpers on window for tests and tooling: __Nvl_dumpNodes, __Nvl_dumpRelationships, __Nvl_getNodesOnScreen, __Nvl_getZoomLevel and __Nvl_registerDoneCallback. Each takes the instanceId from nvlOptions (default 'default'). See the NvlWindow type for details.
In order to improve the library we are collecting some information about the usage of NVL. If you prefer to disable this behavior set the parameter disableTelemetry=true as a parameter in nvlOptions.