Skip to main content

Get started


Cosmograph is available on NPM as a React @cosmograph/react library or vanilla TypeScript library @cosmograph/cosmograph.

npm install -P @cosmograph/react

Preparing data

Cosmograph expects the data to be nodes and links arrays:

const nodes: Node[] = [...]
const links: Link[] = [...]

You don't need TypeScript to use Cosmograph. But we'll still provide TypeScript types across the documentation as a reference.

Each node object needs to have a unique identifier specified in the id property. You can optionally provide starting positions for each node using the x and y properties. The links will need to have the source and target properties referencing specific nodes by their unique id.

type Node = {
id: string;
x?: number;
y?: number;

type Link = {
source: string;
target: string;

Initializing the graph

After your data is ready, you can initialize Cosmograph by defining its configuration and passing the data. The way to do it will depend on whether you use React or plain JavaScript. Below you can find an example code of how you can initialize Cosmograph with a simple configuration.


While Cosmograph doesn't have adaptors to other UI frameworks besides React, you can still integrate it into your Angular, Vue, Svelte, or other app, by using JavaScript code.

import { Cosmograph } from '@cosmograph/react'

export function GraphVisualization ({ nodes, links }) {
return (<Cosmograph
nodeColor={d => d.color}
Questions? Contact us at
[email protected]