Interactive browser-based visualisation and editor for JSON-LD linked-data graphs. Built with Sigma.js, Graphology, and CodeMirror — zero server required; runs entirely as a static site on GitHub Pages.
| Category | Details |
|---|---|
| Graph visualisation | Force-directed, circular, radial, and grid layouts powered by Graphology + Sigma.js |
| Node interaction | Click to select & highlight connections, hover tooltips, drag-to-reposition mode |
| Search & filter | Full-text search and per-entity-type toggle filters in the sidebar |
| JSON-LD editor | Embedded CodeMirror editor with syntax highlighting, minimap, and source-line linking |
| Live editing | Edit the JSON-LD source, click Apply, and the graph rebuilds instantly in the browser |
| Data tables | Bottom panel with sortable tables grouped by entity type |
| Validation overlay | Schema validation badges (✓/✗) on every node, plus a dedicated Validation tab |
| Export | Download the edited JSON-LD file with one click |
# Serve locally (any static file server works)
python3 -m http.server 8000
# then open http://localhost:8000Or simply push to GitHub and enable GitHub Pages — no build step needed.
- Replace
data/sample.jsonld.jsonwith your JSON-LD file. - The file must contain a top-level
"@graph"array. - Entity types are configured in
js/config.js(ENTITY_TYPE_CONFIG).
├── index.html # Main HTML shell
├── css/
│ └── styles.css # All styles
├── js/
│ ├── config.js # Entity / edge type configuration
│ ├── graph.js # Graph data building & ID resolution
│ ├── layouts.js # Force, circular, radial, grid layouts
│ ├── editor.js # CodeMirror JSON-LD editor + minimap
│ ├── ui.js # Sidebar, tooltips, data tables, events
│ └── app.js # Bootstrap: fetch data, init Sigma
└── data/
└── sample.jsonld.json # Default JSON-LD dataset
- Graphology 0.25.4
- Sigma.js 3.0.0-beta.9
- CodeMirror 5.65.16
MIT