neo4j-nvl-skill
installsforks
How to install neo4j-nvl-skill?
neo4j-contrib/neo4j-skills/neo4j-nvl-skill
$npx -y skills add neo4j-contrib/neo4j-skills --skill neo4j-nvl-skillNeo4j Visualization Library (NVL) — framework-agnostic graph rendering for the browser.
SKILL.md
| 1 | ## When to Use |
| 2 | - Rendering a Neo4j graph in a browser (vanilla JS, React, Vite) with custom interactions, rendering, or data shapes |
| 3 | - Visualizing `driver.executeQuery` results as an interactive graph |
| 4 | - Wiring zoom, pan, drag, click, hover, lasso, or box-select interactions |
| 5 | - Embedding NVL inside an existing app and synchronizing graph state |
| 6 | |
| 7 | ## When NOT to Use |
| 8 | - **Pre-styled embedded graph view with default behavior, no custom interactions** → `GraphVisualization` from `@neo4j-ndl/react` (Neo4j Needle / NDL design system) — wraps NVL with default Neo4j styling. See [Use NVL or the Needle Component?](#use-nvl-or-the-needle-component) below. |
| 9 | - **Python / Jupyter notebook graph visualization** → `neo4j/python-graph-visualization` (the Python port of NVL) |
| 10 | - **Writing/optimizing Cypher** → `neo4j-cypher-skill` |
| 11 | - **Driver setup / executeQuery / sessions** → `neo4j-driver-javascript-skill` |
| 12 | - **Server-side data fetching with no rendering** → `neo4j-driver-javascript-skill` |
| 13 | - **GDS algorithm execution** → `neo4j-gds-skill` or `neo4j-aura-graph-analytics-skill` |
| 14 | - **GraphQL API** → `neo4j-graphql-skill` |
| 15 | |
| 16 | --- |
| 17 | |
| 18 | ## Use NVL or the Needle Component? |
| 19 | |
| 20 | | Need | Use | |
| 21 | |---|---| |
| 22 | | Embed a graph view with default Neo4j styling, no custom interactions or rendering | `GraphVisualization` from `@neo4j-ndl/react` (Neo4j Needle / NDL design system) — wraps NVL and accepts records shaped `{ id, labels, properties: { key: { stringified, type } } }` (`NeoNode`) | |
| 23 | | Custom interactions, custom rendering, non-standard data shapes, or framework-agnostic embedding | This skill — use NVL directly | |
| 24 | |
| 25 | If the answer is the first row, install and use the Needle component instead of NVL — do not duplicate styling work. |
| 26 | |
| 27 | --- |
| 28 | |
| 29 | ## Install |
| 30 | |
| 31 | ```bash |
| 32 | npm install @neo4j-nvl/base # core (required) |
| 33 | npm install @neo4j-nvl/interaction-handlers # standard interactions (optional, vanilla JS) |
| 34 | npm install @neo4j-nvl/react # React wrappers (optional) |
| 35 | ``` |
| 36 | |
| 37 | Peer requirements: **React 19** for `@neo4j-nvl/react`. The published peerDependency range still permits React 18, but mixing major versions is not recommended — target 19. `@neo4j-nvl/layout-workers` is a transitive dependency — never install directly. `neo4j-driver` is a peer of `@neo4j-nvl/base` only when using `nvlResultTransformer`. |
| 38 | |
| 39 | Starter templates: https://github.com/neo4j-devtools/nvl-boilerplates — official per-framework scaffolds; prefer these over hand-rolled setups. |
| 40 | |
| 41 | License: NVL ships under the **Neo4j Visualization Library License** — for use with Neo4j products only. Cannot be used against other graph backends. |
| 42 | |
| 43 | --- |
| 44 | |
| 45 | ## Pick the Right Paradigm |
| 46 | |
| 47 | | Need | Use | |
| 48 | |---|---| |
| 49 | | React app, default interactions | `<InteractiveNvlWrapper>` from `@neo4j-nvl/react` | |
| 50 | | React app, custom interaction wiring | `<BasicNvlWrapper>` + own handlers via `ref` | |
| 51 | | Vanilla JS, standard interactions | `NVL` + `@neo4j-nvl/interaction-handlers` | |
| 52 | | Vanilla JS, fully custom event logic | `NVL` + `container.addEventListener` + `nvl.getHits()` | |
| 53 | | Static PNG/SVG image export | `<StaticPictureWrapper>` or `nvl.saveToFile()` / `nvl.saveToSvg()` | |
| 54 | |
| 55 | --- |
| 56 | |
| 57 | ## Pick the Right Renderer |
| 58 | |
| 59 | | Renderer | Max nodes | Detail | Use case | |
| 60 | |---|---|---|---| |
| 61 | | `'canvas'` (default) | ~1,000 | Full captions, icons, arrows, pixel-perfect hit-testing | Detail investigation, small graphs | |
| 62 | | `'webgl'` | 100,000+ | Reduced label fidelity (bound by GPU max texture size) | Large-scale pattern exploration | |
| 63 | |
| 64 | ```javascript |
| 65 | const nvl = new NVL(container, nodes, rels, { renderer: 'webgl' }) |
| 66 | nvl.setRenderer('canvas') // swap at runtime |
| 67 | ``` |
| 68 | |
| 69 | --- |
| 70 | |
| 71 | ## Container Setup |
| 72 | |
| 73 | The container must have an explicit `width` AND `height`. Missing height → container collapses to `0` → graph invisible. Most-reported NVL bug. |
| 74 | |
| 75 | ```html |
| 76 | <!-- ❌ height defaults to 0; graph invisible --> |
| 77 | <div id="viz"></div> |
| 78 | |
| 79 | <!-- ✅ explicit d |
People who liked this also viewed
6 picksType
- azure-storageAzure Storage Services including Blob Storage, File Shares, Queue Storage, Table Storage, and Data Lake. Answers questions about storage access tiers (hot, cool, cold, archive), when to use each tier,SkillsJul 2026
- supabase-postgres-best-practicesPostgres performance optimization and best practices from Supabase. Use this skill when writing, reviewing, or optimizing Postgres queries, schema designs, or database configurations.SkillsJul 2026
- supabaseUse when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron, Queues); client libraries and SSR integrations (supabase-js, SkillsJul 2026
- convex-quickstartCreates or adds Convex to an app. Use for new Convex projects, npm create convex@latest, frontend setup, env vars, or the first npx convex dev run.SkillsJul 2026
- convex-performance-auditAudits Convex performance for reads, subscriptions, write contention, and function limits. Use for slow features, insights findings, OCC conflicts, or read amplification.SkillsJul 2026
- convex-setup-authSets up Convex auth, identity mapping, and access control. Use for login, auth providers, users tables, protected functions, or roles in a Convex app.SkillsJul 2026
