@process.co/json-graph

Render JSON data as an interactive graph using React Flow and ELK layout.

[!IMPORTANT] This package is developed in the Process.co monorepo and synced to process-co/json-graph. Direct edits in the standalone repo may be overwritten by automation.

Installation

npm install @process.co/json-graph

Latest development version

npm install git+https://github.com/process-co/json-graph.git#main

Quick start

import { JsonGraph } from '@process.co/json-graph';
import '@process.co/json-graph/styles.css';

const data = {
  user: {
    name: 'Ada',
    age: 36,
  },
  tags: ['admin', 'beta'],
};

export function Example() {
  return <JsonGraph json={data} className="h-[520px] w-full" />;
}

API

JsonGraph

interface JsonGraphProps {
  json: string | object;
  className?: string;
}

• json: JSON string or plain object/array to visualize.
• className: Optional class for sizing/layout of the container.

parseJsonToGraph

import { parseJsonToGraph } from '@process.co/json-graph';

Parses JSON into internal graph nodes and edges before layout:

const parsed = parseJsonToGraph({ a: 1, b: { c: true } });
// parsed.nodes, parsed.edges

Also exported types:

• GraphNode
• GraphEdge
• ParseResult

Development

From the monorepo package directory:

pnpm build
pnpm test
pnpm storybook

Links

• Package source (monorepo): process-co/json-graph
• Published repository: https://github.com/process-co/json-graph
• npm: https://www.npmjs.com/package/@process.co/json-graph